使用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这个项目,如此看来,美团可不仅仅是一家团购网站,真正的技术驱动型企业,使得我们多了一种用来开发微信 ...
随机推荐
- 145. Binary Tree Postorder Traversal(二叉树后序遍历)
Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...
- NIO 02 (转)
本文转自:http://weixiaolu.iteye.com/blog/1479656 SelectionKey.OP_ACCEPT // 服务端监听,并注册OP_ACCEPT事件后,就已准备好接受 ...
- python 内建函数isinstance的用法以及与type的区别
isinstance是Python中的一个内建函数 语法: isinstance(object, classinfo) 如果参数object是classinfo的实例,或者object是class ...
- 使用ThinkPHP5连接数据库
1.在application的database.php中设置数据库信息. return [ // 数据库类型 'type' => 'mysql', // 服务器地址 'hostname' =&g ...
- 20145324 《Java程序设计》第10周学习总结
20145324 <Java程序设计>第10周学习总结 教材学习内容总结 1.网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据传输 2.在实际传输数据以前需要将域名转换为IP地 ...
- linux目录结构及文件权限
安装banner用到的指令: 第一步: sudo apt-get update 第二步: sudo apt-get install sysvbanner 成功了 创建新用户指令: sudo addus ...
- 【转载】Eclipse 任务栏锁定问题
刚装上 Eclipse 将快捷方式拖 Win7 任务栏上了,可是打开后发现会另开一个图标并且点右键也没有锁定到任务栏的选项,很是不爽,MyEclipse 也是这样,解决方法如下. 在Eclipse目录 ...
- ISSCC 2017论文导读 Session 14 Deep Learning Processors,A 2.9TOPS/W Deep Convolutional Neural Network SOC
最近ISSCC2017大会刚刚举行,看了关于Deep Learning处理器的Session 14,有一些不错的东西,在这里记录一下. A 2.9TOPS/W Deep Convolutional N ...
- ubuntu16.04下安装mysql详细步骤
1.如果要搭建服务器先去购买一个云主机,比如阿里云.京东云.新网等等都有卖.这里推荐使用京东云服务器,因为最近在搞活动.一元可体验两个月(可能现在活动已经过了,但在京东云里有免费领一个月的,学生机也有 ...
- windchill10.0&11.0API_chm版百度云
windchill10.0版本和11.0版本的javadoc,也就是api 文件内容 windchill10.0.chm版本的 windchill10.0api.chm版本 百度云链接(免费推荐) 链 ...