微信小程序相关知识点

👁 2021-03-04

熟悉有关微信小程序的内容

1 说说对微信小程序的理解

微信小程序的特点便是无需下载、触手可及、用完即走不沾手机内存且开发成本较低，体现了“微、小、轻”。
微信小程序采用MVVM模式，核心技术是JavaScript、WXML、WXSS，
逻辑层采用JavaScript语言实现微信小程序逻辑行为，视图层采用微信官方提供的WXML,WXSS语言来编辑。
视图层与逻辑层之间的交互依靠数据传输和事件系统完成。

2 微信小程序视图层与逻辑层交互原理

在渲染层的请求并不会直接到了逻辑层，而是会先到了系统层。
在系统层先进行操作处理一部分功能再将数据传递给逻辑层。逻辑层也是一样的。
系统层中的JSBridge提供微信能力、离线存储、网络请求。

参考链接

小程序渲染层与逻辑层交互原理

3 微信小程序的生命周期

参考链接
微信小程序之生命周期

4 微信小程序、APP、H5的区别

1.运行环境

微信小程序：宿主环境是微信。
APP：运行在操作系统中，Android 或 iOS 等。
H5：宿主环境是浏览器，只要有浏览器，就可以使用。

2.系统权限

微信小程序：因为它的宿主环境是微信，所以小程序所有的功能都受限于微信，也就是说微信给开发者提供 API （网络、蓝牙、相册、音频、视频、文件、联系人、日历、键盘、电话、内存…….）就使用，不能绕过微信直接使用系统提供的 API。
APP：调用的是系统资源，也就是说系统提供给开发的的 API （蓝牙、网络、定位、通话、拍照、日志、录音……）都可以使用。
H5：可以调用麦克风、摄像头、视频、音频、文件等，但是H5系统权限不够，比如网络通信状态、通讯录、或调用硬件的，如蓝牙功能等一些APP有的功能，H5就没有这些系统权限，因为它依赖浏览器能力。

3.开发语言

微信小程序：使用微信官方提供的WXML、WXSS 以及 JavaScript，因为宿主环境为微信，所以小程序不能够使用 DOM、BOM、Window等对象。
APP：开发 IOS 常用 Objective-C 和 Swift，开发 Android 常用 Java等。
H5：标准的 HTML、CSS、JavaScript。

4.开发成本

微信小程序：不用考虑兼容性，根据官方文档在微信开发者工具中开发即可，小程序也有提供封装的组件，小程序开发一个就可以在 Android、iOS 等不同平台不同设备上运行，并且小程序无需下载，开发成本较低。
APP：涉及到 Android、iOS 多个平台、开发工具、开发语言、不同设备的适配等问题，APP 需要下载安装，如果是 Android 开发还需要在各种商店上架。
H5：要考虑开发工具 ( VsCode 、Sublime Text、WebStorm )，开发框架 ( React、Vue、Angular )，模块化工具 ( Webpack、Gulp )，组件库、npm 包，兼容性问题等，成本还是比较高的。

5.渲染机制

微信小程序的渲染机制：微信小程序提供双线模型

小程序的渲染层和逻辑层分别由2个线程管理
￮渲染层：界面渲染相关的任务全都在 WebView 线程里执行，一个小程序存在多个界面，所以渲染层存在多个 WebView线程
￮逻辑层：一个单独的线程执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，就是通过图中的 JsCore 线程来运行 JS 脚本
￮这两个线程都会经过微信客户端( Native )中的 WeixinJsBridage 进行中转通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

H5渲染机制：也就是浏览器的渲染机制
▪ 遇到 HTML 标签，调用 HTML 解析器构建 DOM 树
▪ 遇到 style/link 标签，调用 CSS 解析器构建 CSS OM 树
▪ 遇到 script 标签，调用 JS 解析器，处理 JS 代码
▪ 将 DOM 树与 CSS OM 树合并成渲染树，计算布局
▪ 根据布局将节点绘制在页面上面

6.用户体验

微信小程序：微信小程序运行环境独立，用 WXML +WXSS + JS 去开发，配合微信的解析器最终渲染出来的是原生组件的效果，用户体验上将会更进一步。
APP
H5：当H5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。

5 小程序页面间传递数据的方法

1.使用全局变量传递数据
在 app.js 文件中定义全局变量 globalData，将需要存储的信息存放在里面。

App({
    onLaunch: function () {
        // 展示本地存储能力
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)

        // 登录
        wx.login({
        success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
        }
        })

        // 获取用户信息
        wx.getSetting({
        success: res => {
            if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
            wx.getUserInfo({
                success: res => {
                // 可以将 res 发送给后台解码出 unionId
                this.globalData.userInfo = res.userInfo

                // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                // 所以此处加入 callback 以防止这种情况
                if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                }
                }
            })
            }
        }
        })
    },

    globalData: {
        userInfo: null,
    }
})

然后在其他页面进行使用

//获取应用实例
const app = getApp()
let userinfo = app.globalData.userInfo

2.使用 wx.navigateTo 与 wx.redirectTo进行页面跳转是，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化
具体方法请查看微信小程序跨页面传递参数
3.使用小程序提供的缓存API

//存储数据
wx.setStorageSync("openid", res.data.openid)
wx.setStorage("openid", res.data.openid)
//获取数据缓存
wx.getStorageSync("openid")
wx.getStorage("openid")

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/03/04/miniprogram-somthing/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------