快速上手小程序
阅读&764 收藏&0
领取地址：
推荐：[腾讯大家产品背景 《腾讯大家》是公司推出的中文互联网专栏写作服务产品。由于寻找有效信息的成本是非常大的，一些真正具有传播价值的内容，却往往淹没于信息洪流之中。如
心血来潮，突然想搞个小程序玩玩。微信提供了比较全面的支持，还可以上传托管服务器，又不收钱。对前端来说，这不是白送吗，快抓紧机会试试吧～
一、注册账号
一个小程序账号吧，我们要拿到 AppId 。
小程序注册的前提是，没有注册过任何的微公众平，如未注册过订阅号、服务号之类的。邮箱要求也是“未被公众平台注册，未被开放平台注册，未被个人微信号绑定的邮箱。
二、安装开发者工具
要开发微信小程序，开发者工具必不可少，快去
下载吧！打开微信开发者工具，创建项目的时候会用到我们上面拿到的 AppId 。
三、简易教程
走一遍，主要包含：
起步：告诉你怎么申请账号，如何使用开发者工具，以及编译预览。
代码构成： WXML ， WXSS 以及 JSON 配置。
小程序能力：告诉你页面如何启动，可以使用的组件，还有微信的一些 API 。
发布前准备：预览，上传以及版本管理。
上线：提交审核，发布产品，以及运营数据的监控等。
教程很简单，看一遍文档，基本都会了。
四、使用 WePY 框架
本来打算直接按照简易教程上手撸一把，结果意外发现了 WePY 这个框架，看完以后，我决定马上用起来。先来上一张
让小程序支持组件化开发的框架一个最受欢迎的小程序框架。
看完上面的图，为什么使用 WePY 框架的理由，不言自明了吧！下面，先来准备初始化代码吧：
首先，我们先来安装：
npm install wepy-cli -g
然后，在开发目录中生成 Demo 开发项目：
wepy new myproject
切换至项目目录：
cd myproject
开启实时编译：
wepy build --watch
脚手架生成出来的项目结构如下所示：
├── dist
微信开发者工具指定的目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules
├── src
代码编写的目录（该目录为使用WePY后的开发目录）
├── components
WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
├── com_a.wpy
可复用的WePY组件a
└── com_b.wpy
可复用的WePY组件b
├── pages
WePY页面目录（属于完整页面）
├── index.wpy
index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
└── other.wpy
other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
└── app.wpy
小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json
项目的package配置
注：dist 目录为 WePY 通过 build 指令生成的目录，除额外增加的 npm 目录外，其目录结构与原生小程序的目录结构类似。
五、WePY 代码组成
小程序入口 app.wpy ：
import wepy from 'wepy';
export default class extends wepy.app{
config = {
&pages/index/index&
&window&:{
&backgroundTextStyle&: &light&,
&navigationBarBackgroundColor&: &#fff&,
&navigationBarTitleText&: &WeChat&,
&navigationBarTextStyle&: &black&
onLaunch() {
console.log(this);
&style lang=&less&&
/** less **/
入口文件 app.wpy 中所声明的小程序实例继承自 wepy.app 类，包含一个 config 属性和其它全局属性、方法、事件。其中 config 属性对应原生的 app.json 文件， build 编译时会根据 config 属性自动生成 app.json 文件，如果需要修改 config 中的内容，请使用微信提供的相关 API 。
页面 page.wpy ：
import wepy from 'wepy';
import Counter from '../components/counter';
export default class Pageextends wepy.page{
config = {};
components = {counter1: Counter};
data = {};
methods = {};
events = {};
onLoad() {};
// Other properties
&template lang=&wxml&&
&counter1&&/counter1&
&/template&
&style lang=&less&&
/** less **/
页面文件 page.wpy 中所声明的页面实例继承自 wepy.page 类，该类的主要属性介绍如下：
config：页面配置对象，对应于原生的 page.json 文件，类似于 app.wpy 中的 config
components：页面组件列表对象，声明页面所引入的组件列表
data：页面渲染数据对象，存放可用于页面模板绑定的渲染数据
methods： wxml 事件处理函数对象，存放响应 wxml 中所捕获到的事件的函数，如 bindtap 、 bindchange
events： WePY 组件事件处理函数对象，存放响应组件之间通过 $broadcast 、 $emit 、 $invoke 所传递的事件的函数
其它：小程序页面生命周期函数，如onLoad、onReady等，以及其它自定义的方法与属性
组件 com.wpy ：
&templatelang=&wxml&&
&/template&
import wepy from 'wepy';
export default class Comextends wepy.component{
components = {};
data = {};
methods = {};
events = {};
// Other properties
&stylelang=&less&&
/** less **/
组件文件 com.wpy 中所声明的组件实例继承自 wepy.component 类，除了不需要 config 配置以及页面特有的一些生命周期函数之外，其属性与页面属性大致相同。
六、WePY 使用示例
通过前文的介绍可知，在 WePY 中，小程序被分为三个实例：小程序实例 App 、页面实例 Page 、组件实例 Component 。其中 Page 实例继承自 Component 。各自的声明方式如下： 推荐：[作为一枚前端，我想在我们的日常中，除了不断的积累各种语言框架外，我们更多的时候是给产品、业务提供切实、可行的解决方案，并最大程度上简化我们的后期维护工作。 本文
import wepy from 'wepy';
// 声明一个App小程序实例
export default class MyAPPextends wepy.app{
// 声明一个Page页面实例
export default class IndexPageextends wepy.page{
// 声明一个Component组件实例
export default class MyComponentextends wepy.component{
App 小程序实例中主要包含小程序生命周期函数、 config 配置对象、 globalData 全局数据对象，以及其他自定义方法与属性。
import wepy from 'wepy';
export default class MyAPPextends wepy.app{
customData = {};
customFunction ()　{ }
onLaunch () {}
onShow () {}
config = {}
// 对应 app.json 文件
globalData = {}
在 Page 页面实例中，可以通过 this.$parent 来访问 App 实例。
由于 Page 页面实际上继承自 Component 组件，即 Page 也是组件。除扩展了页面所特有的 config 配置以及特有的页面生命周期函数之外，其它属性和方法与 Component 一致，因此这里以 Page 页面为例进行介绍。
import wepy from 'wepy';
// export default class MyPage extends wepy.page {
export default class MyComponentextends wepy.component{
customData = {}
// 自定义数据
customFunction ()　{}
//自定义方法
onLoad () {}
// 在Page和Component共用的生命周期函数
onShow () {}
// 只在Page中存在的页面生命周期函数
config = {};
// 只在Page实例中存在的配置数据，对应于原生的page.json文件
data = {};
// 页面所需数据均需在这里声明，可用于模板数据绑定
components = {};
// 声明页面中所引用的组件，或声明组件中所引用的子组件
mixins = [];
// 声明页面所引用的Mixin实例
computed = {};
// 声明计算属性（详见后文介绍）
watch = {};
// 声明数据watcher（详见后文介绍）
methods = {};
// 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明
events = {};
// 声明组件之间的事件处理函数
注意，对于 WePY 中的 methods 属性，因为与 Vue 中的使用习惯不一致，非常容易造成误解，这里需要特别强调一下： WePY 中的 methods 属性只能声明页面 wxml 标签的 bind 、 catch 事件，不能声明自定义方法，这与 Vue 中的用法是不一致的。示例如下：
// 错误示例
import wepy from 'wepy';
export default class MyComponentextends wepy.component{
methods = {
bindtap () {
let rst = this.commonFunc();
// doSomething
bindinput () {
let rst = this.commonFunc();
// doSomething
//错误：普通自定义方法不能放在methods对象中
customFunction () {
return 'sth.';
// 正确示例
import wepy from 'wepy';
export default class MyComponentextends wepy.component{
methods = {
bindtap () {
let rst = this.commonFunc();
// doSomething
bindinput () {
let rst = this.commonFunc();
// doSomething
//正确：普通自定义方法在methods对象外声明，与methods平级
customFunction () {
return 'sth.';
七、WePY 框架的重要事项
使用微信开发者工具 –& 添加项目，项目目录请选择 dist 目录。
微信开发者工具 –& 项目 –& 关闭 ES6 转 ES5 。 重要：漏掉此项会运行报错。
微信开发者工具 –& 项目 –& 关闭上传代码时样式自动补全。 重要：某些情况下漏掉此项也会运行报错。
微信开发者工具 –& 项目 –& 关闭代码压缩上传。 重要：开启后，会导致真机 computed , props.sync 等等属性失效。（注：压缩功能可使用 WePY 提供的 build 指令代替，详见后文相关介绍以及 Demo 项目根目录中的 wepy.config.js 和 package.json 文件。）
本地项目根目录运行 wepy build --watch ，开启实时编译。（注：如果同时在微信开发者工具 –& 设置 –& 编辑器中勾选了文件保存时自动编译小程序，将可以实时预览，非常方便。）
友情提示，如果你采用了 WePY 框架，请一定按照提示做配置，否则错误可能很麻烦。
八、配置编辑器高亮
因为我使用了 VS Code ，可能的配置如下：
在 Code 里先安装 Vue 的语法高亮插件 Vetur 。
打开任意 .wpy 文件。
点击右下角的选择语言模式，默认为纯文本。
在弹出的窗口中选择 .wpy 的配置文件关联…。
在选择要与 .wpy 关联的语言模式中选择 Vue 。
更多的编辑器配置，请移步：
九、为小程序引入 UI 样式库
到这里，整体框架算是有了，但是我们还需要美颜啊。嗯，是时候引入 UI 样式库了！这里我们还是使用微信本家的产品
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含 button、cell、dialog、progress、toast、article、actionsheet、icon 等各式元素。
好了，下面说说怎么使用：
首先，需要下载
其次，将完整的样式包文件放入你的项目目录中；
最后，如果使用了 wepy 的话， weui 需要 less 文件；
使用 wepy ，样式文件一定是 less 后缀，否则可能会有 unexpected token “@import” 这样的异常。
完成上面步骤后，就可以开心的使用微信样式库了：
&viewclass=&page&&
&progresspercent=&20&show-info/&
十、页面跳转如何操作
使用惯了其他的框架，很可能你也像我一样，开始去找小程序的路由文件了。其实大可不必如此，这些事情小程序已经处理好了，你唯一需要知道的就是如何去用。丰富的
你都可以试试：
1.保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。
wx.navigateTo({
url: 'test?user=jartto'
2.关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
url: 'test?user=jartto'
3.关闭所有页面，打开到应用内的某个页面。
wx.reLaunch({
url: 'test?user=jartto'
4.跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
&tabBar&: {
&list&: [{
&pagePath&: &index&,
&text&: &首页&
&pagePath&: &other&,
&text&: &其他&
wx.switchTab({
url: '/index'
5.关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
十一、服务器域名配置
每个微信小程序需要事先设置一个通讯域名，小程序可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求（ request ）、上传文件（ uploadFile ）、下载文件（ downloadFile ) 和 WebSocket 通信（ connectSocket ），服务器域名请在 小程序后台-设置-开发设置-服务器域名 中进行配置，配置时需要注意：
服务器域名请在小程序后台-设置-开发设置-服务器域名 中进行配置，配置时需要注意：
域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议；
域名不能使用 IP 地址或 localhost，且不能带端口号；
域名必须经过 ICP 备案；
出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。开发者应将 appsecret 保存到后台服务器中，通过服务器使用 appsecret 获取 accesstoken，并调用相关 API。
对于每个接口，分别可以配置最多 20 个域名；
十二、获取用户输入
能够获取用户输入的组件，需要使用组件的属性 bindblur 将用户的输入内容同步到 AppService 。
&inputid=&myInput&bindblur=&bindBlur&/&
let inputContent = {}
inputContent: {}
bindBlur: function(e){
inputContent[e.currentTarget.id] = e.detail.
十三、总结
文章主要按照自己接触小程序的学习过程来展现，每个阶段我需要学习什么，以及我可能对哪些点比较关注。严格意义上来说，这并不是一篇入门教程，而更像是一个一步步开始小程序开发的教程。推荐：[在体验小程序开发之后，我上线了一个小应用 527菜谱 ，同时也发现了小程序开发中有各种注意要点，不然一定会踩坑，小程序开发官方文档里已经有很详细说明，这里我对文档中
请输入账号
请输入密码
&下次自动登录
第三方登录
请输入邮箱
请输入密码
请输入姓名或常用昵称
同意并接受
简短推荐语
为了正常使用评论、审核、关注等功能，请激活您的账号。
您的 Email：
激活邮件已发送，请注意查收（注意检查回收站、垃圾箱中是否有激活邮件）
如果仍未收到，请尝试
，如碰到困难请跨越高山，飞跃重洋，我们行走在技术之路上。欢迎投稿：
WePY 在小程序性能调优上做出的探究
导语性能调优是一个亘古不变的话题，无论是在传统 H5 上还是小程序中。因为实现机制不同，可能导致传统 H5 中的某些优化方式在小程序上并不适用。因此必须另开辟蹊径找出适合小程序的调估方式。本文旨在介绍两点在小程序开发过程当中碰到的一些性能问题以及 WePY 的一些优化方案。小程序组件化框架 WePY 介绍请阅读：预先加载原理传统 H5 中也可以通过预加载来提升用户体验，但在小程序中做到这一点实际上是可以更简单方便却又更容易被忽视的。传统 H5 在启动时，page1.html 只会加载 page1.html 的页面与逻辑代码，当 page1.html 跳转至 page2.html 时，page1 所有的 Javascript 数据将会从内存中消失。page1 与 page2 之间的数据通信只能通过 URL 参数传递或者浏览器的 cookie，localStorge 存储处理。小程序在启动时，会直接加载所有页面逻辑代码进内存，即便 page2 可能都不会被使用。在 page1 跳转至 page2 时，page1 的逻辑代码 Javascript 数据也不会从内存中消失。page2 甚至可以直接访问 page1 中的数据。最简单的验证方式就是在 page1 中加入一个 setInterval(function () {console.log('exist')}, 1000)。传统 H5 中跳转后定时器会自动消失，小程序中跳转后定时器仍然工作。小程序的这种机制差异正好可以更好的实现预加载。通常情况下，我们习惯将数据拉取写在 onLoad 事件中。但是小程序的 page1 跳转到 page2，到 page2 的 onLoad 是存在一个 300ms ~ 400ms 的延时的。如下图：因为小程序的特性，完全可以在 page1 中预先拿取数据，然后在 page2 中直接使用数据，这样就可以避开 redirecting 的 300ms ~ 400ms 了。如下图：试验在官方 demo 中加入两个页面：page1，page2
bindTap: function () {
wx.startTime = +new Date();
wx.navigateTo({
url: '../page2/page2'
fetchData: function (cb) {
setTimeout(function () {
cb({a:1});
onLoad: function () {
wx.endTime = +new Date();
this.fetchData(function () {
wx.endFetch = +new Date();
console.log('page1 redirect start -& page2 onload invoke -& fetch data complete: ' + (wx.endTime - wx.startTime) + 'ms - ' + (wx.endFetch - wx.endTime) + 'ms');
}重试 10 次，得到的结果如下：优化对于上述问题，WePY 中封装了两种概念去解决：预加载数据
用于 page1 主动传递数据给 page2，比如 page2 需要加载一份耗时很长的数据。我可以在 page1 闲时先加载好，进入 page2 时直接就可以使用。
预查询数据
用于避免于 redirecting 延时，在跳转时调用 page2 预查询。
扩展了生命周期，添加了 onPrefetch 事件，会在 redirect 之时被主动调用。同时给 onLoad 事件添加了一个参数，用于接收预加载或者是预查询的数据：
onLoad (params, data) {}预加载数据示例：
methods: {
this.$redirect('./page2');
onLoad () {
setTimeout(() =& {
this.$preload('list', api.getBigList())
onLoad (params, data) {
data.preload.list.then((list) =& render(list));
}预查询数据示例：
methods: {
this.$redirect('./page2');
onPrefetch () {
return api.getBigList();
onLoad (params, data) {
data.prefetch.then((list) =& render(list));
}数据绑定原理在针对数据绑定做优化时，需要先了解小程序的运行机制。因为视图层与逻辑层的完全分离，所以二者之间的通信全都依赖于 WeixinJSBridge 实现。如：开发者工具中是基于 window.postMessage
iOS 中基于 window.webkit.messageHandlers.invokeHandler.postMessage
Android 中基于WeixinJSCore.invokeHandler
因此数据绑定方法this.setData也如此，频繁的数据绑定就增加了通信的成本。再来看看this.setData究竟做了哪些事情。基于开发者工具的代码，单步调试大致还原出完整的流程，以下是还原后的代码：
function setData (obj) {
if (typeof(obj) !== 'Object') {
console.log('类型错误');
let type = 'appDataChange';
let e = [type, {
data: {data: list},
options: {timestamp: +new Date()}
var datalength = JSON.stringify(e.data).
if (datalength & AppserviceMaxDataSize) {
console.error('已经超过最大长度');
if (type === 'appDataChange' || type === 'pageInitData' || type === '__updateAppData') {
__wxAppData = {
'pages/page1/page1': alldata
e = { appData: __wxAppData, sdkName: "send_app_data" }
var postdata = JSON.parse(JSON.stringify(e));
window.postMessage({
eventName: type,
data: e[1],
webviewIds: [0],
sdkName: 'publish'
var postdata = JSON.parse(JSON.stringify(e));
window.postMessage({
}setData 运行的流程如下：从上面代码以及流程图中可以看出，在一次setData({a: 1})作时，会进行三次 JSON.stringify，二次JSON.parse以及两次window.postMessage操作。并且在第一次window.postMessage时，并不是单单只处理传递的{a:1}，而是处理当前页面的所有 data 数据。因此可想而知每次setData操作的开销是非常大的，只能通过减少数据量，以及减少setData操作来规避。与 setData 相近的是 React 的 setState 方法，同样是使用 setState 去更新视图的，可以通过源码 React:L199 看到 setState 的关键代码如下：function enqueueUpdate(component) {
ensureInjected();
if (!batchingStrategy.isBatchingUpdates) {
batchingStrategy.batchedUpdates(enqueueUpdate, component);
dirtyComponents.push(component);
}setState的工作流程如下：可以看出，setState 加入了一个缓冲列队，在同一执行流程中进行多次 setState 之后也不会重复渲染视图，这就是一种很好的优化方式。实验为了证实setData的性能问题，可以写简单的测试例子去测试：动态绑定 1000 条数据的列表进行性能测试，这里测试了三种情况：最优绑定：在内存中添加完毕后最后执行setData操作。
最差绑定：在添加一条记录执行一次setData操作。
最智能绑定：不管中间进行了什么操作，在运行结束时执行一次脏检查，对需要设置的数据进行setData操作。
参考代码如下：
&view bindtap="worse"&
class="user-motto"&worse 数据绑定测试&
bindtap="best"&
class="user-motto"&best 数据绑定测试&
bindtap="digest"&
class="user-motto"&digest 数据绑定测试&
class="list"&
wx:for="{{list}}" wx:for-index="index"wx:for-item="item"&
&{{item.id}}&---&{{item.name}}&
// page1.js
worse: function () {
var start = +new Date();
for (var i = 0; i++) {
this.data.list.push({id: i, name: Math.random()});
this.setData({list: this.data.list});
var end = +new Date();
console.log(end - start);
best: function () {
var start = +new Date();
for (var i = 0; i & 1000; i++) {
this.data.list.push({id: i, name: Math.random()});
this.setData({list: this.data.list});
var end = +new Date();
console.log(end - start);
digest: function () {
var start = +new Date();
for (var i = 0; i & 1000; i++) {
this.data.list.push({id: i, name: Math.random()});
var data = this.data;
var $data = this.$data;
var readyToSet = {};
for (k in data)
if (!util.$isEqual(data[k], $data[k])) {
readyToSet[k] = data[k];
$data[k] = util.$copy(data[k], true);
if (Object.keys(readyToSet).length) {
this.setData(readyToSet);
var end = +new Date();
console.log(end - start);
onLoad: function () {
this.$data = util.$copy(this.data, true);
}在经过十次刷新运行测试后得出以下结果：实现同样的逻辑，性能数据却相差 40 倍左右。由此可以看出，在开发过程中，一定要避免同一流程内多次 setData 操作。优化在开发时，避免在同一流程内多次使用setData当然是最佳实践。采取人工维护肯定是能够实现的，就好比能用原生 js 能写出比众多框架更高效的性能一样。但当页面逻辑负责起来之后，花很大的精力去维护都不一定能保证每个流程只存在一次setData，而且可维护性也不高。因此，WePY 选择使用脏检查去做数据绑定优化。用户不用再担心在我的流程里，数据被修改了多少次，只会在流程最后做一次脏检查，并且按需执行setData。脏检测机制借鉴自 AngularJS，多数人一听到脏检查都会觉得是低效率的一种作法，认为使用 Vue.js 中的 getter，setter 更高效。其实不然，两种机制都是对同一件事的不同实现方式。各有优劣，取决于使用的人在使用过程中是否正好放大了机制中的劣势面。WePY 中的 setData 就好比是一个 setter，在每次调用时都会去渲染视图。因此如果再封装一层 getter、setter 就完全没有意义，没有任何优化可言。这也就是为什么一个类 Vue.js 的小程序框架却选择了与之相反的另外一种数据绑定方式。再回来看脏检查的问题在哪里，从上面实验的代码可以看出，脏检查的性能问题在于每次进行脏检查时，需要遍历所以数据并且作值的深比较，性能取决于遍历以及比较数据的大小。WePY 中深比较是使用的 underscore 的 isEqual 方法。为了验证效率问题，使用不同的比较方法对一个 16.7 KB 的复杂 JSON 数据进行深比较，测试用例请看这里：deep-compare-test-case ()得到的结果如下：从结果来看，对于一个 16.7 KB 的数据深比较是完全不足以产生性能问题的。那 AngularJS 1.x 脏检查的性能问题是怎么出现的呢？AngularJS 1.x 中没有组件的概念，页面数据就位于 controller 的 $scope 当中。每一次脏检查都是从 $rootScope 开始，随后遍历至所有子 $scope。参考这里 angular.js:L1081。对于一个大型的单页应用来说，所有 $scope 中的数据可能达到了上百甚至上千个都有可能。那时，脏检查的每次遍历就可能真的会成为了性能的瓶颈了。反观 WePY，使用类似于 Vue.js 的组件化开发，在抛开父子组件双向绑定通信的情况下，组件的脏检查仅针对组件本身的数据进行，一个组件的数据通常不会太多，数据太多时可以细化组件划分的粒度。因此在这种情况下，脏检查并不会导致性能问题。其实，在很多情况下，框架封装的解决方案都不是性能优化的最优解决方案，使用原生肯定能优化出更快的代码。但它们之所以存在并且有价值，那都是因为它们是在性能、开发效率、可维护性上寻找到一个平衡点，这也是为什么 WePY 选择使用脏检查作为数据绑定的优化。其它优化除了以上两点是基于性能上做出的优化以外，WePY 也作出了一系列开发效率上的优化。因为在我之前的文章里都有详细说明，所以在这里就简单列举一下，不做深入探讨。详情可以参看 WePY 文档。组件化开发支持组件循环、嵌套，支持组件 Props 传值，组件事件通信等等。parent.wpy
&child :item.sync="myitem" /&
for="{{list}}" item="item" index="index"&
:item="item" /&
&支持丰富的编译器js 可以选择用 Babel 或者 TypeScript 编译。
wxml 可以选择使用 Pug(原 Jade)。
wxss 可以选择使用 Less、Sass、Styus。支持丰富的插件处理可以通过配置插件对生成的 js 进行压缩混淆，压缩图片，压缩 wxml 和 json 已节省空间等等。支持 ESLint 语法检查添加一行配置就可以支持 ESLint 语法检查，可以避免低级语法错误以及统一项目代码的风格。生命周期优化添加了 onRoute 的生命周期。用于页面跳转后触发。
因为并不存在一个页面跳转事件（onShow 事件可以用作页面跳转事件，但同时也存在负作用，比如按 HOME 键后切回来，或者拉起支付后取消，拉起分享后取消都会触发 onShow 事件）。支持 Mixin 混合可以灵活的进行不同组件之间的相同功能的复用。参考 Vue.js 官方文档： 混合优化事件，支持自定义事件bindtap=”tap” 简写为 @tap=”tap”，catchtap=”tap”简写为@tap.stop=”tap”。
对于组件还提供组件自定义事件&child @myevent.user="someevent" /&优化事件传参官方版本如下：&view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"& DataSet Test &/view&
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.target.dataset.alphabeta === 2 // 大写会转为小写
})优化后：&view @tap="bindViewTap("1", "2")"& DataSet Test &/view&
methods: {
bindViewTap(p1, p2, event) {
p1 === "1";
p2 === "2";
}结语小程序还存在很多值得开发者去探索优化的地方，欢迎大家与我探讨交流开发心得。若本文存在不准确的地方，欢迎批评指正。
本文为 公众号投稿，作者：龚澄，未经作者同意，请勿转载。
没有更多推荐了，