草庐IT

微信小程序内部那些事

恪愚 2023-05-10 原文
  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!

有关微信小程序内部那些事的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. ruby - 是否可以从也在该模块中的类内部调用模块函数 - 2

    在这段Ruby代码中:ModuleMClassC当我尝试运行时出现“'M:Module'的未定义方法'helper'”错误c=M::C.new("world")c.work但直接从另一个类调用M::helper("world")工作正常。类不能调用在定义它们的同一模块中定义的模块函数吗?除了将类移出模块外,还有其他解决方法吗? 最佳答案 为了调用M::helper,你需要将它定义为defself.helper;结束为了进行比较,请查看以下修改后的代码段中的helper和helper2moduleMclassC

  5. ruby - 无法安装 gem - make 未被识别为内部或外部命令可运行程序或批处理文件 - 2

    我想在Windows7上安装带有ruby​​1.9.3的rspec-railsgem。我收到一些错误消息,提示无法安装某些json库。所以,我使用下面的说明来解决它。来源=The'json'nativegemrequiresinstalledbuildtools从[rubyinstaller.org][3]下载[Ruby1.9.3][2]从[rubyinstaller.org][3]下载DevKit文件对于Ruby1.9.3,使用[DevKit-tdm-32-4.5.2-20110712-1620-sfx.exe][4]将DevKit解压到路径C:\Ruby193\DevKit运行cd

  6. ruby - 如何在 Ruby 中实现私有(private)内部类 - 2

    来自Java,我正在尝试在Ruby中实现LinkedList。我在Java中实现它的通常方法是有一个名为LinkedList的类和一个名为Node的私有(private)内部类,其中LinkedList的每个对象都作为Node对象。classLinkedListprivateclassNodeattr_accessor:val,:nextendend我不想将Node类暴露给外部世界。然而,通过Ruby中的这个设置,我可以使用这个访问LinkedList类之外的私有(private)Node类对象-node=LinkedList::Node.new我知道,在Ruby1.9中,我们可以使用

  7. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信

  8. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  9. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进

  10. ruby - Lisp 作为内部 Ruby DSL? - 2

    我已经能够找到:a)用Ruby编写的Lisp解释器(即外部DSL)http://onestepback.org/index.cgi/Tech/Ruby/LispInRuby.redb)作为RubyDSL的Prologhttp://www.kdedevelopers.org/node/2369c)讨论Ruby“作为”一个Lisphttp://www.randomhacks.net/articles/2005/12/03/why-ruby-is-an-acceptable-lisp但奇怪的是,我实际上找不到Lisp的“内部”实现,例如Prolog的实现。我只是不够谷歌,还是还没有人发表过这

随机推荐