微信小程序 - wxpage

Posted 2021-01-31 Sunsin

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文档，随即上手！