长沙娱乐网站开发,网站建设详细方案模板,免费网站推广软件,wordpress首页加载慢一、小程序框架结构小程序框架分场景获取、逻辑层和视图层场景获取#xff1a;场景值是用来描述用户进入小程序的路径#xff0c;可以在小程序的生命周期onLaunch 或 onShow 里获取。也可以通过wx.getLaunchOptionsSync来获取场景值。详细的场景列表可以在下面文档查看。微信…一、小程序框架结构小程序框架分场景获取、逻辑层和视图层场景获取场景值是用来描述用户进入小程序的路径可以在小程序的生命周期onLaunch 或 onShow 里获取。也可以通过wx.getLaunchOptionsSync来获取场景值。详细的场景列表可以在下面文档查看。微信开放文档developers.weixin.qq.com逻辑层先要知道小程序开发框架的逻辑层是基于js引擎来给开发者提供代码运行环境和小程序里特有的功能逻辑层的意义在于处理数据发送给视图层进行数据状态变化同时逻辑层也接受视图层的事件反馈。 还有一点需要注意就是小程序的逻辑层不运行在浏览器所以一些web的一些能力无法使用比如document、window之类的。在js基础上小程序又新增了一些功能方法方便开发 1. 增加 App 和 Page 方法进行程序注册和页面注册。 2. 增加 getApp 和 getCurrentPages 方法分别用来获取 App 实例和当前页面栈。 3. 提供丰富的 API如微信用户数据扫一扫支付等微信特有能力。 4. 提供模块化能力每个页面有独立的作用域逻辑层注册小程序小程序创建的时候这边已经注册和绑定如果项目中不需要特殊处理不需要改动 每个小程序开始需要在app.js里注册和挂在小程序的实例绑定生命周期回调函数、错误监听和页面不存在监听函数等。整个小程序只能存在一个APP实例我们可以通过getApp方法获取到全局唯一的 App 实例获取App上的数据或调用开发者注册在App上的函数。文档参考App(Object object) | 微信开放文档developers.weixin.qq.com逻辑层注册页面。 对于小程序中的每个页面都需要在页面对应的js文件中进行注册指定页面的初始数据、生命周期回调、事件处理函数等。 简单页面直接用Page来注册页面Page({data: {text: This is page data.},onLoad: function(options) {// 页面创建时执行},onShow: function() {// 页面出现在前台时执行},onReady: function() {// 页面首次渲染完毕时执行},onHide: function() {// 页面从前台变为后台时执行},onUnload: function() {// 页面销毁时执行},onPullDownRefresh: function() {// 触发下拉刷新时执行},onReachBottom: function() {// 页面触底时执行},onShareAppMessage: function () {// 页面被用户分享时执行},onPageScroll: function() {// 页面滚动时执行},onResize: function() {// 页面尺寸变化时执行},onTabItemTap(item) {// tab 点击时执行console.log(item.index)console.log(item.pagePath)console.log(item.text)},// 事件响应函数viewTap: function() {this.setData({text: Set some data for updating view.}, function() {// this is setData callback})},// 自由数据customData: {hi: MINA}
})
如果页面比较负责则需要使用 Component 构造器构造页面这个就类似VUE方法都放在methods里。Component({data: {text: This is page data.},methods: {onLoad: function(options) {// 页面创建时执行},onPullDownRefresh: function() {// 下拉刷新时执行},// 事件响应函数viewTap: function() {// ...}}
})
在页面中引用behaviors可以做到多个页面同时共有相同的数据和方法。// my-behavior.js
module.exports Behavior({data: {sharedText: This is a piece of data shared between pages.},methods: {sharedMethod: function() {this.data.sharedText This is a piece of data shared between pages.}}
})
// page-a.js
var myBehavior require(./my-behavior.js)
Page({behaviors: [myBehavior],onLoad: function() {this.data.sharedText This is a piece of data shared between pages.}
})
逻辑层生命周期 page实例的生命周期现在看懂有点难后面慢慢理解逻辑层页面路由 小程序中所有页面的路由全部由框架进行管理。页面栈框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候页面栈的表现如下路由方式页面栈表现初始化新页面入栈打开新页面新页面入栈页面重定向当前页面出栈新页面入栈页面返回页面不断出栈直到目标返回页Tab 切换页面全部出栈只留下新的 Tab 页面重加载页面全部出栈只留下新的页面开发者可以使用 getCurrentPages() 函数获取当前页面栈。路由方式对于路由的触发方式以及页面生命周期函数如下路由方式触发时机路由前页面路由后页面初始化小程序打开的第一个页面onLoad, onShow打开新页面调用 API wx.navigateTo使用组件 navigator open-typenavigateTo/onHideonLoad, onShow页面重定向调用 API wx.redirectTo使用组件 navigator open-typeredirectTo/onUnloadonLoad, onShow页面返回调用 API wx.navigateBack使用组件navigator open-typenavigateBack用户按左上角返回按钮onUnloadonShowTab 切换调用 API wx.switchTab使用组件 navigator open-typeswitchTab/用户切换 Tab各种情况请参考下表重启动调用 API wx.reLaunch使用组件 navigator open-typereLaunch/onUnloadonLoad, onShowTab 切换对应的生命周期以 A、B 页面为 Tabbar 页面C 是从 A 页面打开的页面D 页面是从 C 页面打开的页面为例当前页面路由后页面触发的生命周期按顺序AANothing happendABA.onHide(), B.onLoad(), B.onShow()AB再次打开A.onHide(), B.onShow()CAC.onUnload(), A.onShow()CBC.onUnload(), B.onLoad(), B.onShow()DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()D从转发进入AD.onUnload(), A.onLoad(), A.onShow()D从转发进入BD.onUnload(), B.onLoad(), B.onShow()Tips:navigateTo, redirectTo 只能打开非 tabBar 页面。switchTab 只能打开 tabBar 页面。reLaunch 可以打开任意页面。页面底部的 tabBar 由页面决定即只要是定义为 tabBar 的页面底部都有 tabBar。调用页面路由带的参数可以在目标页面的onLoad中获取。逻辑层模块化 可以将一些公共的代码抽离成为一个单独的 js 文件作为一个模块。模块只有通过module.exports或者exports才能对外暴露接口。// common.js
function sayHello(name) {console.log(Hello ${name} !)
}
function sayGoodbye(name) {console.log(Goodbye ${name} !)
}module.exports.sayHello sayHello
exports.sayGoodbye sayGoodbye
var common require(common.js)
Page({helloMINA: function() {common.sayHello(MINA)},goodbyeMINA: function() {common.sayGoodbye(MINA)}
})
文件作用域在 JavaScript 文件中声明的变量和函数只在该文件中有效不同的文件中可以声明相同名字的变量和函数不会互相影响。通过全局函数 getApp 可以获取全局的应用实例如果需要全局的数据可以在 App() 中设置如// app.js
App({globalData: 1
})// a.js
// The localValue can only be used in file a.js.
var localValue a
// Get the app instance.
var app getApp()
// Get the global data and change it.
app.globalData// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue b
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)
逻辑层API 后面会有详细提到。视图层 View基本解释框架的视图层由 WXML 与 WXSS 编写由组件来进行展示。 将逻辑层的数据反应成视图同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套脚本语言结合 WXML可以构建出页面的结构。 WXSS(WeiXin Style Sheet) 用于描述页面的样式。 组件(Component)是视图的基本组成单元。[1]视图层还有一些细节想看的可以直接去看官方文档二、小程序运行环境微信小程序运行在多种平台上iOSiPhone/iPad微信客户端、Android 微信客户端、PC 微信客户端、Mac 微信客户端和用于调试的微信开发者工具。JavaScript 支持情况运行限制基于安全考虑小程序中不支持动态执行 JS 代码即不支持使用 eval 执行 JS 代码不支持使用 new Function 创建函数有个函数支持表可以去文档查看一下。我就不在这贴了。小程序运行机制前台/后台状态小程序启动后界面被展示给用户此时小程序处于前台状态。当用户点击右上角胶囊按钮关闭小程序或者按了设备 Home 键离开微信时小程序并没有完全终止运行而是进入了后台状态小程序还可以运行一小段时间。当用户再次进入微信或再次打开小程序小程序又会从后台进入前台。但如果用户很久没有再进入小程序或者系统资源紧张小程序可能被销毁即完全终止运行。小程序启动这样小程序启动可以分为两种情况一种是冷启动一种是热启动。冷启动如果用户首次打开或小程序销毁后被用户再次打开此时小程序需要重新加载启动即冷启动。热启动如果用户已经打开过某小程序然后在一定时间内再次打开该小程序此时小程序并未被销毁只是从后台状态进入前台状态这个过程就是热启动。小程序销毁时机通常只有当小程序进入后台一定时间或者系统资源占用过高才会被销毁。具体而言包括以下几种情形当小程序进入后台可以维持一小段时间的运行状态如果这段时间内都未进入前台小程序会被销毁。当小程序占用系统资源过高可能会被系统销毁或被微信客户端主动回收。在 iOS 上当微信客户端在一定时间间隔内连续收到系统内存告警时会根据一定的策略主动销毁小程序并提示用户 「运行内存不足请重新打开该小程序」。具体策略会持续进行调整优化。建议小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件进行必要的内存清理。小程序更新机制未启动时更新开发者在管理后台发布新版本的小程序之后如果某个用户本地有小程序的历史版本此时打开的可能还是旧版本。微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本如果有则会静默更新到新版本。总的来说开发者在后台发布新版本之后无法立刻影响到所有现网用户但最差情况下也在发布之后 24 小时之内下发新版本信息到用户。用户下次打开时会先更新最新版本再打开。启动时更新小程序每次冷启动时都会检查是否有更新版本如果发现有新版本将会异步下载新版本的代码包并同时用客户端本地的包进行启动即新版本的小程序需要等下一次冷启动才会应用上。PS 这块的机制属于小程序运行时的机制理解最好不理解也能写。[2]参考^项目写的时wxml基本html不会过多记录后面会着重讲wxs和component^现在先过一下小程序的基本介绍和功能以及结构理解。方便后面开发。先理解。
