如何利用小游戏解决方案提升企业在金融和物联网领域的运营效率
859
2022-10-08
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.js 里定义
程序-定义
示例:
const { A } = require('./wxpage')A({ config: { route: '/pages/$page' // $page 会被替换成页面名 }, onLaunch: function () { }, onShow: function () { }});
程序-生命周期
onAwake(time
程序-配置
wxpage所扩展的配置
A({ config: { /*所有微信wxpage所需的配置*/ }});
route 必需 页面目录的路由地址,$page会被替换为页面名。
route 支持数组,为多项路由的时候,必须搭配 resolvePath 使用,否则默认采用第一项作为路径还原。
routeFrozenTime 可选 限制两次路由跳转的时间间隔,默认为 1000,可为 0 resolvePath(name
组件
基于小程序原生组件方案的扩展,提供了父-子组件间的关系引用,一些实用的实例方法等
组件-定义
{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
页面-实例属性
$name 当前页面名称 $state 页面的一些状态集合,有以下字段:firstOpen
页面-实例方法
谁在用
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~