微信小程序内部那些事

这篇具有很好参考价值的文章主要介绍了微信小程序内部那些事。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  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!文章来源地址https://www.toymoban.com/news/detail-493673.html

到了这里,关于微信小程序内部那些事的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序第五节——登录那些事儿(超详细的前后端完整流程)

    📌 微信小程序第一节 ——自定义顶部、底部导航栏以及获取胶囊体位置信息。 📌 微信小程序第二节 —— 自定义组件 📌 微信小程序第三节 —— 页面跳转的那些事儿 📌 微信小程序第四节—— 网络请求那些事儿 😜 作           者 :是江迪呀 ✒️ 本文 : 微

    2024年02月09日
    浏览(43)
  • 微信小程序——图片的加载与获取手机内部的图片

    关于将手机里的图片放在上传到小程序,在小程序里这种方法并不陌生,甚至大多数小程序都附带有这种功能,那么这种功能是怎么实现的呢,一起来看看吧!!! 1.本地图片的加载 例如:本地路径:/pages/images/1.png 然后在wxss中设置自己需要的样式即可  关于mode的其他详情

    2024年02月04日
    浏览(51)
  • 微信小程序 <view></view>容器嵌套,wxss样式修改内部内部样式不产生效果

    网上关于”微信小程序讲的知识很少“,微信开发文档对于新手不是很友好,但是建议一定要学会看文档。 问题如下: 我写了好几个view/view 容器嵌套,我在对内部容器包括的内容做修改时,不产生效果,后来发现这是因为引用方式有误。 ’ view 示例二/view   view class = 

    2024年02月17日
    浏览(56)
  • h5跳转微信小程序(微信内部浏览器以及外部浏览器均适用)

    1,先把这个链接给后端 让后端写个接口 获取scheme码 | 微信开放文档 需要把path路径(跳到小程序的那个页面的路径)给后端 2,上代码(vue2框架) 延迟一点拿到路径再跳 完事~

    2024年01月23日
    浏览(68)
  • 微信小程序设置backgroundColor背景色没有改变

    当我们在微信小程序 json 中设置 backgroundColor 时,实际在电脑的模拟器中根本看不到效果。 这是因为 backgroundColor 指的窗体背景颜色,而不是页面的背景颜色,即窗体下拉刷新或上拉加载时露出的背景 如果想改变页面的背景。 page { background-color:#F6F9FF; }

    2024年02月15日
    浏览(47)
  • uniapp—— 微信小程序ios上音频播放没有声音

    uniapp 打包小程序后发现 播放音频文件  没有报错, 一切正常只是没有声音,后来发现是ios手机开启了静音模式导致听不到声音,查看uniapp 文档:  发现的确有这个属性,但是设置了 之后发现并没有起作用 后来发现想要实现ios静音模式下也可以播放音频要用另一个api全局配

    2024年02月13日
    浏览(159)
  • uniapp微信小程序切换到tabber页面没有自动刷新

    前言 通过uni.switchTab跳转到tabber页面比如个人中心页面,更新的数据没有刷新。导致页面的数据还是修改之前的 解决方法 在uni.switchTab()加入回调函数; uni.switchTab成功跳转后调用success,此时可以拿到跳转后页面的page对象,从而调用页面onLoad方法重载页面。 或者 两种方法只是

    2024年02月11日
    浏览(60)
  • 微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动

    如图所示: 自定义弹窗内部有带滚动条的盒子区域 在盒子上滑动,页面如果超出一屏的话,也会跟着一起上下滚动 解决方案:给自定义弹窗 添加 catchtouchmove 事件,阻止冒泡即可 网上不少人说什么 catchtouchmove=\\\"true\\\" 这样,可以没问题,其实 catchtouchmove=\\\"任何内容\\\" 都行,只要

    2024年02月06日
    浏览(45)
  • 微信小程序 构建npm报错 没有生成miniprogram_npm目录

    拉取已有仓库,在目录下执行npm install,再在微信开发者工具里点构建npm,报错说找不到/miniprogram_npm 基础库2.27.1 一、先在 project.config.json 中检查配置 packageJsonPath 是用来寻找 package.json miniprogramNpmDistDir 配置 miniprogram_npm 生成目录 miniprogram_npm 是小程序使用的npm包目录,与 nod

    2024年02月11日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包