简述网站的建设流程,管理员,中铁建设集团有限公司地址,网站建设成本预测表文章目录#x1f31f;前言#x1f31f;小程序架构#x1f31f;逻辑层 App Service#x1f31f;注册小程序#x1f31f;注册页面#x1f31f;使用 Page 构造器注册页面#x1f31f;在页面中使用 behaviors#x1f31f;使用 Component 构造器构造页面#x1f31f;页面生…
文章目录前言小程序架构逻辑层 App Service注册小程序注册页面使用 Page 构造器注册页面在页面中使用 behaviors使用 Component 构造器构造页面页面生命周期页面路由页面栈路由方式模块化模块化文件作用域API事件监听 API同步 API异步 APIObject 参数说明回调函数的参数异步 API 返回 Promise云开发 API结语前言
哈喽小伙伴们上一期为大家讲解了一下小程序的自定义组件该如何去使用也带着大家封装了一个带动画效果底部Tabbar组件相信小伙伴们私底下也进行了尝试吧。今天给大家结合官方文档讲解一下小程序的架构这篇文章主要以【逻辑层】为主也希望大家静待我们的下篇【视图层】让我们一起来看看吧
小程序架构 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 整个小程序框架系统分为两部分逻辑层App Service和 视图层View。小程序提供了自己的视图层描述语言 WXML 和 WXSS以及基于 JavaScript 的逻辑层框架并在视图层与逻辑层间提供了数据传输和事件系统让开发者能够专注于数据与逻辑。 View 层用来渲染页面结构AppService 层用来逻辑处理、数据请求、接口调用。 它们在两个线程里运行。 视图层和逻辑层通过系统层的 JSBridage 进行通信逻辑层把数据变化通知到视图层触发视图层页面更新视图层把触发的事件通知到逻辑层进行业务处理 视图层使用 WebView 渲染iOS中使用自带 WKWebView在 Android 使用腾讯的 x5内核基于 Blink运行。逻辑层使用在 iOS 中使用自带的 JSCore 运行在 Android中使用腾讯的 x5 内核基于 Blink运行。开发工具使用 nw.js 同时提供了视图层和逻辑层的运行环境。
逻辑层 App Service 小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发 JavaScript 代码的运行环境以及微信小程序的特有功能。 逻辑层将数据进行处理后发送给视图层同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份 JavaScript 文件并在小程序启动的时候运行直到小程序销毁。这一行为类似 ServiceWorker所以逻辑层也称之为 App Service。
在 JavaScript 的基础上我们增加了一些功能以方便小程序的开发
增加 App 和 Page 方法进行程序注册和页面注册。增加 getApp 和 getCurrentPages 方法分别用来获取 App 实例和当前页面栈。提供丰富的 API如微信用户数据扫一扫支付等微信特有能力。提供模块化能力每个页面有独立的作用域。 注意小程序框架的逻辑层并非运行在浏览器中因此 JavaScript 在 web 中一些能力都无法使用如 windowdocument 等 注册小程序 每个小程序都需要在 app.js 中调用 App 方法注册小程序实例绑定生命周期回调函数、错误监听和页面不存在监听函数等。 详细的参数含义和使用请参考 App 参考文档 。
// app.js
App({onLaunch (options) {// Do something initial when launch.},onShow (options) {// Do something when show.},onHide () {// Do something when hide.},onError (msg) {console.log(msg)},globalData: I am global data
})整个小程序只有一个 App 实例是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例获取App上的数据或调用开发者注册在 App 上的函数。 // xxx.js
const appInstance getApp()
console.log(appInstance.globalData) // I am global data注册页面 对于小程序中的每个页面都需要在页面对应的 js 文件中进行注册指定页面的初始数据、生命周期回调、事件处理函数等。 使用 Page 构造器注册页面 简单的页面可以使用 Page() 进行构造。 代码示例
//index.js
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}
})详细的参数含义和使用请参考 Page 参考文档 。
在页面中使用 behaviors 页面可以引用 behaviors 。 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.}
})具体用法参见 behaviors 。
使用 Component 构造器构造页面 Page 构造器适用于简单的页面。但对于复杂的页面 Page 构造器可能并不好用。 此时可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是方法需要放在 methods: { } 里面。 代码示例
Component({data: {text: This is page data.},methods: {onLoad: function(options) {// 页面创建时执行},onPullDownRefresh: function() {// 下拉刷新时执行},// 事件响应函数viewTap: function() {// ...}}
})这种创建方式非常类似于 自定义组件 可以像自定义组件一样使用 behaviors 等高级特性。 具体细节请阅读我们的上一篇博文 Component 构造器 章节。
页面生命周期 小程序里生命周期分为两部分小程序生命周期和页面生命周期后续会专门出一篇文章去详细讲解的。 下图说明了页面 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()CBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()D(从转发进入)AD.onUnload(), A.onLoad(), A.onShow()D(从转发进入)BD.onUnload(), B.onLoad(), B.onShow()
注意事项
navigateTo, redirectTo 只能打开非 tabBar 页面。switchTab 只能打开 tabBar 页面。reLaunch 可以打开任意页面。页面底部的tabBar由页面决定即只要是定义为 tabBar 的页面底部都有 tabBar。调用页面路由带的参数可以在目标页面的onLoad中获取。
模块化
模块化 可以将一些公共的代码抽离成为一个单独的 js 文件作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。 注意
exports 是 module.exports 的一个引用因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口除非你已经清晰知道这两者的关系。小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中或者使用小程序支持的 npm 功能。
// common.js
function sayHello(name) {console.log(Hello ${name} !)
}
function sayGoodbye(name) {console.log(Goodbye ${name} !)
}
module.exports.sayHello sayHello
exports.sayGoodbye sayGoodbye在需要使用这些模块的文件中使用 require 将公共代码引入
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 小程序开发框架提供丰富的微信原生 API可以方便的调起微信提供的能力如获取用户信息本地存储支付功能等。详细介绍请参考 API 文档。 通常在小程序 API 有以下几种类型
事件监听 API 我们约定以 on 开头的 API 用来监听某个事件是否触发如wx.onSocketOpenwx.onCompassChange 等。 这类 API 接受一个回调函数作为参数当事件触发时会调用这个回调函数并将相关数据以参数形式传入。 代码示例:
wx.onCompassChange(function (res) {console.log(res.direction)
})同步 API 我们约定以 Sync 结尾的 API 都是同步 API 如 wx.setStorageSyncwx.getSystemInfoSync 等。此外也有一些其他的同步 API如 wx.createWorkerwx.getBackgroundAudioManager 等详情参见 API 文档中的说明。 同步 API 的执行结果可以通过函数返回值直接获取如果执行出错会抛出异常。 代码示例:
try {wx.setStorageSync(key, value)
} catch (e) {console.error(e)
}异步 API
大多数 API 都是异步 API如 wx.requestwx.login 等。这类 API 接口通常都接受一个 Object 类型的参数这个参数都支持按需指定以下字段来接收接口调用结果
Object 参数说明
参数名类型必填说明successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行其他Any-接口定义的其他参数
回调函数的参数 successfailcomplete 函数调用时会传入一个 Object 类型参数包含以下字段 属性类型说明errMsgstring错误信息如果调用成功返回 ${apiName}:okerrCodenumber错误码仅部分 API 支持具体含义请参考对应 API 文档成功时为 0。其他Any接口返回的其他数据异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值可以用来实现更丰富的功能如 wx.requestwx.connectSocket 等。 代码示例
wx.login({success(res) {console.log(res.code)}
})异步 API 返回 Promise 基础库 2.10.2 版本起异步 API 支持 callback promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise否则仍按回调方式执行无返回值。 注意事项 1.部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera小游戏本身就有返回值 它们的 promisify 需要开发者自行封装。 2.当没有回调参数时异步接口返回 promise。此时若函数调用失败进入 fail 逻辑 会报错提示 Uncaught (in promise)开发者可通过 catch 来进行捕获。 3.wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。
代码示例
// callback 形式调用
wx.chooseImage({success(res) {console.log(res:, res)}
})// promise 形式调用
wx.chooseImage().then(res console.log(res: , res))云开发 API 开通并使用微信云开发即可使用云开发API在小程序端直接调用服务端的云函数。 代码示例
wx.cloud.callFunction({// 云函数名称name: cloudFunc,// 传给云函数的参数data: {a: 1,b: 2,},success: function(res) {console.log(res.result) // 示例},fail: console.error
})// 此外云函数同样支持promise形式调用结语
这篇为小伙伴们讲解小程序的架构之【逻辑层】下期为大家讲解【视图层】的知识水滴石穿积少成多。各位小伙伴让我们 let’s be prepared at all times ✨原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富
