用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-4-7 01:20:13 天下雪原创达人 造轮子 人生巅峰 楼主 15166
其中的API蕴含了“极致页面打开速度的思想”,为可维护性与开发效率而设计的功能,框架来自“腾讯视频”小程序的项目沉淀。
使用

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

[AppleScript] 纯文本查看 复制代码
var P = require('./wxpage')
var A = require('./wxpage').A
var C = require('./wxpage').C

使用 CLI 初始化项目:

[AppleScript] 纯文本查看 复制代码
npm install wxpage-cli -g

wxpage init

程序❖ A/定义

示例:

[AppleScript] 纯文本查看 复制代码
var A = require('./wxpage').A
A({
        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/定义

示例:

[AppleScript] 纯文本查看 复制代码
<template name="comp">
        <button>It is component: {{name}}</button>
</template>

[AppleScript] 纯文本查看 复制代码
var C = require('./wxpage').C
C('comp', function (vm) {
        return {
                data: {/*...*/},
                onLoad: function () {
                        // do something
                        vm.$set({
                                name: 'comp'
                        })
                }
        }
})

❖ C/使用组件

模板:

[AppleScript] 纯文本查看 复制代码
<import src="/path/to/comp.wxml"></import>

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

Page:

[AppleScript] 纯文本查看 复制代码
var P = require('./wxpage')
P({
        comps: [require('/path/to/comp')]
})

❖ C/扩展的生命周期

同页面的生命周期

❖ C/VM实例方法
  • $set({...})
    同 this.setData({...}),但只对当前组件数据生效
    [AppleScript] 纯文本查看 复制代码
     vm.$set({
             title: 'This is component'
     })
  • $data()
    获取当前组件的 data 对象

页面❖ P/定义

示例:

[AppleScript] 纯文本查看 复制代码
var P = require('./wxpage')
P('index', {
        data: {/*...*/},
        onLaunch: function () {

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

❖ P/扩展的生命周期
  • onLaunch()
    小程序第一次运行的时候调用,此时对应的页面并未被加载。
  • 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:
    [AppleScript] 纯文本查看 复制代码
     {
             url: '', //完整的来源url
             query: {} //url上解析出来的查询参数
     }
  • onNavigate(res)
    页面间跳转开始时调用,此时对应的页面并未被加载,res:
    [AppleScript] 纯文本查看 复制代码
     {
             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, 例如
    [AppleScript] 纯文本查看 复制代码
     this.$route('play?vid=xxx&cid=xxx')
  • $redirect(pagename[, config])
    wx.redirectTo的封装。跳转到指定页面, 替换页面,不产生历史,pagename 可以带上 queryString, 例如
    [AppleScript] 纯文本查看 复制代码
     this.$redirect('play?vid=xxx&cid=xxx')
  • $switch(pagename[, config])
    wx.switchTab的封装。
  • $launch(pagename[, config])
    wx.reLaunch的封装。
  • $back([delta])
    wx.navigateBack的封装。
    [AppleScript] 纯文本查看 复制代码
     this.$back()
  • $preload(pagename)
    提前预加载指定页面(会触发对应页面的onPreload声明周期)
    [AppleScript] 纯文本查看 复制代码
     this.$preload('play?vid=xxx&cid=xxx')
  • $bindRoute()
    点击代理方法,绑定 $onRoute 逻辑,在元素上声明 data-url 作为跳转地址,支持切面方法:

    • data-before 跳转前执行
    • data-after 跳转后执行
    示例:
    [AppleScript] 纯文本查看 复制代码
     <button
             bindtap="$bindRoute"
             data-url="/pages/play"
             data-before="onClickBefore"
     >click redirect</button>
  • $bindRedirect()
    同 $bindRoute, 绑定 $onRedirect
  • $bindSwitch()
    同 $bindRoute, 绑定 $onSwitch
  • $on(key, handler)
    监听跨页面间的消息
  • $emit(key, data)
    派发页面间的消息。
  • $off(key, handler)
    取消监听消息
  • $put(id, value)
    指定 id 存在一份数据,可以为任何类型,以供其它逻辑获取使用
  • $take(id)
    根据 id 获取数据,数据只能被存在一次,获取一次。如果只存放一次,第二次获取 会得到 null 。
    示例:
    [AppleScript] 纯文本查看 复制代码
     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


项目地址:https://github.com/tvfe/wxpage


有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
使用 CLI 初始化项目:

npm install wxpage-cli -g

wxpage init
这一步楼主能给一个详细一些的分步骤吗?不是很明白
发新帖
您需要登录后才可以回帖 登录 | 立即注册