小程序框架

2021/10/11 20:16:08

本文主要是介绍小程序框架,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

逻辑层App Service

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。

JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

  • 增加 AppPage 方法,进行程序注册和页面注册。
  • 增加 getAppgetCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
  • 提供模块化能力,每个页面有独立的作用域。

注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 windowdocument 等。

注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  one rror (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

注册页面

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。

  • 使用 Page 构造器注册页面

简单的页面可以使用 Page() 进行构造。

  • 在页面中使用 behaviors

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

  • 使用 Component 构造器构造页面

Page 构造器适用于简单的页面。但对于复杂的页面, Page 构造器可能并不好用。

此时,可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是:方法需要放在 methods: { } 里面。

生命周期

页面路由

页面路由就是页面的一种跳转方式。在小程序中所有页面的路由全部由框架进行管理。

页面栈

框架以栈的形式维护了当前的所有页面。它的最大特点就是先入后出,当发生路由切换的时候,页面栈的表现如下:

路由方式页面栈表现
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
页面返回 页面不断出栈,直到目标返回页
Tab 切换 页面全部出栈,只留下新的 Tab 页面
重加载 页面全部出栈,只留下新的页面

可以使用 getCurrentPages() 函数获取当前页面栈,返回值是一个数组

 

 

 

路由方式

对于路由的触发方式以及页面生命周期函数如下:

 

路由方式触发时机路由前页面路由后页面
初始化 小程序打开的第一个页面   onLoad, onShow
打开新页面

调用 API wx.navigateTo
使用组件 <navigator open-type="navigateTo"/>

凡是tabbar定义的页面没法太跳转,url中路径使用的是相对路径的形式,

凡是这种形式的跳转都会保留页面在页面栈中的存储(不建议使用)

组件形式:<navigator open-type="navigateTo" url="../admin/admin">跳转新页面</navigator>

onHide onLoad, onShow
页面重定向

调用 API wx.redirectTo
使用组件 <navigator open-type="redirectTo"/>

当前页面出栈,新页面入栈,优势就是保持页面栈中只有一个页面(推荐使用)

组件形式:<navigator open-type="redirectTo" url="../admin/admin">跳转新页面</navigator>

 

onUnload onLoad, onShow
页面返回

调用 API wx.navigateBack
使用组件<navigator open-type="navigateBack">
用户按左上角返回按钮

页面不断出栈,直到目标返回页,在返回的过程中,不会去触发返回页中的onload事件,因为它在我们页面栈中保存,但是会触发show函数

页面重定向<navigator open-type="navigateBack" url="../index/index">页面返回</navigator>

 

onUnload onShow
Tab 切换

调用 API wx.switchTab
使用组件 <navigator open-type="switchTab"/>
用户切换 Tab,页面全部出栈,只留下新的Tab页面

组件形式:<navigator open-type="switchTab" url="../index/index">跳转index</navigator>

  各种情况请参考下表
重启动 调用 API wx.reLaunch
使用组件 <navigator open-type="reLaunch"/>
onUnload onLoad, onShow

 路由跳转注意事项:

  • navigateTo,redirectTo,智能打开非tabBar页面
  • switchTab智能打开tabBar页面
  • reLaunch可以打开任意页面
  • 页面底部的tabBar有页面决定,即只要是定义为tabBar的页面,底部都有tabBar
  • 调用页面路由带的参数可以在目标页面的onLoad中获取


这篇关于小程序框架的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程