详解微信小程序框架wepy踩坑记录(与vue对比)


Posted in Javascript onMarch 12, 2019

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的版本,祝大家开发愉快,少踩些坑。

最后附上官方文档链接,供大家参考:

小程序官方文档
wepy官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
javascript中数组的常用算法深入分析
Mar 12 #Javascript
详解javascript 变量提升(Hoisting)
Mar 12 #Javascript
NestJs 静态目录配置详解
Mar 12 #Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 #Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 #Javascript
记录一次完整的react hooks实践
Mar 11 #Javascript
es6数值的扩展方法
Mar 11 #Javascript
You might like
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python中os和shutil模块实用方法集锦
2014/05/13 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python paramiko模块的使用示例
2018/04/11 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
大学活动邀请函
2014/01/28 职场文书
小学新教师培训方案
2014/02/03 职场文书
公司授权委托书范文
2014/09/21 职场文书
授权收款委托书
2014/09/23 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
解决 redis 无法远程连接
2022/05/15 Redis