微信小程序内部那些事

news/2024/10/21 6:12:23/
  1. 微信小程序没有windowdocument,它更像是一个类似 Node.js 的宿主环境。因此在小程序内部不能使用 document.querySelector 这样的选择器,也不支持 XMLHttpRequestlocationlocalStorage 等浏览器 API,只能使用小程序自己提供的 API;
  2. 小程序不是直接 URL 访问的,而是通过信道服务进行通信和会话管理。所以不支持 Cookie!使用 wx.request 时不存在跨域问题;
  3. 和 Node 一样,小程序的 js 模块化加载采用 CommonJS 规范,通过 require 加载;
  4. 小程序是基于“数据驱动”模式的,但是它是“单向数据流”的绑定方式;

小程序架构

微信小程序分为“视图层”和“逻辑层”。视图层是在 webview 中渲染,逻辑层则用 JavaScriptCore 来渲染。其中视图层可以有多个,但逻辑层则只有一个。

小程序中视图层负责页面渲染,逻辑层负责逻辑处理、状态管理、请求和接口调用。逻辑层和视图层的通信是通过微信的 JSBridge 实现的。

Native 中有一个 WeixinJSBridge 模块。所以也可以说是通过 Native 通信的。

逻辑层数据变化通过 JSB 通知到视图层,触发视图层更新;当视图层触发事件则继续通过 JSB 将事件通知到逻辑层做处理。
WeixinJSB 在开发者工具、IOS 和 Android 的实现机制不同。在调用 Native 能力时主要使用 invokeHandler、在消息分发时使用 publishHandler —— 实际和 原生的 Webview 一样,就是通过微信的X5内核提供了互相调用函数的能力。

因为在一个小程序中可以打开多个视图层,要保证发送的消息准确送到每个具体的 webview 中,需要通过每个 webview 唯一标识 webviewId 来实现。发送消息时,携带 webviewId,然后逻辑层处理完对应的逻辑,如果需要通知或者执行对应 webview 代码,则可以通过 webviewId 找到对应的 webview ,下发通知。

小程序是单线程的吗?

不是。单线程不足以支撑这么“快”的小程序。
小程序启动时,会同时启动两个线程,一个负责页面渲染的 webview(实际不止一个),一个负责逻辑的 jSCore。逻辑层初始化后会将初始化数据通过 JSB 传递给渲染层进行渲染。渲染层 webview 页面渲染完后又会跟逻辑层通信。

页面渲染的 webview 不止一个?

小程序页面跳转会比普通的 HTML5 快很多。这是因为小程序的视图层做了预加载处理。实际的 webview 页面总是比真实打开的页面要多一个,这个多出来的隐藏 webview 就是提前初始化预热的,方便打开下一个页面使用。

小程序项目如何优化

通常我们会进行代码层面的优化。比如:

  1. 合理使用 setData,并不需要把所有数据都放在data中;
  2. 合理使用小程序事件,比如 onPageScroll
  3. 使用默认数据减少白屏时间;

等等。
但是还有一点:
小程序的逻辑层代码在小程序执行的生命周期内会常驻内存,并不会因为切换页面而释放资源!
利用这个特点,可以在逻辑层空闲时间对比页面流程进行一些优化 —— 比如提前获取下一个页面的数据并存入 app.js 的 globalData 中。当用户进入下一个页面时可以减少等待时间。

let prefetchTimer
const app = getApp()Page({onHide(){//记得清理定时器clearTimeout(prefetchTimer)},onShow(){//...this._setPrefetchData()},_setPrefetchData(){if(!app.globalData.xxx && 其他条件){prefetchTimer = setTimeout(() =>{//请求}, 10e3)}},//...
})

笔者的开源小程序功能组件集,github地址:yunUI。添加新组件了!功能更强大的图片上传与排序组件,希望能帮到各位。
目前为止已经有九个真正好用的组件和两个js工具,再添加几个就要开始着手改造、发到npm上了。欢迎大家star!欢迎提issue!


http://www.ppmy.cn/news/23990.html

相关文章

shell脚本免交互与expect

目录 Here Document 定义 格式 注意 例子 统计行数 修改密码​编辑 expect 定义 基本命令 实验 免交互ssh主机 Here Document 定义 使用I/O重定向的方式将命令列表提供给交互式程序 格式 命令<< 标记....标记 注意 标记可以使用任意的合法字符&#xf…

IT人的晋升之路——关于人际交往能力的培养

对于咱们的程序员来说&#xff0c;工作往往不是最难的&#xff0c;更难的是人际交往和关系的维护处理。很多时候我们都宁愿加班&#xff0c;也不愿意是社交&#xff0c;认识新的朋友&#xff0c;拓展自己的圈子。对外的感觉就好像我们丧失了人际交往能力&#xff0c;是个呆子&a…

【c++】类和对象:让你明白“面向一个对象有多重要”:构造函数,析构函数,拷贝构造函数的深入学习

文章目录 什么是面向对象&#xff1f;一&#xff1a;类是什么&#xff1f; 1.类的访问限定符 2.封装 3.类的实例化 4.this指针二&#xff1a;类的6个默认成员函数 1.构造函数 2.析构函数 3.拷贝构造函数什么是面向对象&#xff1f; c语言是面向…

nginx相关反爬策略总结笔记

引言 互联网站点的流量一部分由人类正常访问行为产生&#xff0c;而高达30%-60%的流量则是由网络爬虫产生的&#xff0c;其中一部分包含友好网络爬虫&#xff0c;如搜索引擎的爬虫、广告程序、第三方合作伙伴程序、Robots协议友好程序等;而并非所有的网络爬虫都是友好的&#x…

SPSS数据分析软件的安装与介绍(附网盘链接)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Web 框架 Flask 快速入门(一)flask基础与模板

前言 课程地址&#xff1a;Python Web 框架 Flask 快速入门 文章目录前言&#x1f334; Flask基础和模板&#x1f337; 一个简单的flask程序&#x1f33c; 模板的使用&#x1f334; Flask基础和模板 1、web框架的作用 避免重复造轮子&#xff0c;app程序不必关心于服务器的沟…

Linux系统位运算函数以及相应CPU ISA实现收录

以32位数据的二进制表示为例&#xff0c;习惯的写法是LSB在左&#xff0c;MSB在右&#xff0c;注意BIT序和大小端的字节序没有关系。Linux和BIT操作有关的接口在定义在头文件bitops.h中&#xff0c;bitops.h定义有两层&#xff0c;通用层和架构层&#xff0c;对应两个bitops.h&…

爬虫Python入门好学吗?学什么?

爬虫Python入门好学吗&#xff1f;学爬虫需要具备一定的基础&#xff0c;有编程基础学Python爬虫更容易学。但要多看多练&#xff0c;有自己的逻辑想法。用Python达到自己的学习目的才算有价值。如果是入门学习了解&#xff0c;开始学习不难&#xff0c;但深入学习有难度&#…