使用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循环中能够将下标直接传入方法中
  ```
  

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

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

  <view wx:for="{{ items }}" @tap="smFun({{index}})">{{ item }}
  ```
• 对于组价的渲染，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