使用wepy框架搭建微信小程序采坑记（一）

1.什么是wepy

这个框架是腾讯内部出的一个类MVVM的小程序开发框架。大体上来说语法是类VUE的，所以如果有VUE开发经验的话迁移成本会低一些。至于具体的怎么使用我就不赘言了，有问题查文档（官方文档）

2.为什么会出现wepy

我虽然还没有在实际项目中完整开发过一个APP，但自己看着文档敲着DEMO再道听途说一下也都知道，小程序是有很多限制的，小项目可能觉得无所谓，可业务稍微复杂一点，写起来和维护起来都是非常蛋疼的。主要表现在以下几个方面：

• 组件化支持能力太弱(几乎没有)
• 不能使用 less、jade 等
• 无法使用 NPM 包及 ES 高级语法
• request 并发次数限制
  而wepy的出现基本上弥补上了这些问题，并且wepy的的开发模式更贴近于现有的MVVM框架开发模式，不过虽然大部分模式参考了现有的MVVM类框架，尤其是VUE，但也还是有不少不同的地方，所以记录一下遇到的坑

3.使用感受(遇到的坑)

3.1 语法问题

• 因为wepy是支持ES6/ES7的一些特性的，而且官方DEMO中都是采用的最新的语法，所以最好对ES6的语法有些了解，包括async/awit等

3.2 和VUE的比较

• 咋一看wepy也是组件化开发的，.wpy的组件和.vue的文件是很类似的，但还是存在很多语法上的却别的。例如在VUE的for循环中可以将下标直接传入方法中

  <ul id="example-1">
    <li v-for="(item, index) in items" @click="smFun(index)">
      {{ item.message }}
    </li>
  </ul>
  
  

  而在wepy中是对于普通循环来说是基本沿用了小程序原生的模式，并且传值都要带上{{}}

  <view wx:for="{{ items }}" @tap="smFun({{index}})">{{ item }}</view>
  

• 对于组价的渲染，wepy必须通过一个新增的标签：，而vue仍然可以使用v-for
• 对于样式类名的渲染，语法也不一样，在wepy中固定类名和动态类名是混合在一起的：

  <view class="tab {{ isTrue ? 'active' : '' }}"></view>
  

  而在vue中是分开写的：

  <div class="tab" :class="{'active': isTrue}"></div>
  

• 当然这二者之间还有很多不同的地方，这里就不一一列举了，总体来说还是觉得vue写法更加方便一些，大体上来说wepy在语法上只是对原生小程序的语法做了一次再封装而已

3.3 wepy组件之传值的那些坑

wepy组件之间传值大体上是沿用的vue的模式，尤其是vue1.0版本之前的模式，基本上来说父子组件之间通信就是子组件用props接收参数，然后子组件用$emit传递给父组件。值得一提的是wepy新增了一个$invoke方法用于组件之间通信。

• 首先有个问题需要明确的就是wepy框架自带了wepy.component，wepy.page等几个基类，之后我们自己写的那些个组件或者page都是继承自这几个基类，不能定义错了，因为他们各自带的方法不一样,例如在一个组件中这样写是无论如何都拿不到父组件传递过来的参数的,因为wepy.page这个基类中就不存在props这个属性。

export default class Com extends wepy.page {
    props = {
        xxx: String
    }
    
    onload () {
        console.log(xxx)    
    }

}

• 然后一个很简单也很容易被忽略的一点，就是引用组件之后及时的注册。因为wepy本身的错误反馈机制并没有vue那么完善，所以有的时候报的错根本就不明确，还是要养成良好的编程习惯来避免一些低级错误。
• 还有一点就是在props传值过程中父级要动态传值给子级，一定要加上.sync修饰符，这样就相当于达到了一个从父级到子级的单向数据绑定

// parent.wpy

<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
    parentTitle: 'p-title'
};


// child.wpy

props = {
    // 静态传值
    title: String,

    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },

    twoWayTitle: {
        type: Number,
        default: 'nothing',
        twoWay: true
    }
};

onLoad () {
    console.log(this.title); // p-title
    console.log(this.syncTitle); // p-title
    console.log(this.twoWayTitle); // p-title

    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 'two-way-title';
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
    this.$parent.parentTitle = 'p-title-changed';
    this.$parent.$apply();
    console.log(this.title); // 'c-title';
    console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}

4.后记

说实话，我也是最近入职了新公司才开始接触wepy这个框架，目前答题使用了两周左右了，记录一些工作中遇到的坑，留着以后查阅，有相同经历的小伙伴也可以参考一下或者提出更好的解决方案。之后遇到新的坑会继续整理更新的……

参考文章：

• wepy官方文档：https://tencent.github.io/wepy/document.html#
• 像VUE一样写微信小程序-深入研究wepy框架：https://zhuanlan.zhihu.com/p/28700207