小程序跨页面交互特点及方法（小程序跨平台）

性能优化类别

对于点击某个页面，触发wx.navigateTo跳转到其他页面的小程序，其间会出现空白加载期（分包，但这是一个内部机制）小程序，没有办法优化，只能跳转到页面，等待这段无趣的时间过去，考虑到第一件事，是不是就不能优化了。 do是数字检索逻辑吗？答案是肯定的。没有办法在检索到当前页面的数据后立即执行跳转操作（这个操作更糟糕），但是仍然可以对当前请求使用缓存。有关详细信息，请参阅之前的博文“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函数。 (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 => { // 错误处理}) } }, method : { getBook() { // 检索数据以方便错误处理、上拉刷新和其他操作。

这样，您就可以同时处理获取和页面加载逻辑。 当然，这是与页面绑定的，因此后续删除或更改不会影响它。 但是，请考虑一下，如果您只是在分包跳转之间添加它，它可以产生积极的效果。

如果你不想打扰，你可以学习和研究更多的微信小程序技巧和wxpage框架，以提高你的应用速度。 同时，考虑到ToC和ToC用户都可能存在硬件和网络环境问题。 ，这个优化还是很有价值的。

当然，为了减少冷启动时间，微信小程序提供了预拉取周期性更新数据的能力。

注：以上解释omiseCache 仅用于转发，不用于缓存。 如果您正在考虑添加缓存，请参阅我之前的博客文章前端 API 请求缓存解决方案。

通知类

如果交互发生在PC端，则数据的CRUD。 例如，如果您在详情页更改或删除了数据，当您返回列表时，您可以直接调用之前保存的列表查询条件重新运行查询。 然而，移动设备的下拉滚动设计并没有提供直接调用之前查询条件的方式。 搜索。

如果从列表页进入详情页，则只能在详情页添加或更改项目。 然后返回列表页面。 这时，你可以通知用户数据发生了变化，他们可以决定是否更新数据。

如果编辑页面数据发生变化：

const app = getApp()component({messages: { async handleSave() { //... app.globalData.xxxChanged = true / / ... } }})

列表接口：

const app = getApp()component({ pageLifetimes: { show() { this.confirmThenRefresh() } }, method: {confirmThenRefresh() { / / 检查globalData，如果当前没有变化则直接返回 if(!app.globalData.xxxChanged) return wx.showModal({ // ...complete: () => { // 检查更新？不管是否有或者不，将数据设置为 false app.globalData。xxxChanged = false } }) } } })

当然，也可以使用wx.setStorage或getCurrentPage来获取上一页的setData进行数据通知，并允许用户刷新页面。

订阅公共类

如果只涉及更改数据，可以选择让用户执行更新操作。 但对于删除操作，如果用户选择不更新，不小心点击了已删除的数据，就会出现错误。 因此，如果需要删除，最好在返回列表页面之前修改列表，以免出现错误。

mitt

github 有许多 pub/sub 开源库。 如果没有特殊需求，代码量最少的库是最好的选择。 作者喜欢开发微型图书馆。 著名的开发boss preact也是这个boss创建的。 我不会在这里讨论太多细节，但它非常简单。 或许大家都能看懂，但代码如下（不包括流程工具检查）：

导出默认函数 mitt(all) { all = all Object.create(null); return { on(type, handler) { (all[type] || (all[type] = [])) .push(handler); }, off(type, handler) { if (all[type]) { all[type].splice(all[type].indexOf(handler) >>> 0, 1);发出（类型，evt）{（所有[类型] || []）.slice（）.map((handler) => { handler(evt); }); (all['*'] || []).slice().map((handler) => { handler(type , evt); }) ; } };}

只有三种方法：on-emitter 和 off-emitter。

只需将生成的 mitt() 函数生成的对象导入到多个页面中（或直接将其放置在 app.globalData 中）。

Component({ Lifetimes: {attached: function() { // 创建页面时执行 const changeData = (type, data) => { // 处理传入的类型和数据} this._changed =changeDatabus . on ('xxxchanged', this._changed) },detached: function() { // 当页面被销毁时执行bus.off('xxxchanged', this._changed) } }})。

你可以在这里运行 mit。 用于绑定事件的多个页面。 如果你的需求只涉及两个页面，你可以使用wx.navigateTo的EventChannel（页面到页面的事件信息通道）。 更多关于如何在微信小程序中使用wx.navigateTo方法的events参数的细节和场景可以阅读。 这种方案的优点是，传递到下一页的参数也可以通过EventChannel进行信号传递，从而解决了属性不宜太大的情况下传递数据的问题。

注：页面显示如果显示的信息过多，小程序页面会卡住并显示白屏。 官方小程序也有一个长列表组件回收-视图。 如果你愿意的话，你可以自己研究一下，但我不会在这里详细介绍。

鼓励

如果你觉得这篇文章不错，请给我鼓励，帮我star我的github博客。 博客地址

推荐教程：《微信小程序》

PHP快速学习视频免费教程（从入门到精通）

如何学习PHP入门？ PHP如何快速学习？不用担心。 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：小程序跨页面交互特点及方法（小程序跨平台） https://zhujicankao.com/123980.html