标签：项目 bind 加载 methods 运行 blank bcd 设置 tac
WXPAGE
开源地址如下：https://github.com/tvfe/wxpage
极快的小程序打开 - 势必是用户体验的重中之重
#页面描述
A:代表全局App.js
var wxpage = require(‘./lib/wxpage‘)
wxpage.A({
config: {
route: [‘test/pages/$page‘, ‘/pages/$page‘],
resolvePath: function(name) {
return ‘/pages/‘ + name;
}
},
onLaunch: function(opts) {
wxpage.on(‘some_message‘, function(msg) {
})
},
onAwake: function(time) {
},
onShow: function() {
}
})
C:代表组件
Component.C({
data: {},
created: function() {
this.$id = 1
// console.log(‘[Component/Header] created‘, this.properties, this.is)
},
attached: function() {
// console.log(‘[Component/Header] attached‘, this.properties, this.is, this.$root)
},
ready: function() {
// 调用父组件方法
this.$call(‘callFromComponent‘, ‘header‘)
// console.log(‘[Component/Header] ready‘, this.properties, this.is)
},
methods: {
callFromComponent: function (from) {
// console.log(‘!!! call from:‘, from)
}
}
})
P:代表页面
var P = require(‘../lib/wxpage‘)
P(‘index‘, {
data: {
},
onPageLaunch: function() {
},
onAppLaunch: function(opts) {
},
onLoad: function() {
this.$preload(‘play?cid=456‘);
this.$setData({
name: ‘LLLLLL‘
})
this.$cache.set(‘cache‘, {
name: ‘wxpage‘
})
this.$session.set(‘session‘, {
name: ‘wxpage‘
})
setTimeout(function() {
P.emit(‘some_message‘, ‘I am index!‘)
}, 100)
},
onReady: function() {
},
onPlay: function() {
this.$route(‘play?cid=123‘)
},
onPlayNav: function() {
wx.navigateTo({
url: ‘/pages/play?cid=abcd‘
})
},
onShow: function() {
},
onAwake: function(t) {
},
onClickBefore: function(e) {
},
onClickAfter: function(e) {},
onTouchend: function(e) {},
onTTap: function() {},
callFromComponent: function(name) {
}
})
我们只需要分析出它们（微信小程序原生和Wxpage）的不同之处即可
#生命周期
#生命周期
##onPageLaunch()
小程序第一次运行的时候调用，此时对应的页面并未被加载
##onAwake(time<Number>)
小程序进入后台模式后再激活的时候触发。time是耗时
##onAppLaunch(opts)
App.onLaunch 触发时调用。
opts:
path String 打开小程序的路径
query Object 打开小程序的query
scene Number 打开小程序的场景值
##onAppShow(opts)
App.onShow 触发时调用。
opts:
path String 打开小程序的路径
query Object 打开小程序的query
scene Number 打开小程序的场景值
##onPreload(res)
调用 this.$preload(url) 的时候触发，此时对应的页面并未被加载
##onNavigate(res)
页面间跳转开始时调用，此时对应的页面并未被加载
#事件描述
#事件描述
##$name
获取当前页面名称
##state
页面的一些状态集合(是否搜狐个被小程序启动的页面)
##session(页面级缓存)
this.$session.set(‘page_session_data‘, {
name: ‘首页‘
})
##缓存cache
this.$cache.set
可以设置同步或异步以及缓存时间
##$emitter
##$route
wx.navigatorTo
##$redirect
wx.redirectTo
##$switch
wx.switchTab
##$launch
wx.reLaunch
##$back
wx.navigateBack
##$preload
提前加载页面
##$bindRoute
点击代理方法，绑定 $onRoute 逻辑，在元素上声明 data-url 作为跳转地址，支持切面方法：
###data-before:跳转前执行
###data-after:跳转后执行
```<button
bindtap="$bindRoute"
data-url="/pages/play"
data-before="onClickBefore"
>click redirect</button>
```
##$bindRedirect()
###data-before:跳转前执行
###data-after:跳转后执行
同 $bindRoute, 绑定 $onRedirect
##$bindSwitch()
###data-before:跳转前执行
###data-after:跳转后执行
同 $bindRoute, 绑定 $onSwitch
#$on(key, handler)
监听跨页面间的消息
#$emit(key, data)
派发页面间的消息
#$off(key, handler)
取消监听消息
#$put(id, value)
指定 id 存在一份数据，可以为任何类型，以供其它逻辑获取使用
#$take(id)
根据 id 获取数据，数据只能被存在一次，获取一次。如果只存放一次，第二次获取 会得到 null 。
在使用之前，大家可以先github拉取一个test下来，运行，看看它与小程序有何不同之处进行比较
在熟悉之后，可以写一个开发似的模板，以便其调用
框架来自“腾讯视频”小程序的项目沉淀，我建议大家可以先看完github文档，随即上手！
标签：项目 bind 加载 methods 运行 blank bcd 设置 tac
原文地址：https://www.cnblogs.com/cisum/p/10200230.html
