WXPage 是一个极其轻量的微信小程序开发框架

网友投稿 795 2022-10-08

WXPage 是一个极其轻量的微信小程序开发框架

WXPage 是一个极其轻量的微信小程序开发框架

WXPage

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

目录

使用 类方法 程序定义生命周期配置 组件定义实例方法实例属性 页面定义生命周期实例属性实例方法 案例

使用

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

var wxpage = require('./wxpage')

使用 CLI 初始化项目:

npm install wxpage-cli -gwxpage init

类方法

const wxpage = require('/path/to/wxpage.js');

wxpage.A(def) 程序定义方法:App.A({}); wxpage(def) 页面定义方法:Page.P({}); wxpage.C(def) 组件定义方法:Component.C({}); wxpage.on(key, handler) 监听APP与页面间的消息 wxpage.emit(key, message<任意>) 监听APP与页面间的消息 wxpage.off(key, handler) 取消监听APP与页面间的消息

程序

在小程序的入口文件 app.js 里定义

程序-定义

示例:

const { A } = require('./wxpage')A({ config: { route: '/pages/$page' // $page 会被替换成页面名 }, onLaunch: function () { }, onShow: function () { }});

程序-生命周期

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

程序-配置

wxpage所扩展的配置

A({ config: { /*所有微信wxpage所需的配置*/ }});

route 必需 页面目录的路由地址,$page会被替换为页面名。

route 支持数组,为多项路由的时候,必须搭配 resolvePath 使用,否则默认采用第一项作为路径还原。

routeFrozenTime 可选 限制两次路由跳转的时间间隔,默认为 1000,可为 0 resolvePath(name) 可选A({ config: { route: ['/page/$page', '/pages/$page'], resolvePath: function (name) { return `/page/${name}` } }}); extendPageBefore(name, def, modules) 可选 自定义扩展页面,在框架执行扩展之前。 extendPageAfter(name, def, modules) 可选 自定义扩展页面,在框架执行扩展之后。 extendComponentBefore(def) 可选 自定义扩展组件,在框架执行扩展之前。例如为每个组件挂在一个实例方法:A({ config: { extendComponentBefore: function (def, { fns }) { fns.wrapFun(def.created, function () { this.request = function () { // ... } }) } }});

组件

基于小程序原生组件方案的扩展,提供了父-子组件间的关系引用,一些实用的实例方法等

组件-定义

{COMPONENT}.js

Component.C({ data: {}, attached: function () { /** * this.$root * this.$parent */ }});

{COMPONENT}.json

{ "component": true}

使用

{PAGE}.json

{ "usingComponents": { "{COMPONENT}": "/comps/{COMPONENT}/{COMPONENT}" }}

{PAGE}.wxml

组件-实例方法

同页面

$bindRedirect() 同 $bindRoute, 绑定 $onRedirect $bindSwitch() 同 $bindRoute, 绑定 $onSwitch $on(key, handler) 监听跨页面间的消息 $emit(key, data) 派发页面间的消息。 $off(key, handler) 取消监听消息 $put(id, value)

同页面

$take(id)

同页面

组件-实例属性

$root

当前组件所属的页面组件实例 只在 attached, ready生命周期后生效

$parent

在组件内获取父组件实例引用

Component.C({ attached: function () { this.$parent.data // 父组件 this.$root.data // 根组件,可能是父组件 }});

$refs 指定了 ref 的子组件实例Map,在父组件获取子组件引用:

Page.P({ onLoad: function () { this.$refs.customComp // 根据ref属性获取子组件的实例引用 }});

$cache

同页面缓存模块

$session

同页面缓存模块

页面

页面-定义

Page.P('{PNAME}', { data: { message: 'Hello MINA!' }, onNavigate: function () { this.$preload('detail?id=xxx') }, onLoad: function () { }})

页面-生命周期

onPageLaunch() 小程序第一次运行的时候调用,此时对应的页面并未被加载。 onAppLaunch(opts) App.onLaunch 触发时调用。 opts:path String 打开小程序的路径query Object 打开小程序的queryscene Number 打开小程序的场景值 onAppShow(opts) App.onShow 第一次触发时调用。只会触发一次,需要多次调用的请使用原生的 App.onShow opts:path String 打开小程序的路径query Object 打开小程序的queryscene Number 打开小程序的场景值 onAwake(time) 小程序进入后台模式后再激活的时候触发。time是耗时。 onPreload(res) 调用 this.$preload(url) 的时候触发,此时对应的页面并未被加载,res: { url: '', //完整的来源url query: {} //url上解析出来的查询参数} onNavigate(res) 页面间跳转开始时调用,此时对应的页面并未被加载,res: { url: '', //完整的来源url query: {} //url上解析出来的查询参数}

页面-实例属性

$name 当前页面名称 $state 页面的一些状态集合,有以下字段:firstOpen 是否首个被小程序启动的页面 $cache 本地缓存的封装, 方法如下:set(key, value[, expire][, cb]) 如果传 cb 参数,会使用异步模式并回调,否则直接同步返回结果。 value 缓存数据,可以为对象expire 缓存过期时间,单位为毫秒。如果为 true ,那么保持已存在的缓存时间,如果没有缓存,那么认为过期,不保存。cb 可选,异步写的时候回调,接收参数:cb(err), err不为空代表失败。 get(key[, cb]) 如果传 cb 参数,会使用异步模式并回调 cb 可选,异步读的时候回调,接收参数:cb(err, data), err不为空代表失败。 remove(key[, cb]) 如果传 cb 参数,会使用异步模式并回调 (since v1.1.9) cb 可选,异步删除的时候回调,接收参数:cb(err, data), err不为空代表失败。 Page.P({ onLoad: function () { // 同步写 this.$cache.set('page_data', { name: '首页' }) // 异步写 this.$cache.set('page_data_another', { name: '首页' }, function (err) { // success or fail }) var data = this.$cache.set('page_data') // {name : '首页'} // 异步读 this.$cache.get('page_data', function (err, data) { // success or fail if (err) { console.log('Get data error', err) } else { console.log('Get data success', data) } }) // 设定缓存时间,例如:1000 毫秒 this.$cache.set('page_data', { name: '首页' }, 1000) setTimeout(()=> { // 保持上次缓存时间: 1000-200毫秒 this.$cache.set('page_data', { name: '首页' }, true) }, 200) }}); $session 使用本地缓存实现的session, 小程序退出后session会消失,适用于大数据对象的临时存储 方法如下:set(key, value[, cb]) 如果传 cb 参数,会使用异步模式并回调get(key[, cb]) 如果传 cb 参数,会使用异步模式并回调remove(key[, cb]) 如果传 cb 参数,会使用异步模式并回调Page({ onLoad: function () { this.$session.set('page_session_data', { name: '首页' }) }}); $emitter 页面内的消息模块,作用于当前页面实例与及引用的子组件实例,方法:on 监听emit 派发off 取消监听 $refs 指定了 ref 的子组件实例Map

页面-实例方法

谁在用

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:银行交易系统 Control
下一篇:开发小程序公司「开发小程序公司如何接业务」
相关文章

 发表评论

暂时没有评论,来抢沙发吧~