小程序计划 工具「 微信小程序计划 工具」

　　作者：龚澄--腾讯前端工程师

　　@IMWeb前端社区

　　导语

　　作为第一批小程序内测用户，我很有幸见证了小程序的发展 ，小程序上手非常 简单 ，轻易 明白 。但同时，由于 运行环境 的缘故起因 导致小程序无法利用 市面上的盛行 框架。小程序本身 提供一此特性如：模块化，模板，数据绑定等，能极大的方便了利用 惯MVVM框架的用户。

　　在几个月的开辟 进程 里，我不停 盼望 能有一套方案更大大概 的让小程序开辟 更贴近于当下开辟 风俗 ，因此才会有wepy。通过wepy开辟 的代码颠末 编译后，能天生 一份美满 运行在小程序端的代码，而且wepy的目标 就是让小程序开辟 更贴近于传统H5框架开辟 ，让小程序能像开辟 H5一样支持引入NPM包，支持组件化开辟 以及支持JS新特性等等。

　　小程序框架wepy文档 成品 DEMO展示

一个是利用 wepy new demo下令 天生 的标准 demo

一个是基于wepy开辟 的手机充值的完备 demo。

一个是基于wepy开辟 的开源的仿微信的谈天 界面

　　以上三个demo均在安卓机和IOS机上运行过通。

　　附上仿微信的谈天 界面DEMO下载地点

　　https://github.com/wepyjs/wepy-wechat-demo

快速入门 项目创建与利用

　　以下安装都通过npm安装

　　安装（更新） wepy 下令 行工具。

　　npm install wepy-cli -g

　　在开辟 目次 天生 开辟 DEMO。

　　wepy new myproject

　　切换至项目目次 。

　　cdmyproject

　　开辟 及时 编译。

　　wepy build --watch 项目目次 布局

　　开辟 利用 阐明

利用 微信开辟 者工具新建项目，本地 开辟 选择dist目次 。

微信开辟 者工具 -- 项目 -- 关闭ES6转ES5。

本地 项目根目次 运行wepy build --watch，开启及时 编译。

Sublime下代码高亮

　　文件后缀为.wpy，可共用vue高亮，但必要 手动安装。

打开Sublime-Preferences-Browse Packages..进入用户包文件夹。

在此文件夹下打开cmd，运行git clone git@github.com:vuejs/vue-syntax-highlight.git，无GIT用户可以直接下载zip包解压至当前文件夹。

关闭.wpy文件重新打开即可高亮。

WebStorm下代码高亮

打开Preferences，搜刮 Plugins，搜刮 Vue.js插件并安装。

打开Preferences，搜刮 File Types，找到Vue.js Template，在Registered Patterns添加*.wpy，即可高亮。

代码规范：

变量与方法利用 只管 利用 驼峰式定名 ，克制 利用 $开头。 以$开头的方法大概 属性为框架内建方法大概 属性，可以被利用 ，利用 前请参考API文档。

入口，页面，组件的定名 后缀为.wpy。外链的文件可以是别的 后缀。 请参考wpy文件阐明

利用 ES6语法开辟 。 框架在ES6下开辟 ，因此也必要 利用 ES6开辟 小程序，ES6中有大量的语法糖可以让我们的代码更加简便 高效。

利用 Promise： 框架默认对小程序提供的API全都举行 了 Promise 处理 惩罚 ，乃至 可以直接利用 async/await等新特性举行 开辟 。

变乱 绑定语法利用 优化语法代替 ： 原bindtap="click"更换 为@tap="click"，原catchtap="click"更换 为@tap.stop="click"。更多@符用法，拜见 组件自界说 变乱 。

变乱 传参利用 优化后语法代替 ： 原bindtap="click" data-index={{index}}更换 为@tap="click({{index}})"。

自界说 组件定名 应避开微信原生组件以及功能标签repeat。 不可以利用 input, button, view, repeat等定名 自界说 组件。更多repeat用法，拜见 循环列表组件引用。

重要 办理 题目 ： 1. 开辟 模式转换

　　在原有的小程序的开辟 模式下举行 再次封装，更贴近于现有MVVM框架开辟 模式。框架在开辟 过程中参考了一些如今 框架的一些特性，而且 融入此中 ，以下是利用 wepy前后的代码对比图。

　　官方DEMO代码：

　　基于wepy的实现：

　　2. 支持组件化开辟 。

　　拜见 章节：组件示例代

　　3. 支持加载外部NPM包。

　　在编译过程当中，会递归遍历代码中的require然后将对应依靠 文件从node_modules当中拷贝出来，而且 修改require为相对路径，从而实现对外部NPM包的支持。如下图：

　　4. 单文件模式，使得目次 布局 更加清楚 。

　　官方目次 布局 要求app必须有三个文件app.json，app.js，app.wxss，页面有4个文件 index.json，index.js，index.wxml，index.wxss。而且文件必须同名。 以是 利用 wepy开辟 前后开辟 目次 对比如 下：

　　官方DEMO：

　　利用 wepy框架后目次 布局 ：

　　5. 默认利用 babel编译，支持ES6/7的一些新特性。

　　用户可以通过修改wepy.config.js(老版本利用 .wepyrc)设置 文件，设置 本身 认识 的babel环境 举行 开辟 。默认开启利用 了一些新的特性如promise，async/await等等。

　　示例代码：

　　6. 针对原生API举行 优化。

　　对如今 API举行 promise处理 惩罚 ，同时修复一些现有API的缺陷，比如 ：wx.request并发题目 等。 原有代码：

　　基于wepy实当代 码：

　　在同时并发10个request哀求 测试时：

　　不利用 wepy:

　　利用 wepy后：

　　进阶阐明 wepy.config.js 设置 文件阐明

　　实行 wepy new demo后，会天生 雷同 设置 文件。

　　**wpyExt：**缺省值为'.wpy'，IDE默认环境 下不会对此文件范例 高亮，此时可以修改全部 文件为.vue后缀(由于 与vue高亮规则一样)，然后将此选项修改为.vue，就能办理 部分 IDE代码高亮题目 。

　　compilers：compilers为1.3.1版本之后的功能，假如 必要 利用 别的 语法，请先设置 compilers，然后再安装相应的compilers。如今 支持wepy-compiler-less，wepy-compiler-sass，wepy-compiler-babel，wepy-compiler-pug。连续 开辟 ... 对应compiler请参考各自文档

　　plugins：plugins为1.1.6版本之后功能，如今 支持js压缩与图片压缩，wepy-plugin-ugliyjs，wepy-plugin-imagemin。连续 开辟 ...

　　关于compilers和plugins

　　1.3.1版本新功能，文档建立 中...

　　wpy文件阐明

　　wpy文件的编译过程过下：

　　一个.wpy文件分为三个部分 ：

样式style/style对应原有wxss。

模板template/template对应原有wxml。

代码/对应原有js。

　　此中 入口文件app.wpy不必要 template，以是 编译时会被忽略。这三个标签都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效 时，忽略内联代码，示比方 下：

　　标签对应 lang 值如下表所示：

　　阐明 程序入口app.wpy

　　入口app.wpy继承 自wepy.app，包罗 一个config属性和其全局属性、方法、变乱 。此中 config属性对应原有的app.json，编译时会根据config天生 app.json文件，假如 必要 修改config中的内容，请利用 体系 提供API。

　　页面index.wpy

　　页面入口继承 自wepy.page，重要 属性阐明 如下：

　　组件com.wpy

　　页面入口继承 自wepy.component，属性与页面属性一样，除了不必要 config以及页面特有的一些小程序变乱 等等。

　　组件

　　小程序支持js模块化，但相互 独立，业务代码与交互变乱 仍需在页面处理 惩罚 。无法实现组件化的松耦合与复用的结果 。 比方 模板A中绑定一个bindtap="myclick"，模板B中同样绑定一样bindtap="myclick"，那么就会影响同一个页面变乱 。对于数据同样云云 。因此只有通过改变变量大概 变乱 方法，大概 给其加差别 前缀才华 实现绑定差别 变乱 大概 差别 数据。当页面复杂之后就非常 倒霉 于开辟 维护。 因此wepy让小程序支持组件化开辟 ，组件的全部 业务与功能在组件本身 实现，组件与组件之间相互 隔离，上述例子在wepy的组件化开辟 过程中，A组件只会影响到A绑定的myclick，B也云云 。

　　wepy编译组件的过程如下：

　　平凡 组件引用

　　当页面大概 组件必要 引入子组件时，必要 在页面大概 中的components给组件分配唯一id，而且 在template中添加component标签。如：

　　循环列表组件引用

　　1.4.6新增

　　当想在wx:for中利用 组件时，必要 利用 辅助标签repeat，如下：

　　页面和组件都可以引入子组件，引入多少 组件后，如下图：

　　Index页面引入A，B，C三个组件，同时组件A和B又有本身 的子组件D，E，F，G，H。

　　Props 传值

　　静态传值

　　利用 静态传值时，子组件会吸取 到字符串的值。

　　动态传值

　　利用 :prop（等价于v-bind:prop），代表动态传值，子组件会吸取 父组件的数据。

　　组件通讯 与交互

　　wepy.component基类提供三个方法$broadcast，$emit，$invoke，因此任一页面或任一组件都可以调用上述三种方法实现通讯 与交互，如：

　　$this. $emit( 'some-event', 1, 2, 3, 4);

　　组件的变乱 监听必要 写在events属性下，如：

　　$broadcast$broadcast变乱 是由父组件发起，全部 子组件都会收到此广播变乱 ，除非变乱 被手动取消。变乱 广播的次序 为广度优先搜刮 次序 ，如上图，假如 Page_Index发起一个$broadcast变乱 ，那么吸取 到变乱 的先后次序 为：A, B, C, D, E, F, G, H。如下图：

　　$emit$emit与$broadcast恰好 相反，变乱 发起组件的父组件会依次吸取 到$emit变乱 ，如上图，假如 E发起一个$emit变乱 ，那么吸取 到变乱 的先后次序 为：A, Page_Index。如下图：

　　$invoke$invoke是一个组件对另一个组件的直接调用，通过传入的组件路径找到相应组件，然后再调用其方法。 假如 想在Page_Index中调用组件A的某个方法：

　　this. $invoke( 'ComA', 'someMethod', 'someArgs');

　　假如 想在组件A中调用组件G的某个方法：

　　this. $invoke( './../ComB/ComG', 'someMethod', 'someArgs'); 组件自界说 变乱

　　1.4.8新增

　　可以利用 @customEvent.user绑定用户自界说 组件变乱 。

　　此中 ，@表现 变乱 修饰符，customEvent 表现 变乱 名称，.user表现 变乱 后缀。

　　如今 有三种后缀：

.default: 绑定小程序冒泡变乱 变乱 ，如bindtap。

.stop: 绑定小程序非冒泡变乱 ，如catchtap。

.user: 绑定用户自界说 组件变乱 ，通过$emit触发。

　　示比方 下：

　　组件内容分发slot

　　可以利用 slot元素作为组件内容插槽，在利用 组件时，可以随意举行 组件内容分发，参看以下示例：

　　在Panel组件中有以下模板：

　　在父组件利用 Pannel组件时，可以如许 利用 ：

　　第三方组件

　　wepyjs 答应 利用 基于wepyjs开辟 的第三方组件，开辟 第三方组件规范请参考wepy-com-toast。

　　肴杂

　　肴杂 可以将组之间的可复用部分 抽离，从而在组件中利用 混适时 ，可以将肴杂 的数据，变乱 以及方法注入到组件之中。肴杂 分分为两种：

默认式肴杂

兼容式肴杂

　　默认式肴杂

　　对于组件data数据，components组件，events变乱 以及别的 自界说 方法采取 默认式肴杂 ，即假如 组件未声明该数据，组件，变乱 ，自界说 方法等，那么将肴杂 对象中的选项将注入组件这中。对于组件已声明的选项将不受影响。

　　兼容式肴杂

　　对于组件methods相应 变乱 ，以及小程序页面变乱 将采取 兼容式肴杂 ，即先相应 组件本身 相应 变乱 ，然后再相应 肴杂 对象中相应 变乱 。

　　拦截器

　　可以利用 全域拦截器设置 API的config、fail、success、complete方法，参考示例：

　　数据绑定 小程序数据绑定方式

　　小程序通过Page提供的setData方法去绑定命 据，如：

　　this. setData({title :'this is title'});

　　由于 小程序架构本身 缘故起因 ，页面渲染层和JS逻辑层分开的，setData操纵 实际 就是JS逻辑层与页面渲染层之间的通讯 ，那么假如 在同一次运行周期内多次实行 setData操纵 时，那么通讯 的次数是一次还是 多次呢？这个取决于API本身 的计划 。

　　wepy数据绑定方式

　　wepy利用 脏数据查抄 对setData举行 封装，在函数运行周期竣事 时实行 脏数据查抄 ，一来可以不消 关心页面多次setData是否会有性能上的题目 ，二来可以更加简便 去修改数据实现绑定，不消 重复去写setData方法。代码如下：

　　this. title='this is title';

　　但需留意 ，在函数运行周期之外的函数里去修改数据必要 手动调用$apply方法。如：

　　setTimeout(() ={ this. title='this is title'; this. $apply();}, 3000); wepy脏数据查抄 流程

　　在实行 脏数据查抄 是，会通过this.$$phase标识当前查抄 状态，而且 会包管 在并发的流程当中，只会有一个脏数据查抄 流程在运行，以下是实行 脏数据查抄 的流程图：

　　别的 优化细节 1. wx.request 吸取 参数修改

　　2. 优化变乱 参数转达

　　3. 改变数据绑定方式

　　保存 setData方法，但不发起 利用 setData实行 绑定，修复传入undefined的bug，而且 修改入参支持： this.setData(target, value) this.setData(object)

　　4. 组件代替 模板和模块

　　API wepy.event

　　wepy.component

　　wepy.page

　　wepy.app

　　假如 您以为 有所劳绩 ，就请转发该文到朋侪 圈和小搭档 一起分享吧~

　　腾讯IMWeb前端社区

　　免费大咖直播课

　　定期优质干货文章推送