技术标签： 小程序的浪潮·初探 webview github 微信小程序 jsbridge 缓存
window、document，它更像是一个类似 Node.js 的宿主环境。因此在小程序内部不能使用 document.querySelector 这样的选择器，也不支持 XMLHttpRequest、location、localStorage 等浏览器 API，只能使用小程序自己提供的 API；wx.request 时不存在跨域问题；require 加载；微信小程序分为“视图层”和“逻辑层”。视图层是在 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 页面渲染完后又会跟逻辑层通信。
小程序页面跳转会比普通的 HTML5 快很多。这是因为小程序的视图层做了预加载处理。实际的 webview 页面总是比真实打开的页面要多一个，这个多出来的隐藏 webview 就是提前初始化预热的，方便打开下一个页面使用。
通常我们会进行代码层面的优化。比如：
setData，并不需要把所有数据都放在data中；onPageScroll；等等。
但是还有一点：
小程序的逻辑层代码在小程序执行的生命周期内会常驻内存，并不会因为切换页面而释放资源！
利用这个特点，可以在逻辑层空闲时间对比页面流程进行一些优化 —— 比如提前获取下一个页面的数据并存入 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.9w次，点赞27次，收藏211次。在前面的文章中我，我们也写过kali的安装。时间久了，kali的更新也比较快。这里我们以最新版为例，进行安装演示。_kali
文章浏览阅读1.4k次。Andorid 10 SurfaceFlinger 模块介绍 SurfaceFlinger 接受来自多个源的数据缓冲区，然后将它们进行合成并发送到显示屏。WindowManager 为 SurfaceFlinger 提供缓冲区和窗口元数据，而 SurfaceFlinger 可使用这些信息将 Surf..._asurfacetransaction
文章浏览阅读1.2k次。平方根升余弦滤波器的设计2005年第9期中图分类号：TNTI3 文献标识码：A 文章编号：1009—255212oo5)o9—0058—03平方根升余弦滚 降数字滤波器 的设计与实现文安平(武汉科技大学信息科学与工程学院，武汉 430081)摘 要：现代数字通信中广泛采用平方根升余弦滚降数字滤波器作为基带成形滤波器和 匹配滤波器。介绍 了平方根升余弦滚降数字滤波器的设计和优化方法，并提 出了用..._平方根升余弦滤波器
文章浏览阅读754次。一个简单的按钮图片加载代码，一般人出现的问题都是加载的图片可能会很小，怎么解决这个问题呢？来看看下面的代码吧，对于相关的迷惑点我会给出讲解，同时在学习这个代码的过程中我们也学学其他的一些功能实现。如何显示中文、如何设置字体以及颜色等。 #include #include #include #include #include in_qt 加载图片layout
文章浏览阅读1.4k次。迪文屏幕开发——采坑指南分辨率！地址通信下载上电分辨率！硬件本身的分辨率自己制作的背景图片的分辨率新建工程的分辨率这三个分辨率必须要保持一致！否则会出现显示混乱的状况。地址这里的地址就是屏幕内部的储存地址，我们在自己选择地址储存信息的时候，可以使用的地址是0x1000~0xFFFF.通信迪文屏在进行通信的时候，需要注意三点：1、确认自己编辑的控件勾选了数据上传2、调整屏幕硬件配置，打开数据上传功能3、迪文屏所有的发送和接收的数据，都是十六进制下载上电不同尺寸的屏幕需要的电压是_迪文屏分辨率低
文章浏览阅读92次。题目描述：ydc有一棵n个结点的黑白相间的大树，从1到n编号。这棵黑白树中有m个黑点，其它都是白点。对于一个黑点我们定义他的好朋友为离他最远的黑点。如果有多个黑点离它最远那么都是它的好朋友。两点间的距离定义为两点之间的最短路的长度。现在你要摧毁一个白点。摧毁后有一些黑点会不高兴。一个黑点不高兴当且仅当他不能到达任何一个在摧毁那个白点前的好朋友。请你最大化不高兴的黑点数。解题..._ydc的大树
文章浏览阅读71次。一.构造函数 一个deadline_timer只维护一个超时时间，一个deadline_timer不同时维护多个定时器。在构造deadline_timer时指定时间:1 basic_deadline_timer(boost::asio::io_service & io_service);2 3 basic_deadline_timer( boost::asio::io..._boost asio deadline lamdba
文章浏览阅读8.2k次，点赞9次，收藏112次。文章目录前言1 Partition Compile2 Autopartitioning(Ease of Adoption)3 Specifying Partitions Manually(Recommended)3.1 topcfg.v file3.2 Two step commands for partition compile3.3 Three step commands for partition compile3.4 Profiling of Compilation Time4 Best Pract_vcs加速编译
文章浏览阅读2.8w次，点赞68次，收藏167次。在正文开始之前，我们需要说明一件事情，在我们使用函数生成的随机数都不是真正的随机数，准确的叫法应该是伪随机数。在 C 语言当中使用随机数要用到 rand 函数和 srand 函数。int rand()：返回值为随机值，参数为空，通过 rand 函数就会产生一个随机数。void srand(unsigned int seed)：返回值为空， 就是设置随机种子的，当我们不设置随机种子的时候，默认设置的..._c语言生成随机
文章浏览阅读4.2k次，点赞2次，收藏8次。如果最终得到的数据是两路数据的差值, 我们可以采用ADC的 Difference 工作模式#include #include #include "inc/hw_memmap.h"#include "driverlib/adc.h"#include "driverlib/gpio.h"#include "driverlib/pin_map.h"#include "driver_adc检测 短路保护
文章浏览阅读1.7k次。当遇到crash时，查看线程栈，只能看到栈帧的地址，使用imagelookup–address地址可以方便的定位到这个地址对应的代码行。命令可以打印出线程的堆栈信息，该信息比左侧的DebugNavigator看到的还要详细一些。在调试时，动态的修改变量的值，这在调试想要让应用执行异常路径（如执行某个else情况）很有用。命令类似，所以也是可以打印常量、变量，打印表达式返回的对象等。在控制台执行该命令，可以在不修改代码，不重新编译的情况下，修改界面上的视图。命令是打印所有线程的堆栈信息。......_xcode po命令
文章浏览阅读969次。PPT的配色方法PPT中色彩的用处层次更加的清晰，ppt中有小标题 大标题 正文等不同的部分，每一个部分的重点和级别程度也不一样，可以使用不同的颜色来对重点和非重点进行区分分割内容区域，通常一个PPT具有很多个部分，每个部分表达的内容可能不一样，比如开题PPT，就包括了研究背景和意义、研究现状、研究内容、工作进度安排和参考文献五个部分。分别对每个部分用不同颜色加以区分（这里求同存异，我个人是不太赞成老师这一观点的，因为我一直觉得一套PPT必须有一套的完整风格）强化主题联系，在专业的场合，_ppt配色教程