你可能不知道的小程序（上篇，如何做小程序的推广

为了让大家更好的理解小程序的一些限制和做一些优化下面从小程序的基础架构讲起如有不对的地方又名站长网如有不对的地方望指正请轻喷 :smile:

首先我们看看下图小程序的架构如下：

我们可以看到一个页面使用一个 WebView 线程进行渲染。 如果于页面栈有 10 层则会开启 10 个 WebView 线程占多一点内存所以对页面栈进行了限制。

那如果在10层页面栈的限制内由于页面的内容过于复杂内存爆了怎么办？ 小程序内部有一个回收机制百度指数工具内存爆了怎么办？ 小程序内部有一个回收机制如果内存紧张时会回收掉一部分 WebView 。

但是如果出现循环引用的话用户反复点击则很容易出现爆栈的情况。 如下图：

所以在开发之前提前梳理好页面之间的跳转合理使用 navigator redirectTo, navigateBack …… 是非常重要的。

当然作为一个程序员我并不想在跳转的时候去时时刻刻的关注我有没有正确引用有没有超出10层页面栈。 完全可以对小程序的跳转做一个封装。

因为只有 wx.navigateTo 才会使页面栈 + 1 那我们只要对这个方法做一层兜底处理即可。 如下代码：

这样就可以随心所欲的跳来跳去了。

小程序的逻辑层是在 JsCore 中运行的。限制如下：

没有 Window、Document 对象也就无法使用 基于 DOM 的一些库. 暂无解决方法。

还是从一张图说起：

不同于页面的渲染所有的脚本逻辑都是跑在同一个 JsCode 线程里面类似于路由中改变 Hash 值。 因此也会引起下面一些常见的坑

需要自己清理页面的 setTimeout 或者 setInterval 定时器

如果要求页面每次出现都是最新的数据则要把拉取数据的逻辑放在 onShow 中执行别放在 onload 中。

若追求“极致化体验”在用户切到下一个页面的时候可以在 onHide 中 abort 掉没有请求成功的接口把即将处理的 setData 去掉可以减轻最新页面的逻辑让最新页面最快渲染展示。

像 canvas , video input map picker …… 组件官方直接使用原生组件百度指数工具官方直接使用原生组件渲染方式如下图：

从上图很容易就可以看出Navtive 组件的层级是最高的那么仅仅去改变 z-index 也无法让其他组件覆盖原生组件。还好官方给出了一个解决方案：

使用 cover-view cover-image 将希望层级变高的组件也包裹成“原生组件”

独特的 Storage 存储

以用户纬度隔离同一个设备A 无法访问 B 用户的数据。

持久缓存只有在用户关掉小程序才会删除如果空间不足百度指数工具如果空间不足会进行 LRU 也就是不经常使用的小程序的数据缓存区域会被全部清空。

在体验版、开发版、和线上版都共用一套并不会隔离。

没有 Cookie

Request uploadFile downloadFile 并发最多10个请求

只支持 HTTPS WSS

如果以往在移动端, PC 的接口会使用 Cookie 进行一些处理那在小程序中使用该接口就比较尴尬了。

因此我们可以在小程序中也模拟出 Cookie 如下图：

在 Storage 中隔离一个字段用来做 Cookie 下面用了一个小技巧把 Cookie 的内容存放于内存中而非每次都从 storage 中读取。

然后我们在每次 Request 成功后解析 Header 中 SET-COOKIE 属性设置 Cookie 在每一次请求的时候手动在 Header 中设置 Cookie 。这样就完美地模拟浏览器的 Cookie 概念了。

标签： Cookie页面程序使用