微信小程序整理笔记

微信小程序

小程序可以视为只能用微信打开和浏览的H5，小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签

相比H5，小程序与其的区别有如下：

运⾏环境：⼩程序基于浏览器内核重构的内置解析器
系统权限：⼩程序能获得更多的系统权限，如⽹络通信状态、数据缓存能⼒等
渲染机制：⼩程序的逻辑层和渲染层是分开的

1. 小程序有几个文件？

WXML：微信自己定义的一套组件

WXSS : 用于描述 WXML 的组件样式

js : 逻辑处理

json : 小程序页面配置

2.小程序怎么跟随事件传值

在页面标签上通过绑定 data-key = value ，然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值。

小程序 `WXSS` 与 `CSS` 的区别

WXSS

wxss 背景图片只能引入外链，不能使用本地图片

小程序样式使用 @import 引入外联样式文件，地址为相对路径。

尺寸单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进行自适应。

4. 小程序的双向绑定和Vue哪里不一样。

小程序直接使用this.data.key = value 是不能更新到视图当中的。

必须使用 this.setData({ key ： value }) 来更新值。

5. 小程序的生命周期函数

应用的生命周期
页面的生命周期

组件的生命周期

应用的生命周期

生命周期	说明
onLaunch	小程序初始化完成时触发，全局只触发一次
onShow	小程序启动，或从后台进入前台显示时触发
onHide	小程序从前台进入后台时触发
onError	小程序发生脚本错误或 API 调用报错时触发
onPageNotFound	小程序要打开的页面不存在时触发
onUnhandledRejection()	小程序有未处理的 Promise 拒绝时触发
onThemeChange	系统切换主题时触发

页面的生命周期

生命周期	说明	作用
onLoad	生命周期回调—监听页面加载	发送请求获取数据
onShow	生命周期回调—监听页面显示	请求数据
onReady	生命周期回调—监听页面初次渲染完成	获取页面元素（少用）
onHide	生命周期回调—监听页面隐藏	终止任务，如定时器或者播放音乐
onUnload	生命周期回调—监听页面卸载	终止任务

组件的生命周期

生命周期	说明
created	生命周期回调—监听页面加载
attached	生命周期回调—监听页面显示
ready	生命周期回调—监听页面初次渲染完成
moved	生命周期回调—监听页面隐藏
detached	生命周期回调—监听页面卸载
error	每当组件方法抛出错误时执行

注意的是：

组件实例刚刚被创建好时， created 生命周期被触发，此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data ，此时不能调用 setData
在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行
在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理，这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义，如下：

生命周期	说明
show	组件所在的页面被展示时执行
hide	组件所在的页面被隐藏时执行

onLoad : 页面加载时触发。一个页面只会调用一次，可以在 onLoad的参数中获取打开当前页面路径中的参数

onShow : 页面显示 / 切入前台时触发调用。

onReady : 页面初次渲染完成时触发,一个页面只会调用一次。

onHide : 页面隐藏 / 切入后台时触发，如 navigateTo 或底部tab切换到其他页面，小程序切入后台等

onUnload : 页面卸载时触发。如 redirectTo或 navigateBack 到其他页面时.

6. 小程序怎么实现下拉刷新

两种方案

方案一：

通过在 app.json 中，将 "enablePullDownRefresh": true, 开启全局下拉刷新。

或者通过在 组件 .json ，将 "enablePullDownRefresh": true, 单组件下拉刷新。

方案二：

scroll-view ：使用该滚动组件自定义刷新，通过 bindscrolltoupper 属性，当滚动到顶部/左边，会触发 scrolltoupper事件，所以我们可以利用这个属性，来实现下拉刷新功能。

7. `bindtap` 和 `catchtap` 区别

相同点： 都是点击事件

不同点： bindtap 不会阻止冒泡， catchtap 可以阻止冒泡。

8. 小程序有哪些传递数据的方法

1. 使用全局变量

在 app.js 中的 this.globalData = { } 中放入要存储的数据。

在组件.js 中，头部引入 const app = getApp(); 获取到全局变量

直接使用 app.globalData.key 来进行赋值和获取值。

2. 使用路由

wx.navigateTo 和 wx.redirectTo 时，可以通过在 url 后拼接 + 变量，然后在 目标页面 通过在 onLoad 周期中，通过参数来获取传递过来的值。

3. 使用本地缓存

9. 简述下 5种跳转方式区别

wx.navigateTo() : 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

wx.redirectTo() : 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.switchTab() : 跳转到 TabBar 页面，并关闭其他所有非 tabBar 页面

wx.navigateBack() : 关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages() 获取当前的页面栈，决定需要返回几层

wx.reLaunch() : 关闭所有页面，打开到应用的某个页面。

10. 小程序 `wx:if` 和 `hidden` 的区别

wx:if : 有更高的切换消耗。

hidden : 有更高的初始渲染消耗。

使用

频繁切换使用 hidden, 运行时条件变化使用wx: if

11. `app.json` 全局配置文件描述

pages : 用于存放当前小程序的所有页面路径

window : 小程序所有页面的顶部背景颜色，文字颜色配置。

tabBar : 小程序底部的Tab ,最多5个，最少2个。

12. 如何封装小程序请求

封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 ， fail 失败回调 ) , 封装常用方法 POST , GET , DELETE , PUT .... 最后导出这些方法

然后新建一个 api.js 文件，导入封装好的方法，然后调取相应的方法，传递数据。

`wx.request 封装`

js 代码解读复制代码var app = getApp(); //获取小程序全局唯一app实例
var host = '******************'; //接口地址
 

 
//POST请求
function post(url, data, success,fail) {
  request(url, postData, "POST", doSuccess, doFail);
}
 
//GET请求
function get(url, data, success, fail) {
  request(url, postData, "GET", doSuccess, doFail);
}
 
function request(url, data, method, success, fail) {
  wx.showLoading({
    title: "正在加载中...",
  })
  wx.request({
    url: host + url, //请求地址
    method: method, //请求方法
    header: { //请求头
      "Content-Type": "application/json;charset=UTF-8"
    },
    data: data, //请求参数    
    dataType: 'json', //返回数据格式
    responseType: 'text', //响应的数据类型
    success: function(res) {
      wx.hideLoading();
      //成功执行方法，参数值为res.data,直接将返回的数据传入
      success(res.data);
    },
    fail: function() {
      //失败执行方法
      fail();
    },
  })
}
module.exports = {
  postRequest: post,
  getRequest: get,
}

`组件使用封装好的请求`

js 代码解读复制代码var http = require('../../utils/request.js'); //相对路径


var params = {//请求参数
  id:this.data.userId
}
http.postRequest("user/delUser", params, function(res) {
  console.log("修改成功！");
  
}, function(res) {
  console.log("修改失败！！！")
})

13. 小程序运行机制

热启动 ：假如用户已经打开了某个小程序，在一定时间内再次打开小程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的小程序切换到前台来使用。

冷启动：用户首次打开小程序或被微信主动销毁再次打开的情况，此时小程序需要重新加载启动。

14. 小程序什么时候会主动销毁？

小程序在进入后台之后，客户端会帮我们在一定时间内维持我们的一个状态，超过五分钟后，会被微信主动销毁.

官方也没有明确说明什么时候销毁，在不同机型表现也不一样，

2019年开发时：时间官方文档没有说明，但是经过询问一般指5分钟内

2020年开发时：时间官方文档没有说明，实测安卓没有固定时间，内存足够情况下，有时候一天了还在，有时候几分钟就没了。

15. 微信授权流程

16.提高微信小程序的应用速度的手段有哪些？

小程序启动加载性能：

控制代码包的大小
分包加载
首屏体验（预请求，利用缓存，避免白屏，及时反馈

小程序渲染性能：

避免不当的使用setData
使用自定义组件

17.微信小程序的登录流程

调用wx.login()方法会生成code，将code作为参数传递给微信服务器指定接口，就可以获取用户的openid
通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息，调用wx.getUserInfo 读取用户数据

由于小程序后台授权域名无法授权微信的域名，所以需要自身后端调用微信服务器获取用户信息

通过 wx.request() 方法请求业务方服务器，后端把 appid , appsecret 和 code 一起发送到微信服务器。 appid 和 appsecret 都是微信提供的，可以在管理员后台找到

微信服务器返回了 openid 及本次登录的会话密钥 session_key

后端从数据库中查找 openid ，如果没有查到记录，说明该用户没有注册，如果有记录，则继续往下走

session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输

然后生成 session并返回给小程序

小程序把 session 存到 storage 里面

下次请求时，先从 storage 里面读取，然后带给服务端

服务端对比 session 对应的记录，然后校验有效期

18.微信小程序的支付流程

以电商小程序为例

支付流程图如下所示：

具体的做法：

打开某小程序，点击直接下单
wx.login获取用户临时登录凭证code，发送到后端服务器换取openId
在下单时，小程序需要将购买的商品Id，商品数量，以及用户的openId传送到服务器
服务器在接收到商品Id、商品数量、openId后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息
小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付
接下来的一些列操作都是由用户来操作的包括了微信支付密码，指纹等验证，确认支付之后执行鉴权调起支付
鉴权调起支付：在微信后台进行鉴权，微信后台直接返回给前端支付的结果，前端收到返回数据后对支付结果进行展示
推送支付结果：微信后台在给前端返回支付的结果后，也会向后台也返回一个支付结果，后台通过这个支付结果来更新订单的状态

其中后端响应数据必要的信息则是wx.requestPayment方法所需要的参数，大致如下：

JS 代码解读复制代码wx.requestPayment({
  // 时间戳
  timeStamp: '',
  // 随机字符串
  nonceStr: '',
  // 统一下单接口返回的 prepay_id 参数值
  package: '',
  // 签名类型
  signType: '',
  // 签名
  paySign: '',
  // 调用成功回调
  success () {},
  // 失败回调
  fail () {},
  // 接口调用结束回调
  complete () {}
})

参数表如下所示：

微信小程序的实现原理？

一、背景

网页开发，渲染线程和脚本是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应的原因，本质就是我们常说的 JS 是单线程的

而在小程序中，选择了 Hybrid 的渲染方式，将视图层和逻辑层是分开的，双线程同时运行，视图层的界面使用 WebView 进行渲染，逻辑层运行在 JSCore 中

渲染层：界面渲染相关的任务全都在 WebView 线程里执行。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程
逻辑层：采用 JsCore 线程运行 JS 脚本，在这个环境下执行的都是有关小程序业务逻辑的代码

二、通信

小程序在渲染层，宿主环境会把wxml转化成对应的JS对象

在逻辑层发生数据变更的时候，通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的视图

当视图存在交互的时候，例如用户点击你界面上某个按钮，这类反馈应该通知给开发者的逻辑层，需要将对应的处理状态呈现给用户

对于事件的分发处理，微信进行了特殊的处理，将所有的事件拦截后，丢到逻辑层交给JavaScript进行处理

由于小程序是基于双线程的，也就是任何在视图层和逻辑层之间的数据传递都是线程间的通信，会有一定的延时，因此在小程序中，页面更新成了异步操作

异步会使得各部分的运行时序变得复杂一些，比如在渲染首屏的时候，逻辑层与渲染层会同时开始初始化工作，但是渲染层需要有逻辑层的数据才能把界面渲染出来

如果渲染层初始化工作较快完成，就要等逻辑层的指令才能进行下一步工作

因此逻辑层与渲染层需要有一定的机制保证时序正确，在每个小程序页面的生命周期中，存在着若干次页面数据通信

三、运行机制

小程序启动运行两种情况：

冷启动（重新开始）：用户首次打开或者小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，即为冷启动
热启动：用户已经打开过小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需要将后台态的小程序切换到前台，这个过程就是热启动

需要注意：

1.小程序没有重启的概念 2.当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后会被微信主动销毁 3.短时间内收到系统两次以上内存警告，也会对小程序进行销毁，这也就为什么一旦页面内存溢出，页面会奔溃的本质原因了

开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之内下发新版本信息到用户

每次冷启动时，都会检查是否有更新版本，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上

参考链接
https://juejin.cn/post/6916900889651478541?searchId=202504022229549B47DD6E5E9DF3587F84
https://juejin.cn/post/7150542902651781127?searchId=202504022229549B47DD6E5E9DF3587F84

posted @ 2025-04-02 22:44 玉文阅读(33) 评论(0) 收藏举报

刷新页面返回顶部

玉文

微信小程序整理笔记

1. 小程序有几个文件？

2.小程序怎么跟随事件传值

小程序 WXSS 与 CSS 的区别

WXSS

4. 小程序的双向绑定和Vue哪里不一样。

5. 小程序的生命周期函数

应用的生命周期

页面的生命周期

组件的生命周期

6. 小程序怎么实现下拉刷新

两种方案

方案 一 ：

方案二：

7. bindtap 和 catchtap 区别

8. 小程序有哪些传递数据的方法

1. 使用全局变量

2. 使用 路由

3. 使用本地缓存

9. 简述下 5种跳转方式区别

10. 小程序 wx:if 和 hidden 的区别

使用

11. app.json 全局配置文件描述

12. 如何封装小程序请求

wx.request 封装

组件使用 封装好的请求

13. 小程序运行机制

14. 小程序什么时候会主动销毁？

官方也没有明确说明 什么时候销毁， 在不同机型表现也不一样，

15. 微信授权流程

16.提高微信小程序的应用速度的手段有哪些？

17.微信小程序的登录流程

18.微信小程序的支付流程

微信小程序的实现原理？

一、背景

二、通信

三、运行机制

需要注意：

公告

小程序 `WXSS` 与 `CSS` 的区别

`WXSS`

方案一：

7. `bindtap` 和 `catchtap` 区别

2. 使用路由

10. 小程序 `wx:if` 和 `hidden` 的区别

11. `app.json` 全局配置文件描述

`wx.request 封装`

`组件使用封装好的请求`

官方也没有明确说明什么时候销毁，在不同机型表现也不一样，