组件详情
WXPage-小程序开发框架

WXPage-小程序开发框架

上传者:李泽辰    上传时间:2017-04-06 15:12:03

  484

开发框架

下载   喜欢

WXPage-小程序开发框架 介绍

WXPage

WXPage 是一个极其轻量的微信小程序开发框架,其中的API蕴含了“极致页面打开速度的思想”,为可维护性与开发效率而设计的功能,框架来自“腾讯视频”小程序的项目沉淀。

目录

使用

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

var P = require('./wxpage')
var A = require('./wxpage').A
var C = require('./wxpage').C

程序

❖ A/定义

示例:

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/定义

示例:

<template name="comp">
    <button>It is component: {{name}}</button>
</template>
var C = require('./wxpage').C
C('comp', function (vm) {
    return {
        data: {/*...*/},
        onLoad: function () {
            // do something
            vm.$set({
                name: 'comp'
            })
        }
    }
})

❖ C/使用组件

模板:

<import src="/path/to/comp.wxml"></import>
<template is="item" data="{{...comp}}"/>

Page:

var P = require('./wxpage')
P({
    comps: [require('/path/to/comp')]
})

❖ C/扩展的生命周期

同页面的生命周期

❖ C/VM实例方法

  • $set({...})

    this.setData({...}),但只对当前组件数据生效

    vm.$set({
    title: 'This is component'
    })
    
  • $data()

    获取当前组件的 data 对象

页面

❖ P/定义

示例:

var P = require('./wxpage')
P('index', {
    data: {/*...*/},
    onLaunch: function () {
    },
    onLoad: function () {
        // do something
    }
})

❖ P/扩展的生命周期

  • onLaunch()

    小程序第一次运行的时候调用,此时对应的页面并未被加载。

  • onAppLaunch(opts)

    App.onLaunch 触发时调用。 opts:

    • path String 打开小程序的路径
    • queryObject 打开小程序的query
    • sceneNumber打开小程序的场景值
  • onAppLaunch(opts)

    App.onShow 触发时调用。 opts:

    • path String 打开小程序的路径
    • queryObject 打开小程序的query
    • sceneNumber打开小程序的场景值
  • onAwake(time<Number>)

    小程序进入后台模式后再激活的时候触发。time是耗时。

  • onPreload(res)

    调用 this.$preload(url) 的时候触发,此时对应的页面并未被加载,res:

    {
    url: '', //完整的来源url
    query: {} //url上解析出来的查询参数
    }
    
  • onNavigate(res)

    页面间跳转开始时调用,此时对应的页面并未被加载,res:

    {
    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, 例如

    this.$route('play?vid=xxx&cid=xxx')
    
  • $redirect(pagename[, config])

    wx.redirectTo的封装。跳转到指定页面, 替换页面,不产生历史,pagename 可以带上 queryString, 例如

    this.$redirect('play?vid=xxx&cid=xxx')
    
  • $switch(pagename[, config])

    wx.switchTab的封装。

  • $launch(pagename[, config])

    wx.reLaunch的封装。

  • $back([delta])

    wx.navigateBack的封装。

    this.$back()
    
  • $preload(pagename)

    提前预加载指定页面(会触发对应页面的onPreload声明周期)

    this.$preload('play?vid=xxx&cid=xxx')
    
  • $bindRoute()

    点击代理方法,绑定 $onRoute 逻辑,在元素上声明 data-url 作为跳转地址,支持切面方法:

    • data-before 跳转前执行
    • data-after 跳转后执行

    示例:

    <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 。

    示例:

    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
    
精品推荐
最新发布

联系我们

电话:400 866 0210 (工作日 9:00 ~ 18:00)

QQ群:385046190

客服:service@pgyer.com

商务:bd@pgyer.com

版权所有 © 西安点测网络科技有限公司 2014 - 2017 陕ICP备15010407号-4