去年年末，微信小程序的分包大小已经到达了 12M 大小,一方面说明小程序的确逐步为开发者放开更大的权限，另一方面也说明了对于某些小程序 8M 的大小已经不够用了。我个人今年也是在开发一个 to B 小程序应用。这里列举一些跨页面交互的场景。
对于 B 端应用的业务需求来说，小程序开发的复杂度相对比网页开发要复杂一些。一个是双线程的处理机制问题，另一个是页面栈之间交互问题。
注: 笔者目前只需要开发微信小程序，为了在小程序页面中可以使用 properties behaviors observers 等新功能，已经使用 Component 构造器来构造页面。具体可以参考微信小程序 Component 构造器。如果你也没有多端开发的需求，建议尝试使用，可以得到不错的体验。
性能优化类
对于小程序在页面中点击触发 wx.navigateTo 跳转其他页面，中间会有一段时间的空白加载期(对于分包出去的页面，空白期则会更长)，但是这是小程序内部机制，没有办法进行优化。我们只能眼睁睁的等待这段没有意思的空白期过去。
当考虑到跳转页面后的第一件事情便是取数逻辑，那么我们是否能够进行优化呢？答案是肯定的。我们没有办法直接在当前页面取得数据之后再进行跳转操作(这样操作更不好)，但是我们却可以利用缓存当前的请求，详情可以参考我之前的博客文章 ——Promise对象 3 种妙用。
代码如下:
const promiseCache = new Map() export function setCachePromise(key, promise) { promiseCache.set(key, promise) } export function getCachePromise(key) { // 根据key获取当前的数据 const promise = promiseCache.get(key) // 用完删除，目前只做中转用途，也可以添加其他用途 promiseCache.delete(key) return promise }
做一份全局的 Map,然后利用 Map 缓存 promise 对象，在跳转之前代码为:
// 导入 setCachePromise 函数 Component({ methods: { getBookData(id) { const promise = // promise 请求 setCachePromise(`xxx:${id}`, promise) }, handleBookDetailShow(e) { const id = e.detail this.getBookData(id) wx.navigateTo({url: `xx/xx/x?id=${id}`}) } } })
而跳转之后的代码也如下所示:
// 导入 getCachePromise 函数 Component({ properties: { id: Number }, lifetimes: { attached () { const id = this.data.id // 取得全局缓存的promise const bookPromise = getCachePromise(`xxx:${id}`) bookPromise.then((res) => { // 业务处理 }).catch(error => { // 错误处理 }) } }, methods: { getBook() { // 获取数据，以便于 错误处理 上拉刷新 等操作 } } })
如此便可以同时处理取数和页面加载的逻辑，当然，这个对于页面有耦合性，不利于后续的删除与修改。但考虑如果仅仅加在分包跳转之间可能会有不错的效果。
想要无侵入式，可以进一步学习研究 微信小程序之提高应用速度小技巧 以及 wxpage 框架，同时考虑到无论是 ToC 还是 ToC 用户，都有可能存在硬件以及网络环境等问题，该优化还是非常值得的。
当然微信小程序为了减少冷启动时间，提供了周期性更新 数据预拉取 功能。
注: 上面的 promiseCache 只作为中转的用途，不作为缓存的用途，如果你考虑添加缓存，可以参考我之前的博客文章—— 前端 api 请求缓存方案。
通知类
如果是 pc 端中进行交互，对于数据的 CRUD。例如在详情页面进行了数据的修改和删除，返回列表时候就直接调取之前存储的列表查询条件再次查询即可，而对于移动端这种下拉滚动的设计，就没有办法直接调用之前的查询条件来进行搜索。
如果从列表页面进入详情页面后，在详情页面只会进行添加或者修改操作。然后返回列表页面。此时可以提示用户数据已经进行了修改，请用户自行决定是否进行刷新操作。
如在编辑页面修改了数据:
const app = getApp() component({ methods: { async handleSave() { //... app.globalData.xxxChanged = true //... } } })
列表界面: