浅谈原生小程序

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

1.声明data：用过vue的朋友都知道，vue中声明data时，data必须是函数，不然会报错，原生的小程序就不是这样，直接 data: { }就ok了。
2.绑定数据：绑定动态属性时需要在属性的双引号里使用 {{ }}
3.列表循环：使用wx:for，在循环题内有隐藏的item代表当前项，index代表下标

// 例子
<view class="tab-item" wx:for="{{tabs}}" wx:key="{{index}}">{{item.text}}</view>
// wx:for="{{}}" 一定要和 wx:key="{{}}" 一起使用，否则会报错；而且在赋值时要使用 {{}}，不然没效果。
// tabs 是data中声明的数据
data:{
  tabs: [
    {
      value: 1,
      text: '选项1'
    },
    {
      value: 2,
      text: '选项2'
    },
    {
      value: 3,
      text: '选项3'
    }
  ]
}

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.自定义组件

• 创建组件
  组件开发，在现今特别流行，低耦合，复用性高，后期的维护也很友好
  在根目录下的components文件夹里创建一个空的文件夹，在微信开发者工具里右键 - 新建component - 输入 index 生成json wxml wxss js4个文件
• 在页面上导入组件
  在导入的页面的配置文件json中配置 usingConponents:{ "自定义名称": "组件路径" }
• 自定义组件属性传递
  在自定义组件里通过 propertis 来接收的属性
• 自定义组件事件
  ** 首先，在调用组件标签通过bind:[事件名]=[事件处理函数]，绑定事件；然后，在自定义组件里通过 this.triggerEvent("传递过来的事件名") **
  自定义组件

---

更多关注小程序官方文档