微信小程序框架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?中的，在响应组件中的。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!