浅谈原生小程序

有句话说，会使用 vue 开发的程序员就会开发小程序，确实是这样，在我学习 vue 后，再去学习小程序时，感觉很好上手，因为很多语法都是类似的写法。当然，也有很多不一样的。

1.声明 data ：用过 vue 的朋友都知道， vue 中声明 data 时， data 必须是函数，不然会报错，原生的小程序就不是这样，直接 data: { } 就ok了。

2.绑定数据：绑定动态属性时需要在属性的双引号里使用 {{ }}

3.列表循环：使用 wx:for ，在循环题内有隐藏的item代表当前项， index 代表下标

4.事件 事件处理函数在page里定义，和onLoad / data等同级

事件的写法：以 bind 或 catch 开头，然后跟上事件的类型，如 bindtap、catchtouchstart

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

事件的传参：事件传参不能事件处理通过 () 来传递参数，在组件里面通过自定义属性 data-xx="参数名称" 来定义，在事件处理函数里通过 event.currentTarget.dataset 来获取参数

事件官方文档

5.修改data里面的数据

在vue中，修改data里面的数据，直接【 this.属性 】就可以修改了，可是小程序不一样，它需要通过【 this.setData({ data: newData }) 】来修改，访问data的中的数据用【 this.data.xx 】来访问；一开始学习小程序的时候，习惯了[vue](https://cn.vuejs.org/)的写法，总是写成 vue 的法，贼难受。

6.自定义组件

更多关注 小程序官方文档

说明 ：uni-app基于 Vue 2.0 实现，开发者需注意Vue 1.0 ->2.0 的使用差异，详见 从 Vue 1.x 迁移 。

uni-app不仅支持应用生命周期和页面生命周期，还支持 vue 实例的如下生命周期函数：

注意 ：不要在选项属性或回调上使用箭头函数，比如 created: () =>console.log(this.a) 或 vm.$watch('a', newValue =>this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。

几乎全支持 Vue官方文档：模板语法 ，下面讲下不支持的情况。

(1)不支持纯HTML

uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用，可以使用 rich-text组件 代替。或者使用三方组件wxparse，在hello uni-app中有示例。

(2)不支持部分复杂的 JavaScript 渲染表达式

非H5端无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === ><[] .，剩下的还待完善。

(3)不支持过滤器

编译到 App 和小程序平台时不支持使用过滤器，可以使用计算属性（computed）提前计算出数据（如果是数组类型，就提前计算整个数组），用以代替过滤器。

备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持使用过滤器。

data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

注意 ：在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不支持：

需修改为：

支持 Vue官方文档：计算属性 。

实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考： uni-app全局变量的几种实现方式 。

非H5端不支持在 template 内使用 methods 中的函数。

备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持支持在 template 内使用 methods 中的函数。

为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。

全支持 Vue官方文档：条件渲染 。

全支持vue列表渲染 Vue官方文档：列表渲染 。只是需要注意一点，嵌套列表渲染，必须指定不同的索引！需要填写 :key="xx" 。

注意 ：同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。

几乎全支持 Vue官方文档：事件处理器 。事件映射表如下所示：

注意 ：

(1)事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>。

(2)为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。

(3)事件修饰符

(4)若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

(5)按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。

支持 Vue官方文档：表单控件绑定 。建议开发过程中直接使用 uni-app：表单组件 。用法示例：

(1)H5 的select 标签用 picker 组件进行代替

(2)表单元素 radio 用 radio-group 组件进行代替

组件是整个 Vue.js 中最复杂的部分，支持 Vue官方文档：组件 。有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render ，和 <script type="text/x-template"> 字符串模版等非H5端都不支持。详细的非H5端不支持列表：

(1)暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name"></card>样式是不会生效的)。

Slot（scoped 暂时还没做支持）

(2)动态组件

(3)异步组件

(4)inline-template

(5)X-Templates

(6)keep-alive

(7)transition

(8)class

(9)style

(10)组件里使用 slot 嵌套的其他组件时不支持 v-for

uni-app提供了丰富的 UI组件 ，比如： picker , map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName" 。如:

uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。 注意 ：Vue.component 的第一个参数必须是静态的字符串。示例：

(1)main.js 里进行全局注册

(2)index.vue 里可直接使用组件

在 uni-app 中以下这些作为保留关键字，不可作为组件名。

备注 ：除以上列表中的名称外，标准的 HTML 及 SVG 标签名也不能作为组件名。

(1) 如何获取上个页面传递的数据

在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。

(2) 如何设置全局的数据和全局的方法

uni-app内置了 vuex ，在app里的使用，可参考 hello-uniapp 的 store/index.js 。

(3)如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

(4)组件属性设置不生效解决办法

当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。解决办法有两种（以scroll-view组件为例）：

备注 ：第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。

用 v-for 指令根据一组数组的选项列表进行渲染。

通过数组的索引获取数组的数据

这种写法在数据很多的时候或者数据发生更新的时候处理就会很繁琐,

因此我们可以使用v-for指令来循环数组

基本数组的循环

v-for 还支持一个可选的第二个参数为当前项的索引。

数组项为对象的循环

使用索引

同时我们也可以用 of 替代 in 作为分割符

语法

示例:

也可以用 v-for 指令来循环对象。

第一个参数是训练遍历对象的属性值:

第二个的参数为对象的属性(键名)：

还可以通过第三个参数来获取索引值：

使用 v-for 更新已渲染的元素列表时,默认用 就地复用 策略列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素我们在使用的使用经常会使用 index (即数组的下标)来作为 key ,但其实这是不推荐的一种使用方法

key值的使用其实是和vue响应式已经虚拟DOM有关, 那么我们通过下面的例子来了解一下

例子:

数据

页面渲染

但是数据发生了变化,

如果数据是这一种变化的话, 那么index没什么问题

数据前后变化的结果

这样vue就会分析到 其他的数据 都不需要改变,只需要在新增一个DOM节点,然后添加新增的数据就可以了

可以输入我们是在数组中间插入的数据就会不一样为了

这时数据的对比

通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染

是不是很惊奇,我明明只是插入了一条数据,怎么三条数据都要重新渲染?而我想要的只是新增的那一条数据新渲染出来就行了

最好的办法是使用数组中不会变化的那一项作为 key 值,对应到项目中,即每条数据都有一个唯一的 id ,来标识这条数据的唯一性使用 id 作为 key 值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染

此时数据的变化

现在对比发现只有一条数据变化了,就是 id 为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的

为什么需要key属性: 虚拟DOM的diff算法,

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

建议尽可能在使用 v-for 时提供 key ，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

v-if和v-for一起使用，v-for的优先级要高于v-if

可能会想到v-if和v-for是用的两种情况

那么接下来好好看看这两种情况

第一种情况: 为了过滤一个列表中的项目

为了过滤项目内容,我们可能会如下调用:

在这种情况下，请将 users 替换为一个计算属性（比如 activeUsers ），让其返回过滤后的列表。

示例详解:

如果现在只想显示价格在22元以上的水果,我们可能会这么写

这么写固然会得到你想要的效果, 但是因为v-for和v-if优先级的关系, 所以将会经过如下的运算

因此，哪怕我们只渲染出一小部分内容，也得在每次重新渲染的时候遍历整个列表，无论价格是否满足我们的条件

随意我们推荐使用计算属性, 在计算属性中处理过滤事宜, 计算属性会在计算完毕后缓存内容,提高遍历的效率

这样我们得到的结果是一样的,但是我们获得了如下的好处

第二种情况: 为了避免渲染本应该被隐藏的列表

也就是根据条件类判断列表的显示我们也后可能会使用下面的方法调用

实例详解:

原理是一样的, 就是如果这么写, 还是会循环遍历每一个数据,然后判断是不是显示. 一样浪费

所以我们将 v-if 移动到容器元素，这样我们就不用对每一个元素都进行判断是否显示, 取而代之的是，我们只检查判断一次，且不会在 isShow 为假的时候还循环运算 v-for。

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以使用计算属性和方法来过滤数据

我们上面讲过了计算属性,下面来看看方法的使用

总结示例:

---