wepy笔记之原生小程序、vue、wepy之间的差异记录

在使用 wepy 之前，大概的阅读一下文档，并且梳理清楚 wepy 与 原生小程序 、 vue 之间的差别，有利于后后续的 wepy 开发，避免踩坑。

规范方面

1. 变量与方法尽量使用驼峰式命名，并且注意避免使用$开头。（因为框架内部用了，避免混淆）
2. 使用ES6开发，框架内部是用的ES6，并且ES6有很多好处，所以推荐。
3. 使用Promise。 框架默认对小程序提供的API全都进行了 Promise 处理，甚至可以直接使用async/await等新特性进行开发。
4. 事件绑定语法改了，类似 vue （nice啊！再也不用写傻X的原生写法了）
   • bindtap="click" 替换为 @tap="click"
   • catchtap="click" 替换为 @tap.stop="click"
   • bindtap="click" data-index={{index}} 替换为 @tap="click({{index}})" 。

语法方面

• wepy 大量借鉴了 vue 的语法，所以大部分 vue 中的操作，都可以在 wepy 中使用。
• 对于动态赋值的属性可以使用 :attr="value" 的方式
• .wpy 文件中的 script 、 template 、 style 这三个标签都支持 lang 和 src 属性， lang 决定了其代码编译过程， src 决定是否外联代码，存在 src 属性且有效时，会忽略内联代码。例如：

  <style lang="less" src="page1.less"></style>
      <template lang="wxml" src="page1.wxml"></template>
      <script>
      // some code
  </script>   
  复制代码

组件循环渲染的差异

在 wepy 中，组件的循环渲染需要使用辅助标签 <repeat> （个人觉得和原生中的 <block> 标签作用类似）。栗子：

<repeat for="{{list}}" key="index" index="index" item="item">
        <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
        <child :item="item"></child>
    </repeat>
复制代码

比较有意思的是，这里的 for 、 key 、 item 、 index 全部不需要加 wx: 前缀了，写起来会方便很对，个人觉得加前缀的做法很傻，是我写原生小程序的时候最烦的地方之一了。

与 vue 中 methods 的差异

WePY 中的 methods 属性只能声明页面wxml标签的 bind 、 catch 事件，不能声明自定义方法，这与 Vue 中的用法是不一致的。在 wepy 中，用户的自定义方法应该与 methods 同级。正确写法如下：

methods = {
      bindtap () {
          let rst = this.commonFunc();
          // doSomething
      },
   }
  
    //正确：普通自定义方法在methods对象外声明，与methods平级
    customFunction () {
      return 'sth.';
    }
复制代码

默认使用 babel 编译，支持ES6/ES7的一些新特性

• 用户可以通过修改wepy.config.js(老版本使用.wepyrc)配置文件，配置自己熟悉的babel环境进行开发。默认开启使用了一些新的特性如promise、async/await（自WePY 1.4.1开始必须手动开启）等等。

使用promise封装了原生的api

原生的各种回调真的让人很头疼，但是现在可以写出下面的操作了

async onLoad() {
    await wepy.login();
    this.userInfo = await wepy.getUserInfo();
}
复制代码

数据绑定机制

wepy 的数据绑定机制和 vue 类似， 当函数运行周期结束时执行脏数据检查 ，然后自动更新到渲染层。注意措辞，是在函数运行周期结束的时候，才做检测更新的操作。所以我们在异步操作的时候，需要手动的调用一下 this.$apply 方法，来触发检查更新机制。例子：

setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000);
复制代码