微信小程序快速入门【四】
👨🏫内容1:宿主环境
不同于Android应用和iOS应用直接运行于Andorid系统和iOS系统,微信小程序运行在微信提供的宿主环境中,由于微信已经替我们抹平了不同平台的差异,所以微信小程序能够实现跨平台,且能够实现很多普通网页无法实现的功能。我们将以之前建立的Test项目为例介绍一下微信小程序的运作过程。
我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示⬇️
👨⚖️内容2:小程序的启动过程
微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径,我们新建的test项目的pages字段内容如下,可以知道test项目包含两个页面index和logs,由于没有通过entryPagePath指定启动页,所以会默认pages字段的第一个页面也就是index页面为启动页。
"pages":[ "pages/index/index", "pages/logs/logs" ]
于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。小程序启动之后,在 app.js 定义的App实例的onLaunch回调会被执行,整个小程序只有一个 App 实例,是全部页面共享的,每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等,其包含的监听函数如下:
// app.js App({ onLaunch (options) { // 生命周期回调——监听小程序初始化。 }, onShow (options) { // 生命周期回调——监听小程序启动或切前台。 }, onHide () { // 生命周期回调——监听小程序切后台。 }, onError (msg) { //错误监听函数。 console.log(msg) }, globalData: 'I am global data' })
👨💻内容3:小程序页面渲染
其大致的过程如下,可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据logs.json配置生成一个界面,顶部的颜色和文字你都可以在这个json文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 log.js。
Page({ data: { //参与页面渲染的数据 logs: [] }, onLoad() { //页面渲染后执行 this.setData({ logs: (wx.getStorageSync('logs') || []).map(log => { return { date: util.formatTime(new Date(log)), timeStamp: log } }) }) } })
Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。
对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。//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) } })
👨🚀内容4:Component
👉Page 构造器适用于简单的页面。但对于复杂的页面, Page 构造器可能并不好用。此时,可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是:方法需要放在 methods: { } 里面。
Component({ data: { text: "This is page data." }, methods: { onLoad: function(options) { // 页面创建时执行 }, onPullDownRefresh: function() { // 下拉刷新时执行 }, // 事件响应函数 viewTap: function() { // ... } } })
🧑🌾内容5:Behavior
👉页面可以引用 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.' } })
🍉精品图书推荐
🎃活动介绍:
👉清华社【秋日阅读企划】领券立享优惠
IT好书 5折叠加10元 无门槛优惠券:https://u.jd.com/Yqsd9wj
活动时间:9月4日-9月17日,先到先得,快快来抢
文章来源:https://www.toymoban.com/news/detail-725179.html🍟内容介绍:
本书共分为三部分,分别介绍了JavaScript、HTML和CSS的基础知识,JavaScript编程的基本概念和技巧,以及如何用JavaScript开发实用的应用程序。本书风格独特,采用三段式学练结合的知识架构,从JavaScript编程知识的讲解,到示范教学和引导学生参与动手实践,循序渐进地帮助读者保持学习动机和兴趣,掌握JavaScript编程技能。同时本书提供了137个JavaScript代码范例,可以直接通过浏览器进行交互,以及多个实作项目,包括煮蛋计时器、计算器、温度转换器、通讯录以及适用于时装店和冰淇淋连锁店的商业应用。本书还介绍了目前流行的jQuery、Vue和ES6等相关技术。如果你想轻松学会JavaScript,并且享受编程的乐趣,那么这本书就是你的不二之选!文章来源地址https://www.toymoban.com/news/detail-725179.html
到了这里,关于微信小程序快速入门【四】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!