使用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循环中可以将下标直接传入方法中
<ul id="example-1">
<li v-for="(item, index) in items" @click="smFun(index)">
{{ item.message }}
</li>
</ul>而在wepy中是对于普通循环来说是基本沿用了小程序原生的模式,并且传值都要带上{{}}
<view wx:for="{{ items }}" @tap="smFun({{index}})">{{ item }}</view>
- 对于组价的渲染,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
使用wepy框架搭建微信小程序采坑记(一)的更多相关文章
- 部署wepy框架开发微信小程序
我用的是yarn,如果你使用的是npm,也可以 首先需要安装wepy命令行工具 npm install wepy-cli -g 然后在选定的位置使用脚手架工具创建wepy项目 wepy init st ...
- 微信小程序采坑(一)
1.微信小程序如何让text内容空格 <text decode="{{true}}" space="{{true}}"> </text> ...
- 微信小程序踩坑记
1:微信小程序之去掉横向滑动滚动条 /** 去除横向滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 2: ...
- 微信小程序采坑
wx.request() complete回调函数执行时机问题 代码执行顺序有时候会严重影响用户体验:比如项目中请求数据时显示loading的图标,请求完成后不管失败还是成功都要把loading图标隐 ...
- 微信小程序采坑之上拉触底加载更多和下拉刷新
小程序中加载更多数据一般都是触底刷新 有自带的函数: onReachBottom: function (){} 但是在使用时触发完全没有反应,后来尝试给外层加了一个高度,解决问题 仔细想想也是,没有设 ...
- 微信小程序采坑之scroll-view
当设置了scroll-y为true之后,纵向是没有问题的,会出现滚动条. Android上一切都是那么的祥和, ios上你会发现如果你scroll-view里面的东西超过横向的宽度时,就会隐藏了. 也 ...
- 微信小程序爬坑记
1.this.setData修改数组里的值1).data: { hide:[true,true] },this.setData({ 'hide[0]': false});2).var str = &q ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 基于mpvue的框架开发微信小程序(搭建环境)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_103 美团很早就开源了mpvue这个项目,如此看来,美团可不仅仅是一家团购网站,真正的技术驱动型企业,使得我们多了一种用来开发微信 ...
随机推荐
- SQL Server 数据分页查询
最近学习了一下SQL的分页查询,总结了以下几种方法. 首先建立了一个表,随意插入的一些测试数据,表结构和数据如下图: 现在假设我们要做的是每页5条数据,而现在我们要取第三页的数据.(数据太少,就每页5 ...
- 《mysql必知必会》读书笔记--游标的使用
游标的使用 MySQL中游标只能用于存储过程 创建游标 CREATE PROCEDURE processorders() BEGIN DECLARE ordernumbers CURSOR FOR S ...
- Java Hashtable详细介绍和使用示例
①对Hashtable有个整体认识 和HashMap一样,Hashtable 也是一个散列表,它存储的内容是键值对(key-value)映射.Hashtable 继承于Dictionary,实现了Ma ...
- 好的博客参考之Spring
https://blog.csdn.net/bao19901210/article/details/41724355
- react build 后打包发布总结
一,部署在apache web服务器上(wamp | xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决. 设置A ...
- ss+proxifier灵活控制网络代理
SS相比大家都知道,不多说. proxifier可能知道的不是很多(至少在今天之前我是不知道的...可能我孤陋寡闻吧) 之前用ss基本上就是chrome SwitchyOmega+SS实现chrome ...
- java.lang.NoSuchMethodError: net.sf.cglib.core.Signature
今天二次开发Dubbo-admin的管理平台,开启tomcat直接报错,错误关键字为“ java.lang.NoSuchMethodError: net.sf.cglib.core.Signature ...
- nginx之proxy、cache、upstream模块学习
nginx之proxy反向代理模块: location ^~ /proxy_path/ { root "/www/html"; 这里没必要配置 index index.html; ...
- MyBatis如何返回自增的ID
<insert id="insertTable" parameterType="com.infohold.city.map.model.CheckTemplateM ...
- jquery post 同步异步总结[转]
1.post被请求多次,解决方法: 连接加入随机数 rand=""+Math.random() $.post("/Control/webControl.ashx?rand ...