微信小程序 - wxpage

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 。