微信小程序框架wepy踩坑记录（与vue对比）

wepy框架借鉴了vue的语法风格和功能特性，可是在使用过程当中仍是发现与vue有很大的不一样。如今总结一下本身开发中遇到的问题，共你们参考一下。若是第一次用wepy开发，强烈建议仔细阅读一下这篇文章，必定对你有帮助，会帮你节约不少宝贵的时间。开发过程当中也建议你们时不时的回来阅读一次，巩固增强记忆。

• wepy中的组件

组件里面的坑还不是通常的多！
首先来讲说组件间的数据共享。在vue中你也能作到这一点，只要把 data 写成一个对象就能够了，固然你不想让全部的子组件都共享同一份数据，vue中的解决方案是给 data 写成一个函数就行了，return出来全部的数据，这样组件间的数据就不会共享了。
可是wepy中不能。文档中介绍：WePY中的组件都是静态组件，是以组件ID做为惟一标识的，每个ID都对应一个组件实例，当页面引入两个相同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另一个也会一块儿变化。
因此若是同一个页面引用多个组件，你只能给每一个组件定义不一样的ID，相似这样

import Child from '../components/child';

    export default class Index extends wepy.page {
        components = {
            //为两个相同组件的不一样实例分配不一样的组件ID，从而避免数据同步变化的问题
            child: Child,
            anotherchild: Child
        };
    }

看起来是否是很蠢。可是没办法，你只能这么用。
若是页面中只引用两三个同类型组件还好，可是若是我是一个循环，我也不知道我要引用多少组件，该怎么办？
接下来再说说组件的循环。
wepy官方文档中说明：当须要循环渲染WePY组件时(相似于经过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签<repeat>。可是不支持在 repeat 的组件中去使用 props, computed, watch 等等特性。什么？props 都不让用？？那父组件如何给子组件传参？？
后来实践发现，若是 props 中的数据在 template 中是能取到的，可是在 method 或者event 中就取不到了，你说神不神奇！
因此最后的解决办法是用的 wepy-redux，相似vuex，放在 store 中实现的。

• 视图的渲染之异步数据

异步数据的获取后须要手动调用 this.$apply() 方法才能从新渲染视图，这一点也必定要记得。刚开始作的时候是在页面 data 中写的假数据，渲染的好好的。可是数据换成从接口读取后，死活视图出不来。琢磨了半天才想起来须要手动调用 this.$apply()。而 vue 是不须要这么作的。

• 方法定义

wepy中页面中的事件须要些在 methods 中，组件之间的处理函数须要写在 events 中，而本身写的自定义方法须要写在与 methods 同级中。不像vue，能够写在 methods 里。在 events 中写的函数，不须要在调用子组件的时候写在子组件中，子组件 $emit 会自动去 events 中寻找同名方法执行。这点也与vue不一样。

• 事件传参

wepy优化了原生小程序在事件中的传参形式。好比页面中有一个方法，叫 getIndex，目的是取一个循环的 index 属性，在原生中须要额外定义一个 data-index 属性，而后在 getIndex 中经过event.currentTarget.dataset.index 来获取。而wepy中能够直接在事件里传递，但须要加上{{}}，写成 getIndex({{index}})这样，这点也与vue不一样。

• 数据绑定

这个是小程序原生方法中的很差点，wepy不能帮忙背这个锅。数据绑定也是使用 {{}}，可是{{}} 里面只能进行简单的运算，具体支持哪些运算能够看官方文档。需求是一个列表，选中的变个样式，正常的思路就是选中的时候触发一个方法，将 index 赋值给 currentActive，在 {{}} 中判断若是 currentActive == index 就应用 active 样式，命名很简单的一个需求。可是写好了就是很差使，找了半天也没发现哪错了，最后看文档，原来是根本就不支持这种写法！！只支持简单的运算，这种不属于简单的范围！！最后的解决办法是弄了一个数组 arr，选中将对应位置置为 true，在 {{}} 判断 arr[index] 是否为 true 解决了这个问题。总结一句话：{{}} 一点也不强大。

• 动态绑定class

wepy中须要遵循小程序原生的绑定方式，与vue中也不一样。在vue中，动态的和非动态的须要分别写，相似这样：<div class="class-a" :class="{true ? 'class-b': 'class-c'}"></div>。可是在wepy中，动态和非动态的能够写在一块儿，相似这样：<view class="class-a {{true ? 'class-b' : 'class-c'}}">

• mixin混合

wepy中的 mixin 分为两种。对于组件data数据，compontents 组件，events 事件及其余自定义方法采用默认式混合，即若是组件中未定义这些东西，那么 mixin 中的将生效，若是组件中已经定义了，将以组件中定义的为主，mixin 中定义的不会生效。但对于 methods 事件及小程序页面事件，将采用兼容式混合，只要定义了就都会生效。可是先响应组件中定义的，再响应 mixin 中定义的。而vue组件中 methods 里的事件若是与 mixin 中的重名，会采用组件中的事件。而生命周期的钩子函数则是先响应 mixin 中的，在响应组件中的。

• wxs是个好东西

wxs是小程序的一套脚本语言。结合wxml，能够构建出页面的结构。对于那些props在methods中不能用的状况，或者稍微复杂一些的语句，通通能够写在wxs中。可是它有本身的语法，总体上js的方法都能用，但也须要注意一些。

能够在一个页面中单独定义好所须要的函数，用import引入，在class中定义一下，相似引入组件的方式。而后就能够在template中愉快的使用了。具体文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

wxs文件内容

module.exports = {
  getClassName : function(item){
      retrun item.className
  }
}

组件内容

<template>
  <view>{{ wxs.getClassName(item) }}</view>
</template>

import wxs from './wxs/wxs.wxs'

export default class demo extends Wepy.component {
  data = {}
  wxs = {
   wxs : wxs
  }
}

注：以上问题均是采用wepy1.7.2的版本，祝你们开发愉快，少踩些坑。

最后附上官方文档连接，供你们参考：
小程序官方文档
wepy官方文档