使用

将dist/wxpage.js 放置到你的项目目录下，例如: "lib/wxpage.js"。使用DEMO

var P = require('./wxpage')var A = require('./wxpage').Avar C = require('./wxpage').C

使用 CLI 初始化项目：

npm install wxpage-cli -g

wxpage init

程序

❖ A/定义

示例：

var A = require('./wxpage').AA({
	config: {
		route: '/pages/$page'   // $page 会被替换成页面名
	},	onLaunch: function () {

	},	onShow: function () {

	}
})

❖ A/扩展的生命周期

• onAwake(time<Number>)

小程序进入后台模式后再激活的时候触发。time是耗时。

❖ A/扩展的配置(config)

• route 必需

页面目录的路由地址，$page会被替换为页面名

• extendPageBefore(name, def, modules) 可选

  自定义扩展页面，在框架执行扩展之前。

• extendPageAfter(name, def, modules) 可选

  自定义扩展页面，在框架执行扩展之后。

组件

❖ C/定义

示例：

<template name="comp">
	<button>It is component: {{name}}</button>
</template>

var C = require('./wxpage').CC('comp', function (vm) {	return {
		data: {/*...*/},		onLoad: function () {			// do something
			vm.$set({
				name: 'comp'
			})
		}
	}
})

❖ C/使用组件

模板:

<import src="/path/to/comp.wxml"></import>

<template is="item" data="{{...comp}}"/>

Page:

var P = require('./wxpage')P({
	comps: [require('/path/to/comp')]
})

❖ C/扩展的生命周期

同页面的生命周期

❖ C/VM实例方法

• $set({...})

  同 this.setData({...})，但只对当前组件数据生效

   vm.$set({
   	title: 'This is component'
   })

• $data()

  获取当前组件的 data 对象

页面

❖ P/定义

示例：

var P = require('./wxpage')P('index', {
	data: {/*...*/},	onLaunch: function () {

	},	onLoad: function () {		// do something
	}
})

❖ P/扩展的生命周期

• onPageLaunch()

  小程序第一次运行的时候调用，此时对应的页面并未被加载。

• onAppLaunch(opts)

  App.onLaunch 触发时调用。 opts:

• path String 打开小程序的路径

• query Object 打开小程序的query

• scene Number 打开小程序的场景值

• onAppLaunch(opts)

  App.onShow 触发时调用。 opts:

• path String 打开小程序的路径

• query Object 打开小程序的query

• scene Number 打开小程序的场景值

• onAwake(time<Number>)

  小程序进入后台模式后再激活的时候触发。time是耗时。

• onPreload(res)

  调用 this.$preload(url) 的时候触发，此时对应的页面并未被加载，res:

   {
   	url: '', //完整的来源url
   	query: {} //url上解析出来的查询参数
   }

• onNavigate(res)

  页面间跳转开始时调用，此时对应的页面并未被加载，res:

   {
   	url: '', //完整的来源url
   	query: {} //url上解析出来的查询参数
   }

❖ P/实例属性

• $name

  当前页面名称

• $state

  页面的一些状态集合，有以下字段：

• firstOpen <Boolean> 是否首个被小程序启动的页面

• $cache

  本地缓存的封装, 方法如下：

• set(key, value[, expire][, cb]) 如果传 cb 参数，会使用异步模式并回调

• get(key[, cb]) 如果传 cb 参数，会使用异步模式并回调

• $session

  使用本地缓存实现的session, 小程序退出后session会消息，适用于大数据对象的临时存储 方法如下：

• set(key, value[, cb]) 如果传 cb 参数，会使用异步模式并回调

• get(key[, cb]) 如果传 cb 参数，会使用异步模式并回调

• $emitter

  页面内的消息模块，作用于当前页面实例与及引用的子组件实例，方法：

• on 监听

• emit 派发

• off 取消监听

❖ P/实例方法

• $setData([prefix<String>, ]obj)

  指定 prefix 的时候可以为data的每一个项添加访问路径前缀。不传相当于 setData(obj)

• $curPage()

  获取当前页面实例。取 getCurrentPages 的最后一个项。

• $route(pagename[, config]) => 别名 $navigate

  wx.navigateTo的封装。跳转到指定页面，pagename 可以带上 queryString, 例如

   this.$route('play?vid=xxx&cid=xxx')

• $redirect(pagename[, config])

  wx.redirectTo的封装。跳转到指定页面, 替换页面，不产生历史，pagename 可以带上 queryString, 例如

   this.$redirect('play?vid=xxx&cid=xxx')

• $switch(pagename[, config])

  wx.switchTab的封装。

• $launch(pagename[, config])

  wx.reLaunch的封装。

• $back([delta])

  wx.navigateBack的封装。

   this.$back()

• $preload(pagename)

  提前预加载指定页面（会触发对应页面的onPreload声明周期）

   this.$preload('play?vid=xxx&cid=xxx')

• $bindRoute()

  点击代理方法，绑定 $onRoute 逻辑，在元素上声明 data-url 作为跳转地址，支持切面方法：

  示例：

   <button
   	bindtap="$bindRoute"
   	data-url="/pages/play"
   	data-before="onClickBefore"
   >click redirect</button>

• data-before 跳转前执行

• data-after 跳转后执行

• $bindRedirect()

  同 $bindRoute, 绑定 $onRedirect

• $bindSwitch()

  同 $bindRoute, 绑定 $onSwitch

• $on(key, handler)

  监听跨页面间的消息

• $emit(key, data)

  派发页面间的消息。

• $off(key, handler)

  取消监听消息

• $put(id, value)

  指定 id 存在一份数据，可以为任何类型，以供其它逻辑获取使用

• $take(id)

  根据 id 获取数据，数据只能被存在一次，获取一次。如果只存放一次，第二次获取 会得到 null 。

  示例：

   this.$put('play:prefetch', new Promise(function (resolve, reject) { 	wx.request(url, function (err, data) { 		resolve(data)
   	})
   })) this.$take('play:prefetch').then(function (data) { 	// get data
   }) this.$take('play:prefetch') // => null