微信小程序框架wepy踩坑记录(与vue对比)
栏目: JavaScript · 发布时间: 5年前
内容简介:wepy框架借鉴了vue的语法风格和功能特性,但是在使用过程中还是发现与vue有很大的不同。现在总结一下自己开发中遇到的问题,共大家参考一下。如果第一次用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的版本,祝大家开发愉快,少踩些坑。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 商城框架对比初稿
- 2019 前端框架对比及评测
- 2019 前端框架对比及评测
- vue,angular,react框架对比
- 深度解析Python深度学习框架的对比
- 【译】Kubernetes Serverless 框架的全面对比
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据结构算法与应用
塞尼 / 机械工业出版社 / 1999-3 / 49.00元
数据结构、算法与应用—C++语言描述(英文版),ISBN:9787111070177,作者:(美)塞尼 著一起来看看 《数据结构算法与应用》 这本书的介绍吧!