微信小程序 - wxpage - JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 。