微信的小程序设计原理 第1篇
iPhone5
1rpx =
1px =
iPhone6
1rpx =
1px = 2rpx
iPhone6 Plus
1rpx =
1px =
如上我们定义的,会被编译成js,注入webview
我们把编译后的js分成三部分,展开分析。
第一部分用于获取一套基本设备信息,包含设备高度、设备宽度、物理像素与CSS像素比例、设备方向。
第二部分:转化rpx
核心就是:下面两句,做了一个精度收拢
微信的小程序设计原理 第2篇
配合整体架构图来看一下生命周期。
小程序中不像单页面应用,采用多个webview类似多页。
无论逻辑层还是视图层,这个行为都会被发送到Native层,有Native层统一控制路由。对于webview的添加或删除都会有一个载体来维护,这就是路由栈。
上图中,逻辑层中发出打开页面行为到Native层,Native层收到行为后通过pageFrame快速创建webview,并且推入路由栈。页面创建完后,底层基础库会立刻执行初始化操作,初始化完毕后会发送一个信号通知Native页面已经创建并初始化完毕,随后Native层发送信号到逻辑层中。
通知的目的有两个:
需要通知开发者页面已经创建成功。
在沙箱中创建新页面的“根组件”,并正式开启新页面的生命周期与渲染的流程。
程序的性能又可以分为「启动性能」和「运行时性能」两个主题。「启动性能」让用户能够更快的打开并看到小程序的内容,「运行时性能」保障用户能够流畅的使用小程序的功能。
微信客户端需要从微信后台获取小程序的头像、昵称、版本、配置、权限等基本信息,这些信息会在本地缓存,并通过一定的机制进行更新。
为了尽可能的降低运行环境准备对启动耗时的影响,微信客户端会根据用户的使用场景和设备资源的使用情况,依照一定策略在小程序启动前对运行环境进行部分地预加载,以降低启动耗时。
但不一定命中\
从微信后台获取代码包地址,从 CDN 下载小程序代码包
小程序代码包会在本地缓存,并通过更新机制进行更新。
同步下载/异步下载 强制更新/静默更新
为例降低代码包下载的耗时,微信做的一些优化
小程序启动时需要从代码包内读取小程序的配置和代码,并注入到 JavaScript 引擎中。
微信客户端会使用 V8 引擎的 Code Caching 技术对代码编译结果进行缓存,降低非首次注入时的编译耗时
code cache
V8 会把编译和解析的结果缓存下来,等到下次遇到相同的文件,直接跳过这个过程,把直接缓存好的数据拿来使用
控制频率,范围,内容
控制图片大小
我们在对小程序的架构设计时的要求只有一个,就是要快,包括要渲染快、加载快等。当用户点开某个小程序时,我们期望体验到的是只有很短暂的加载界面,在一个过渡动画之后可以马上看到小程序的主界面。
现在已知的小程序有 微信,支付宝,抖音,qq,虎牙,斗鱼,饿了么,百度,京东等等
已知的这些都是超级app,对用户来说,一般手机只按照常用和必要的app,对于一般的app其实很难推广。开发h5又天生需要借助平台给予流量,体验无论怎么优化,仍旧比不上原生。但是小程序在可以借助平台流量的同时,有较好的用户体验。
目前已经出了三方框架,FinClip 把小程序搬进app。
微信的小程序设计原理 第3篇
在视图层内,每个页面都是一个webiew,当小程序启动时只有首页一个webview
执行新开一个页面的时候,就会创建一个新的webview并插入到视图层
则为销毁webview
小程序每个视图层页面内容都是通过模板来生成的。
这样在后续新打开页面时,都会走缓存的pageframe的内容,避免重复生成,快速打开一个新页面。
下图代码中可以看到dom加载完毕之后,触发alert 通知
网页编程一般采用的是HTML + CSS + JS的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。
同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。
小程序自行搭建了组件组织框架Exparser框架
微信的小程序设计原理 第4篇
我从2018年接触学习前端时,曾仿写过一个性格评测类小程序demo,后来实习期间,完成了部门首个真正意义上小程序。做毕业设计时,结合微信小程序云开发能力,做了一个问答小程序(类似百度知道,360问答)。后来,做过一个大学信息资讯类小程序。正式工作之后,做过的小程序就很多了,借款类小程序,购物类小程序,消费类小程序,导流类小程序。
有招聘需求,现在部分团队会有专门招聘小程序开发工程师,toC的产品招聘前端一般也会要求掌握微信小程序,有相关小程序开发经验。
小程序与传统web单线程架构相比,是双线程架构。
渲染层和逻辑层由两个线程管理,逻辑层采用JSCore 执行 js代码,渲染层使用 webview 进行渲染。小程序有多个页面,所以渲染层存在多个webview。
两个线程之间由Native 层之间统一处理,无论是线程之间的通信,还是数据的传递,网络请求都是由Native层做转发。
此处提到的小程序都特指微信小程序
WXML可以先转成JS对象,然后再渲染出真正的Dom树,回到“Hello World”那个例子,我们可以看到转换的过程
通过setData把msg数据从“Hello World”变成“Goodbye”,产生的JS对象对应的节点就会发生变化,此时可以对比前后两个JS对象得到变化的部分,然后把这个差异应用到原来的Dom树上,从而达到更新UI的目的,这就是“数据驱动”。
这一点和vue其实是一致的
既然小程序是基于双线程模型,那就意味着任何数据传递都是线程间的通信,也就是都会有一定的延时。
微信的小程序设计原理 第5篇
小程序采用多个webview渲染,更加接近原生App的用户体验。
如果为单页面应用,单独打开一个页面,需要先卸载当前页面结构,并重新渲染。
多页面应用,新页面直接滑动出来并且覆盖在旧页面上即可。这样用户体验非常好。
页面得载入是通过创建并插入webview 来实现的。
微信小程序做了限制,在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面。