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);
复制代码

个人觉得这个描述，还是不够清楚，所以网上查了一下，需要$apply的场景如下：

• 异步更新数据的时候
• 手动刷新dom的时候

其他

• 支持加载外部NPM包（原生也支持了，所以没啥亮点）
• wx.request的并发不存在限制了（原生也支持了）
• wpyExt中配置的.wpy可以改成功.vue，这样文件的后缀就会变成.vue，编辑器的支持度会更好