__ ____ __ __ _ _ _
( \/\/ )(____)( \/ )( )( \_/ )
) ( )__) ) ( ( ) ) _ (
(__/\__)(____)( /\/\ )(_)(_/ \_)
小程序wemix框架使用指南
使用前阅读
- 当前版本为最新的v2.0(不兼容v1.0)。v1.0是为公司早期小程序项目所使用,如果是新构建项目建议使用v2.0版本。了解v1.0可访问https://github.com/hisanshao/wemix-cli/tree/v1
- v2.0版本的小程序基础库从1.6.3开始支持。
项目创建
安装wemix工具
npm install wemix-cli -g
进入开发目录生成空项目并开启实时编译
cd xxx
wemix new projectName
cd projectName
wemix build -w //开发
wemix build -p --no-cache //线上
wemix mkpage `path` //path不带/可以自动在pages目录内生成
wemix mkcomponent `path` //path不带/可以自动在components目录内生成
wemix mkbehavior `path` //path不带/可以自动在behaviors目录内生成
目录结构
|-- dist 微信开发者工具指定的目录
|-- node_modules
|-- src 开发目录
| |-- pages 页面文件夹(文件夹名不允许改动)
| | |-- index.js
| | |-- index.html
| | |-- index.less
| |-- components 页面依赖的组件文件夹(文件夹名不允许改动)
| | |-- index.js
| | |-- index.html
| | |-- index.less
| |-- behaviors 组件间代码共享的特性mixins(文件夹名不允许改动)
| | |-- index.js
| |-- app.js
| |-- app.less
|-- package-lock.json
|-- package.json
⚠️注:命名为pages,components,behaviors的文件夹请勿更改
重要
微信开发者工具设置
- 本地开发选择
dist
目录 - 详情-->项目设置-->取消勾选ES6转ES5
- 详情-->项目设置-->取消勾选上传代码时样式自动补全
- 详情-->项目设置-->取消勾选上传代码时自动压缩
使用wemix的优点
在原有的小程序的开发模式下进行再次封装:
- App实例增加onPageShow生命周期,监听页面变化。
- App实例增加onPageHide生命周期,监听页面变化。
- App实例增加onLog事件捕获器,监听点击事件。
- Page实例增加onRoute生命周期避免onShow方法多次执行。
- 支持加载外部NPM包。
- 支持less编译。
- 针对wx.request并发问题进行优化。
- @iconfont: '//at.alicdn.com/t/xxx.css';可自动引入iconfont
- page和component实例添加this.emit({listenCurrentRoute: false, listenerName: 'triggerListener'}, ...args)
component 内样式无法直接使用app.less内的样式所以建议 单独新建一个iconfont.less文件存放@iconfont: '//at.alicdn.com/t/xxx.css';其它文件引用该文件@import 'iconfont.less'
listenCurrentRoute false 则会遍历路由栈内所有页面及组件 listenCurrentRoute true 只会遍历当前路由的页面及组件
实战说明
关于编译及插件
- 当前仅支持less编译
- babel使用的preset为babel-preset-env,配置为:
{
"presets": [
["env", {
"debug": false,
"targets": {
"chrome": "53",
"ios": "8",
"browsers": ["Chrome >= 53", "ChromeAndroid >= 53", "iOS >= 8"]
}
}]
],
"plugins": [
[
"transform-runtime", {
"helpers": false,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}
],
["transform-object-rest-spread"]
]
}
- 线上构建的时候指定以下插件进行压缩:
uglify-js
imagemin
pretty-data
cssnano
WEMIX额外封装的一些事件
-
wemix.bridge 封装了小程序的方法,以及添加了
wemix.bridge.compareVersion(v1, v2) 比较版本号
wemix.bridge.refresh() 刷新当前页面
wemix.bridge.add(a, b) 用来得到精确的加法结果
wemix.bridge.sub(a, b) 用来得到精确的减法结果
wemix.bridge.mul(a, b) 用来得到精确的乘法结果
wemix.bridge.div(a, b) 用来得到精确的除法结果
-
wemix.route 保存了小程序的路由
wemix.route.current.page
wemix.route.current.search
wemix.route.previous.page 上一个路由栈信息
wemix.route.previous.search 上一个路由栈信息
-
wemix.config 所有的json配置文件
-
wemix.global 全局数据的缓存存储
wemix.global.sysInfo 默认存储了getSystemInfoSync的数据
-
wemix.getStackRoutes() 获取当前路由栈的所有路由;禁止在onLaunch方法内使用
禁止使用getApp()方法,使用wemix.instance.app代替
禁止使用getCurrentPages()方法,使用wemix.instance.pages[wemix.getStackRoutes()[index]]代替
实例
App实例
import wemix from 'wemix' /** * 类名不要使用App字段 */export default class Main extends wemix.app { onLaunch (options) { } onShow (options) { } onHide () { } onError (msg) { } onPageShow () { } onPageHide (tp) { } // 在点击事件(bindtap, catchtap bindsubmit等)元素中定义以data-wemixlog开头的属性 data-wemixlog-click-area='a_b_c_d' // 接收data-wemixlog数据对象 data = {clickArea: 'a_b_c_d'} onLog (type, e, data) { } onPageNotFound () { }} Main.config = { pages: [ 'pages/index' ], window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#FFFFFF', navigationBarTitleText: 'WEMIX', navigationBarTextStyle: 'black' }}
Page实例
import wemix from 'wemix' /** * 类名不要使用Page字段 */export default class Index extends wemix.page { onLoad (options) { } onReady () { } onShow () { } onHide () { } onUnload () { } onPullDownRefresh () { } onReachBottom () { } onShareAppMessage () { } onPageScroll () { } onTabItemTap () { }} Index.data = {} Index.config = { navigationBarTitleText: 'WEMIX', usingComponents: {}}
Component实例
import wemix from 'wemix' /** * 类名不要使用Component字段 */export default class Index extends wemix.component { onPageShow () { } onPageHide () { } created () { } attached () { } ready () { } moved () { } detached () { }}Index.config = { component: true, usingComponents: {}} Index.data = {} Index.properties = {}// behaviors的引入和原生小程序有区别,直接填路径即可// 引入方式为['/behaviors/a', '/behaviors/a/b',...]Index.behaviors = [] Index.methods = {}
Behaviors
export default { behaviors: [], properties: {}, data: {}, attached () { }, methods: {}}