使用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这个项目,如此看来,美团可不仅仅是一家团购网站,真正的技术驱动型企业,使得我们多了一种用来开发微信 ...
随机推荐
- redis安全设置
1. 设置监听ip为本地和内网ip bind 127.0.0.1 192.168.1.99 ## 可以是多个ip,用空格分割 2. 设置监听端口 port 16379 3. 设置密码 在配置文件中加入 ...
- 照着官网来安装openstack pike之environment设置
安装openstack前的准备环境: 两个centos7系统的环境:192.168.101.10 node1,192.168.101.11 node2 控制节点node1,计算节点node2 1.统一 ...
- 20145216史婧瑶《Java程序设计》第四次实验报告
实验四 Android环境搭建 实验内容 搭建Android环境 运行Android 修改代码,能输出学号 实验步骤 1.搭建Android环境 2.安装Android,核心是配置JDK.SDK 3. ...
- 20145109 实验四 Andoid开发基础
安装Android 打开 默认程序中有helloworld 按下下图红框中的键: 遇到问题: 方法:修改build.gradle
- Spring笔记(二)
1. SPRING aop入门 Aop 面向切面编程 在一个大型的系统中,会写很多的业务类--业务方法 同时,一个大型的系统中,还有很多公共的功能:比如事务管理.日志处理.缓存处理..... 1.1 ...
- c#结构体和字节流之间的相互转换
结构体转byte数组 1 首先要明白 ,是 在那个命名空间下 System.Runtime.InteropServices; 2 首先得到结构体的大小 2 开辟相应的内存空间 3 将结构体填 ...
- 爬虫之动态HTML处理(Selenium与PhantomJS )动态页面模拟点击
动态页面模拟点击 #!/usr/bin/env python # -*- coding:utf-8 -*- # python的测试模块 import unittest from selenium im ...
- 爬虫之urllib2库的基本使用
urllib2库的基本使用 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地. 在Python中有很多库可以用来抓取网页,我们先学习urllib2. urllib2 是 P ...
- mysql索引的建立和使用
转自[http://www.cnblogs.com/mywebname/articles/555696.html] 一.索引的概念 索引就是加快检索表中数据的方法.数据库的索引类似于书籍 ...
- 第九篇:Spark SQL 源码分析之 In-Memory Columnar Storage源码分析之 cache table
/** Spark SQL源码分析系列文章*/ Spark SQL 可以将数据缓存到内存中,我们可以见到的通过调用cache table tableName即可将一张表缓存到内存中,来极大的提高查询效 ...