README
WXPage
WXPage 是一个极其轻量的微信小程序开发框架,其中的API蕴含了“极致页面打开速度的思想”,为可维护性与开发效率而设计的功能,框架起源于“腾讯视频”小程序。
目录
使用
将dist/wxpage.js 放置到你的项目目录下,例如: "lib/wxpage.js"。使用DEMO
var wxpage = require('./wxpage')
使用 CLI
初始化项目:
npm install wxpage-cli -g
wxpage init
类方法
const wxpage = require('/path/to/wxpage.js');
wxpage.A(def<
Object
>)程序定义方法:
App.A({ });
wxpage(def<
Object
>)页面定义方法:
Page.P({ });
wxpage.C(def<
Object
>)组件定义方法:
Component.C({ });
wxpage.on(key<
String
>, handler<Function
>)监听APP与页面间的消息
wxpage.emit(key<
String
>, message<任意
>)监听APP与页面间的消息
wxpage.off(key<
String
>, handler<Function
>)取消监听APP与页面间的消息
程序
在小程序的入口文件 app.js
里定义
程序-定义
示例:
const { A } = require('./wxpage')
A({
config: {
route: '/pages/$page' // $page 会被替换成页面名
},
onLaunch: function () {
},
onShow: function () {
}
});
程序-生命周期
onAwake(time
<Number>
)小程序进入后台模式后再激活的时候触发。
time
是耗时。
程序-配置
wxpage
所扩展的配置
A({
config: {
/*所有微信wxpage所需的配置*/
}
});
route
必需
页面目录的路由地址,
$page
会被替换为页面名。
route 支持数组,为多项路由的时候,必须搭配
resolvePath
使用,否则默认采用第一项作为路径还原。
routeFrozenTime
可选
限制两次路由跳转的时间间隔,默认为
1000
,可为0
resolvePath(name
<String>
)可选
A({ config: { route: ['/page/$page', '/pages/$page'], resolvePath: function (name) { return `/page/${name}` } } });
extendPageBefore(name, def, modules)
可选
自定义扩展页面,在框架执行扩展之前。
extendPageAfter(name, def, modules)
可选
自定义扩展页面,在框架执行扩展之后。
extendComponentBefore(def)
可选
自定义扩展组件,在框架执行扩展之前。例如为每个组件挂在一个实例方法:
A({ config: { extendComponentBefore: function (def, { fns }) { fns.wrapFun(def.created, function () { this.request = function () { // ... } }) } } });
组件
基于小程序原生组件方案的扩展,提供了父-子组件间的关系引用,一些实用的实例方法等
组件-定义
- 构造方法、配置声明
{COMPONENT}.js
Component.C({
data: {},
attached: function () {
/**
* this.$root
* this.$parent
*/
}
});
{COMPONENT}.json
{
"component": true
}
- 使用
{PAGE}.json
{
"usingComponents": {
"{COMPONENT}": "/comps/{COMPONENT}/{COMPONENT}"
}
}
{PAGE}.wxml
<custom-component binding="