hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 小程序 - 正文 君子好学,自强不息!

小程序跨页面交互的作用和要领_微信小程序

2020-06-11小程序ki4网8°c
A+ A-

客岁岁终,微信小程序的分包大小已抵达了 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
      //...  
    }
  }
})

列表界面:

const app = getApp()

component({
  pageLifetimes: {
    show() {
      this.confirmThenRefresh()
    }    
  },
  methods: {
    confirmThenRefresh() {
      // 搜检 globalData,假如当前没有举行修正,直接返回 
      if(!app.globalData.xxxChanged) return
      wx.showModal({
        // ...
        complete: () => {
          // 不管确认革新与否,都把数据置为 false 
          app.globalData.xxxChanged = false  
        }  
      })  
    }
  }  
})

固然了,我们也可以应用 wx.setStorage 或许 getCurrentPage 猎取前面的页面 setData 来举行数据关照,以便用户举行页面革新。

定阅宣布类

假如仅仅只涉及到修正数据的前提下,我们可以挑选让用户举行革新操纵,然则假如针关于删除操纵而言,假如用户挑选不举行革新,然后用户又不警惕点击到了已被删除的数据,就会发作毛病。所以假如有删除的需求,我们最幸亏返回列表页眼前就举行列表的修正,以避免形成毛病。

mitt

github 上有许多的 pub/sub 开源库,假如没有什么特定的需求,找到代码量起码的就是 mitt 这个库了,作者是喜好开发微型库的 developit 大佬,有名的 preact 也是出于这位大佬之手。 这里就不做过量的引见,异常简朴。人人大概都能看邃晓,代码以下(撤除 flow 东西的搜检):

export default function 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);
      }
    },
    emit(type, evt) {
      (all[type] || []).slice().map((handler) => { handler(evt); });
      (all['*'] || []).slice().map((handler) => { handler(type, evt); });
    }
  };
}

仅仅只要3个要领,on emit以及 off。

只要在多个页面导入 生成的 mitt() 函数生成的对象即可(或许直接放入 app.globalData 中也可)。

Component({
  lifetimes: {
    attached: function() {
      // 页面建立时实行
      const changeData = (type, data) => {
        // 处置惩罚通报过来的范例与数据
      }
      this._changed = changeData
      bus.on('xxxchanged', this._changed)
    },
    detached: function() {
      // 页面烧毁时实行
      bus.off('xxxchanged', this._changed)
    }
  }
})

这里mitt可以有多个页面举行绑定事宜,假如需求仅仅只涉及到两个页面之间,我们就可以运用 wx.navigateTo 中的 EventChannel (页面间事宜信息通道)。可以参考微信小程序wx.navigateTo要领里的events参数运用概况及场景,该计划的利幸亏于,通报到下一个页面的参数也可以经由过程 EventChannel 来关照,以便于解决 properties 通报数据不宜过大的问题。

注: 一个页面展现许多信息的时刻,会形成小程序页面的卡顿以及白屏。小程序官方也有长列表组件 recycle-view。有需求的情况下可以自行研讨,这个不在这里详述。

勉励一下

假如你以为这篇文章不错,愿望可以授与我一些勉励,在我的 github 博客下帮助 star 一下。
博客地址

引荐教程:《微信小程序》

以上就是小程序跨页面交互的作用和要领的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
小程序跨页面交互的作用和要领_微信小程序

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>