更新教程

docs/collocation/pages.md

@@ -898,14 +898,14 @@ h5 平台下拉刷新动画，只有 circle 类型。
 > `HBuilderX 2.5.5`起支持`easycom`组件模式。
 
 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。`easycom`将其精简为一步。
-只要组件安装在项目根目录或uni_modules的components目录下，并符合`components/组件名称/组件名称.vue`或`uni_modules/插件ID/components/组件名称/组件名称.vue`目录结构。就可以不用引用、注册，直接在页面中使用。
-如下：
+
+只要组件路径符合规范（具体见下），就可以不用引用、注册，直接在页面中使用。如下：
+
 ```html
 <template>
 	<view class="container">
+		<comp-a></comp-a>
 		<uni-list>
-			<uni-list-item title="第一行"></uni-list-item>
-			<uni-list-item title="第二行"></uni-list-item>
 		</uni-list>
 	</view>
 </template>
@@ -913,20 +913,40 @@ h5 平台下拉刷新动画，只有 circle 类型。
 	// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
 	export default {
 		data() {
-			return {
-
-			}
+			return {}
 		}
 	}
 </script>
 ```
 
-不管components目录下安装了多少组件，`easycom`打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
+`路径规范`指：
+1. 安装在项目根目录的components目录下，并符合`components/组件名称/组件名称.vue`
+2. 安装在uni_modules下，路径为`uni_modules/插件ID/components/组件名称/组件名称.vue`
+
+工程目录：
+
+<pre v-pre="" data-lang="">
+	<code class="lang-" style="padding:0">
+┌─components            
+│  └─comp-a
+│    └─comp-a.vue      符合easycom规范的组件
+└─uni_modules          [uni_module](/uni_modules)中符合easycom规范的组件
+   └─uni_modules
+     └─uni-list
+       └─components
+         └─uni-list
+           └─ uni-list.vue
+	</code>
+</pre>
+
+不管components目录下安装了多少组件，`easycom`打包会自动剔除没有使用的组件，对组件库的使用尤为友好。
 
 组件库批量安装，随意使用，自动按需打包。以官方的`uni-ui`为例，在HBuilderX新建项目界面选择`uni-ui`项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。
 
 在[uni-app插件市场](https://ext.dcloud.net.cn/)下载符合`components/组件名称/组件名称.vue`目录结构的组件，均可直接使用。
 
+**自定义easycom配置的示例**
+
 `easycom`是自动开启的，不需要手动开启，有需求时可以在`pages.json`的`easycom`节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。设置参数如下：
 
 |属性			|类型		|默认值	|描述																																											|
@@ -934,7 +954,7 @@ h5 平台下拉刷新动画，只有 circle 类型。
 |autoscan	|Boolean|true		|是否开启自动扫描，开启后将会自动扫描符合`components/组件名称/组件名称.vue`目录结构的组件	|
 |custom		|Object	|-			|以正则方式自定义组件匹配规则。如果`autoscan`不能满足需求，可以使用`custom`自定义匹配规则	|
 
-**自定义easycom配置的示例**
+如果你的组件，不符合easycom前述的`路径规范`。可以在pages.json的easycom节点中自行定义路径规范。
 
 如果需要匹配node_modules内的vue文件，需要使用`packageName/path/to/vue-file-$1.vue`形式的匹配规则，其中`packageName`为安装的包名，`/path/to/vue-file-$1.vue`为vue文件在包内的路径。
 
@@ -953,7 +973,7 @@ h5 平台下拉刷新动画，只有 circle 类型。
 - `easycom`方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
 - 在组件名完全一致的情况下，`easycom`引入的优先级低于手动引入（区分连字符形式与驼峰形式）
 - 考虑到编译速度，直接在`pages.json`内修改`easycom`不会触发重新编译，需要改动页面内容触发。
-- `easycom`只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
+- `easycom`只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
 - `nvue`页面里引用`.vue`后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持`easycom`
 
 ## tabBar

docs/tutorial/page.md

 ## 页面简介
 
-uni-app项目中，一个页面就是一个符合`Vue SFC规范`的`.vue`文件或`.nvue`文件。
+uni-app项目中，一个页面就是一个符合`Vue SFC规范`的 vue 文件。
 
-`.vue`页面和`.nvue`页面，均全平台支持，差异在于当uni-app发行到App平台时，`.vue`文件会使用webview进行渲染，`.nvue`会使用原生进行渲染，详见：[nvue原生渲染](/tutorial/nvue-outline)。
+- 在 uni-app js 引擎版中，后缀名是`.vue`文件或`.nvue`文件。
+- 在 uni-app x 中，后缀名是`.uvue`文件
+
+这些页面均全平台支持，差异在于当 uni-app 发行到App平台时，`.vue`文件会使用webview进行渲染，`.nvue`会使用原生进行渲染，详见：[nvue原生渲染](/tutorial/nvue-outline)。
+
+一个页面可以同时存在vue和nvue，在[pages.json](../collocation/pages.md)的路由注册中不包含页面文件名后缀，同一个页面可以对应2个文件名。重名时优先级如下：
+- 在非app平台，先使用vue，忽略nvue
+- 在app平台，使用nvue，忽略vue
 
 ## 新建页面
 
-`uni-app`中的页面，通常会保存在工程根目录下的`pages`目录下。
+`uni-app`中的页面，默认保存在工程根目录下的`pages`目录下。
 
-每次新建页面，均需在`pages.json`中配置`pages`列表；未在`pages.json -> pages` 中配置的页面，`uni-app`会在编译阶段进行忽略。pages.json的完整配置参考：[全局文件](/collocation/pages)。
+每次新建页面，均需在`pages.json`中配置`pages`列表；未在`pages.json -> pages` 中注册的页面，`uni-app`会在编译阶段进行忽略。pages.json的完整配置参考：[页面配置](../collocation/pages.md)。
 
 通过HBuilderX开发 `uni-app` 项目时，在 `uni-app` 项目上右键“新建页面”，HBuilderX会自动在`pages.json`中完成页面注册，开发更方便。
 
@@ -18,17 +25,206 @@ uni-app项目中，一个页面就是一个符合`Vue SFC规范`的`.vue`文件
 <img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/pages-add-02.png" style="max-width:450px"></img>
 </div>
 
+新建页面时，可以选择vue或nvue，还可以选择`是否创建同名目录`。创建目录的意义在于，如果你的页面较复杂，需要拆分多个附属的js、css、组件等文件，则使用目录归纳比较合适。如果只有一个页面文件，大可不必多放一层目录。
+
 ## 删除页面
 
 删除页面时，需做两件工作：
 - 删除`.vue`文件或`.nvue`文件
-- 删除`pages.json -> pages`列表项中的配置
+- 删除`pages.json -> pages`列表项中的配置 （如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容）
+
+## pages.json
+
+pages.json是工程的页面管理配置文件，包括：页面路由注册、页面参数配置（原生标题栏、下拉刷新...）、首页tabbar等众多功能。
+
+其篇幅较长，另见 [pages.json](../collocation/pages.md)
 
 ## 应用首页
 
-`uni-app`会将`pages.json -> pages`配置项中的第一个页面，作为当前工程的首页（启动页）。
+`pages.json -> pages`配置项中的第一个页面，作为当前工程的首页（启动页）。
+
+```json
+{
+	"pages": [
+		{
+			"path": "pages/index/index", //名字叫不叫index无所谓，位置在第一个，就是首页
+			"style": {
+				"navigationBarTitleText": "首页" //页面标题
+			}
+		},
+		{
+			"path": "pages/my",
+			"style": {
+				"navigationBarTitleText": "我的"
+			}
+		},
+	]
+}
+```
+
+## 页面内容构成
+
+uni-app 页面基于 vue 规范。一个页面内，有3个根节点标签 `<template>`、`<script>`、`<style>`，分别是模板组件区、脚本区、样式区。
+
+```html
+<template>
+	<view class="content">
+		<button @click="buttonClick">{{title}}</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: "Hello world", // 定义绑定在页面上的data数据
+			}
+		},
+		onLoad() {
+			// 页面启动的生命周期，这里编写页面加载时的逻辑
+		},
+		methods: {
+			buttonClick: function () {
+				console.log("按钮被点了")
+			},
+		}
+	}
+</script>
+
+<style>
+	.content {
+		width: 750rpx;
+		background-color: white;
+	}
+</style>
+```
+
+### template模板区
+
+template中文名为`模板`，它类似html的标签。但有2个区别：
+1. html中script和style是html的二级节点。但在vue文件中，template、script、style这3个是平级关系。
+2. html中写的是web标签，但vue的template中写的全都是vue组件，每个组件支持属性、事件、vue指令，还可以绑定vue的data数据。
+
+在vue2中，template的二级节点只能有一个节点，一般是在一个根view下继续写页面组件（如上示例代码）。
+
+但在vue3中，template可以有多个二级节点，省去一个层级，如下：
+```html
+<template>
+	<view>
+		<text>标题</text>
+	</view>
+	<scroll-view>
+		
+	</scroll-view>
+</template>
+```
+
+可以在manifest中切换使用vue2还是vue3（uni-app x中只支持vue3）
+
+### script脚本区
+
+script中编写脚本，可以通过lang属性指定脚本语言。
+
+- 在vue和nvue中，默认是js，可以指定ts
+- 在uvue中，仅支持uts。
+
+```html
+<script lang="ts">
+</script>
+```
+
+在vue的选项式（option）规范中，script下包含`export default {}`。（除了选项式，还有[组合式](vue3-composition-api.md)）
+
+页面级的代码大多写在`export default {}`中。写在里面的代码，会随着页面关闭而关闭。
+
+#### export default 外的代码
+先来介绍写在`export default {}`外面的代码，一般有几种情况：
+1. import三方js/ts模块
+2. import非easycom的组件（一般组件推荐使用[easycom](../collocation/pages.md#easycom)，无需导入注册）
+3. 在ts/uts中，对data的类型进行type定义
+4. 定义作用域更大的变量，注意外层的静态变量不会跟随页面关闭而回收
+
+```html
+<script lang="ts">
+	const TAB_OFFSET = 1; // 外层静态变量不会跟随页面关闭而回收
+	import charts from 'charts.ts'; // 导入外部js/ts模块
+	import swiperPage from 'swiper-page.vue'; //导入非easycom的组件
+	type GroupType = {
+		id : number,
+		title : string
+	} // 在ts中，为下面data数据的 groupList 定义类型
+	export default {
+		components: {
+		    swiperPage
+		}, // 注册非easycom组件
+		data() {
+			return {
+				groupList: [
+					{ id: 1, title: "第一组" },
+					{ id: 2, title: "第二组" },
+				] as GroupType[], // 为数据groupList定义ts类型
+			}
+		},
+		onLoad() {},
+		methods: {}
+	}
+</script>
+```
+
+#### export default 里的代码
+`export default {}` 里的内容，是页面的主要逻辑代码。包括几部分：
+1. data：template模板中需要使用的数据。具体[另见](vue-basics.md#data)
+2. 页面生命周期：如页面加载、隐藏、关闭，具体[见下](#lifecycle)
+3. methods方法，如按钮点击、屏幕滚动
+
+如下页面代码的逻辑是：
+1. 在data中定义了`title`，初始值是"点我"
+2. 在页面中放置了一个button组件，按钮文字区使用`{{}}`模板写法，里面写`title`，把data里的`title`绑定到按钮的文字区，即按钮的初始文字是"点我"
+3. 按钮的点击事件`@click`，指向了methods里的一个方法`buttonClick`，点击按钮即触发这个方法的执行
+4. buttonClick方法里通过`this.title`的方式，访问data数据，并重新赋值为"被点了"。由于vue中data和界面是双向绑定，修改data中的`title`后，因为按钮文字绑定了`title`，会自动更新按钮的文字。
+
+整体效果就是，刚开始按钮文字是"点我"，点一下后按钮文字变成了"被点了"
+
+```html
+<template>
+	<view>
+		<button @click="buttonClick">{{title}}</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: "点我", // 定义绑定在页面上的data数据
+				// 多个data在这里继续定义。逗号分隔
+			}
+		},
+		onLoad() {
+			// 页面启动的生命周期，这里编写页面加载时的逻辑
+		},
+		// 多个页面生命周期监听，在这里继续写。逗号分隔
+		methods: {
+			buttonClick: function () {
+				this.title = "被点了"
+			},
+			// 多个方法，在这里继续写。逗号分隔
+		}
+	}
+</script>
+```
+
+本章节为页面代码介绍，并非vue教程，了解data数据需[详见](vue-basics.md#data)
+
+### style样式区
+
+style的写法与web的css基本相同。
+
+如果页面是nvue或uvue，使用原生渲染而不是webview渲染，那么它们支持的css是有限的。
+
+详见[css文档](syntax-css.md)
 
-## 页面生命周期 @lifecycle
+## 页面生命周期@lifecycle
 
 ``uni-app`` 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：[Vue2 组合式 API 使用文档](/tutorial/vue-composition-api.html) 和 [Vue3 组合式 API 使用文档](/tutorial/vue3-composition-api.html)。
 

docs/tutorial/vue-basics.md

@@ -471,7 +471,7 @@ v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称
 
 
 
-## data 属性
+## data 属性@data
 
 data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
 
@@ -499,8 +499,80 @@ data 必须声明为返回一个初始数据对象的函数（注意函数内返
 	}
 ```
 
+return 外可以写一些复杂计算：
+```ts
+<script lang="ts">
+	export default {
+		data() {
+			const date = new Date()
+			return {
+				year: date.getFullYear() as number
+			}
+		}
+	}
+</script>
+```
 
+data数据在template中有2种绑定方式：
+1. text区域使用`{{}}`。详见[插值](#插值)
+2. 属性区域通过:属性名称，在属性值里直接写变量。详见[v-bind](#v-bind)
 
+```html
+<template>
+	<view class="content">
+		<button @click="buttonClick" :disabled="buttonEnable">{{title}}</button>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				title: "点我",
+				buttonEnable: false
+			}
+		},
+		methods: {
+			buttonClick: function () {
+				this.buttonEnable = true
+				this.title = "被点了，不能再点了"
+			},
+		}
+	}
+</script>
+```
+
+data数据在script中引用，通过`this.`的方式。如果在某些methods中this被指向了其他内容，则需要提前把this赋值给另一个变量，比如`let that = this`。
+
+```html
+<script>
+	export default {
+		data() {
+			return {
+				connectedWifi:""
+			}
+		},
+		methods: {
+			buttonClick: function () {
+				const that = this // 下面的this指向会变化，另存一下
+				uni.startWifi({
+					success: function() {
+						uni.getConnectedWifi({
+							success: function(res) {
+								const { wifi } = res
+								that.connectedWifi = JSON.stringify(wifi)
+							},
+							fail: function(res) {
+							}
+						})
+					},
+					fail: function(res) {
+					}
+				})
+			},
+		}
+	}
+</script>
+```
 
 ## Class 与 Style 绑定
 

docs/uni-app-x/readme.md

+# `uni-app x 并未发布，本文档为内部使用`
+
 # uni-app x 是什么？
 
 uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。

docs/uts/function.md

@@ -165,20 +165,18 @@ const myPet = pet("Vivie");
 myPet(); // 返回结果 "Vivie"
 ```
 
-### 函数参数
+### 函数默认参数
 
-#### 默认参数
-
-函数参数可以有默认值，当省略相应的参数时使用默认值。
+函数参数可以设默认值，当省略相应的参数时使用默认值。此时该参数也就成了可选参数。
 
 ```ts
 function multiply(a:number, b:number = 1):number {
   return a*b;
 }
-multiply(5); // 5
+multiply(5); // a为5，未传b的值，b默认为1，结果为5
 ```
 
-我们可以在能够使用常规的函数定义的场景下使用默认参数，例如：
+可以在常规的函数定义的场景下使用默认参数，例如：
 ```ts
 function print(msg:string = "") {
   console.log(msg)
@@ -187,7 +185,7 @@ print(); // ""
 
 
 class Persion {
-	test(msg: string | null = null) {
+	test(msg: string | null = null) { // 默认值可以为null
 		
 	}
 }