作者:龚澄--腾讯前端工程师
@IMWeb前端社区
作为第一批小程序内测用户,我很有幸见证了小程序的成长,小程序上手十分简单,容易理解。但同时,因为运行环境的原因导致小程序无法使用市面上的流行框架。小程序本身提供一此特性如:模块化,模板,数据绑定等,能极大的方便了使用惯MVVM框架的用户。
在几个月的开发历程里,我一直希望能有一套方案更大可能的让小程序开发更贴近于当下开发习惯,因此才会有wepy
。通过wepy
开发的代码经过编译后,能生成一份完美运行在小程序端的代码,而且wepy
的目的就是让小程序开发更贴近于传统H5框架开发,让小程序能像开发H5一样支持引入NPM包,支持组件化开发以及支持JS新特性等等。
wepy new demo
命令生成的标准demo以上三个demo均在安卓机和IOS机上运行过通。
附上仿微信的聊天界面DEMO下载地址 https://github.com/wepyjs/wepy-wechat-demo
以下安装都通过npm
安装
安装(更新) wepy 命令行工具。
npm install wepy-cli -g
在开发目录生成开发DEMO。
wepy new myproject
切换至项目目录。
cd myproject
开发实时编译。
wepy build --watch
微信开发者工具
新建项目,本地开发选择dist
目录。微信开发者工具
--> 项目 --> 关闭ES6转ES5。wepy build --watch
,开启实时编译。文件后缀为.wpy
,可共用vue
高亮,但需要手动安装。
Sublime->Preferences->Browse Packages..
进入用户包文件夹。git clone git@github.com:vuejs/vue-syntax-highlight.git
,无GIT用户可以直接下载zip包解压至当前文件夹。.wpy
文件重新打开即可高亮。Preferences
,搜索Plugins
,搜索Vue.js
插件并安装。Preferences
,搜索File Types
,找到Vue.js Template
,在Registered Patterns
添加*.wpy
,即可高亮。$
开头。 以$
开头的方法或者属性为框架内建方法或者属性,可以被使用,使用前请参考API文档。.wpy
。外链的文件可以是其它后缀。 请参考wpy文件说明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
用法,参见循环列表组件引用。在原有的小程序的开发模式下进行再次封装,更贴近于现有MVVM框架开发模式。框架在开发过程中参考了一些现在框架的一些特性,并且融入其中,以下是使用wepy前后的代码对比图。
官方DEMO代码:
基于wepy的实现:
参见章节:组件示例代
在编译过程当中,会递归遍历代码中的require
然后将对应依赖文件从node_modules当中拷贝出来,并且修改require
为相对路径,从而实现对外部NPM包的支持。如下图:
官方目录结构要求app必须有三个文件app.json
,app.js
,app.wxss
,页面有4个文件 index.json
,index.js
,index.wxml
,index.wxss
。而且文件必须同名。 所以使用wepy开发前后开发目录对比如下:
官方DEMO:
使用wepy框架后目录结构:
用户可以通过修改wepy.config.js
(老版本使用.wepyrc
)配置文件,配置自己熟悉的babel环境进行开发。默认开启使用了一些新的特性如promise
,async/await
等等。
示例代码:
对现在API进行promise处理,同时修复一些现有API的缺陷,比如:wx.request并发问题等。 原有代码:
基于wepy实现代码:
在同时并发10个request请求测试时:
不使用wepy:
使用wepy后:
执行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
。持续开发...
1.3.1版本新功能,文档建设中...
wpy文件说明
wpy
文件的编译过程过下:
一个.wpy
文件分为三个部分:
<style></style>
对应原有wxss
。<template></template>
对应原有wxml
。<script></script>
对应原有js
。其中入口文件app.wpy
不需要template
,所以编译时会被忽略。这三个标签都支持lang
和src
属性,lang
决定了其代码编译过程,src
决定是否外联代码,存在src
属性且有效时,忽略内联代码,示例如下:
标签对应 lang
值如下表所示:
入口app.wpy
继承自wepy.app
,包含一个config
属性和其全局属性、方法、事件。其中config
属性对应原有的app.json
,编译时会根据config
生成app.json
文件,如果需要修改config
中的内容,请使用系统提供API。
页面index.wpy
页面入口继承自wepy.page
,主要属性说明如下:
页面入口继承自wepy.component
,属性与页面属性一样,除了不需要config
以及页面特有的一些小程序事件等等。
组件
小程序支持js模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。 例如模板A中绑定一个bindtap="myclick"
,模板B中同样绑定一样bindtap="myclick"
,那么就会影响同一个页面事件。对于数据同样如此。因此只有通过改变变量或者事件方法,或者给其加不同前缀才能实现绑定不同事件或者不同数据。当页面复杂之后就十分不利于开发维护。 因此wepy让小程序支持组件化开发,组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离,上述例子在wepy的组件化开发过程中,A组件只会影响到A绑定的myclick
,B也如此。
wepy编译组件的过程如下:
当页面或者组件需要引入子组件时,需要在页面或者script
中的components
给组件分配唯一id,并且在template
中添加<component>
标签。如:
1.4.6新增
当想在wx:for
中使用组件时,需要使用辅助标签<repeat>
,如下:
页面和组件都可以引入子组件,引入若干组件后,如下图:
Index页面引入A,B,C三个组件,同时组件A和B又有自己的子组件D,E,F,G,H。
静态传值
使用静态传值时,子组件会接收到字符串的值。
动态传值
使用: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>
元素作为组件内容插槽,在使用组件时,可以随意进行组件内容分发,参看以下示例:
在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使用脏数据检查对setData进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次setData是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写setData方法。代码如下:
this.title = 'this is title';
但需注意,在函数运行周期之外的函数里去修改数据需要手动调用$apply
方法。如:
setTimeout(() => { this.title = 'this is title'; this.$apply();
}, 3000);
在执行脏数据检查是,会通过this.$$phase
标识当前检查状态,并且会保证在并发的流程当中,只会有一个脏数据检查流程在运行,以下是执行脏数据检查的流程图:
3. 改变数据绑定方式
保留setData方法,但不建议使用setData执行绑定,修复传入undefined
的bug,并且修改入参支持: this.setData(target, value)
this.setData(object)
腾讯IMWeb前端社区
免费大咖直播课
定期优质干货文章推送