微信小程序知识点

vousmevoyez0613

已于 2023-03-31 16:24:52 修改

阅读量940

点赞数 1

分类专栏：前端文章标签： javascript html

于 2021-11-24 17:30:54 首次发布

本文链接：https://blog.csdn.net/acm_cn1234567890/article/details/121275317

版权

前端专栏收录该内容

48 篇文章 2 订阅

订阅专栏

1. 客户端

1. Native App

Native App 是基于 iOS 或者安卓的原生应用，特点是开发成本高，迭代慢，但是性能和体验很好，消息推送及时，比如 qq，微信等。

2. H5

2014 年 HTML5 完成标准定制，他的设计目的是为了在移动设备上支持多媒体，引入了 Video、Audio 等技术。在网页上浏览视频变得很方便，特点是开发和发布成本低，打开方便，无需下载到本地，但是性能受浏览器的处理能力的限制，相较于原生 App 来说差了一些，消息推送不及时。

3. Hybrid App

Hybrid App 就是混合式的 App，也就是在原生应用的基础上，通过 JSBrdige 等方法，访问原生应用的 API 进行 JS 的交互，并通过 WebView 等技术实现 HTML 与 CSS 的渲染。
WebView 可以理解为嵌套了一个浏览器内核（比如 webkit）的移动端组件。
Hybrid App技术实现的应用一般都是跨平台的，并且维护起来比较容易，性能介于 H5 和Native App之间。

4. 小程序

目前互联网上已经有多种小程序：微信小程序、抖音小程序、支付宝小程序、百度小程序、QQ小程序
小程序的总体架构都是基于双线程的。
整个小程序框架系统分为两部分：逻辑层（App Service）和视图层（View）。逻辑层与渲染层的数据交互需要通过 JSBridge，二者是基于MVVM，通过发布订阅，实现数据的双向绑定的，从而实现数据通信。

* 小程序与H5之间的区别。

小程序的运行需要独立的容器，例如微信，抖音这些宿主环境。H5本质上是一个网页，依赖于浏览器运行，因此只要有浏览器，就可以使用，H5是不区分环境的，比如手机内置的浏览器，原生APP 的 web-view 组件，以及小程序提供的 web-view 组件，都可以打开 H5 页面。
小程序的功能比H5多。例如： H5是不能使用一些类似于App的功能，比如：开启前置摄像头、扫码等功能。
小程序中可以允许有多个页面同时存在容器中，而H5就只有一个页面。所以同样是从页面a跳转到页面b,小程序的渲染会快于H5很多，但是，如果是页面内自己刷新，那么H5的效率是要高于小程序的。
小程序是可以在没有网络的情况下打开的，而H5不行。
小程序与H5的更新机制不同。H5的更新是总是取最新的，而小程序是可以允许使用旧版，然后在后台静默更新。

2. 小程序基础

1. 小程序目录结构及原理图

1. 微信小程序

目录结构
原理图

2. 抖音小程序

目录结构
原理图

* 小程序基础目录结构

├── app.js
├── app.json
├── app.css
├── project.json
└── pages
    └── index
        ├── index.xxhtml
        ├── index.xxcss
        ├── index.xxjs
        └── index.json

1. 开发基础

1. 注册小程序

微信小程序
抖音小程序
小程序生命周期
1. 用户首次打开小程序，触发onLaunch(全局只触发一次)
2. 小程序初始化完成后，触发onshow方法，监听小程序显示
3. 小程序从前台进入后台，触发onHide方法
4. 小程序从后台进入前台显示，触发onshow方法
5. 小程序后台运行一定时间，或系统资源占用过高，会被销毁。
前台、后台定义：当用户点击左上角关闭，或者按了设备home键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统占用过高，才会被真正的销毁。

2. 开发一个页面

要想开发一个页面，首先需要在pages下创建一个目录，并且在此目录下新建四个文件，分别是：xxx.xxhtml, xxx.xxcss, xxx.xxjs, xxx.json。其中xxx.xxhtml用于书写页面的dom元素等。xxx.xxcss用于写入dom元素对应的样式。xxx.xxjs用来注册页面，书写运行的相应的js代码。xxx.json用来改写一些界面配置等。

微信小程序
抖音小程序
页面生命周期
1. 小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次
2. 页面载入后会触发onShow方法，显示页面，每次打开页面都会调用一次
3. 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次
4. 当小程序后台运行或跳转到其他页面时，会触发onHide方法
5. 当小程序从后台进入到前台运行或重新进入页面时，触发onshow方法
6. 当使用重定向wx.redirectTo()或者关闭当前页返回上一页wx.navigateBack(),触发onUnload

1. 页面切换及页面生命周期执行顺序

2. 小程序生命周期对页面生命周期的影响

在这里插入图片描述

小程序初始化完成后，页面首次加载触发onLoad，只会触发一次
当小程序进入到后台，先执行页面onHide方法再执行小程序onHide方法
当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法

3. 开发一个组件以及在页面中进行使用

4. 小程序中如何使用第三方npm包

微信小程序使用npm包

字节小程序

小程序底层原理

运行环境

由于实现原因与 iOS JavaScriptCore 限制，iOS 环境下的 Promise 是一个使用 setTimeout 模拟的 Polyfill。这意味着 Promise 触发的任务为普通任务，而非微任务，进而导致在 iOS 下的 Promise 时序会和标准存在差异。
启动机制
小程序没有重启的概念，有冷启动与热启动两种启动方式：
假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动。
冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。
微信主动销毁小程序的情况：
- 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是 5 分钟）会被微信主动销毁。
- 当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁。
启动流程：