欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

去年年末，微信小程序的分包大小已經(jīng)到達(dá)了 12M 大小,一方面說(shuō)明小程序的確逐步為開(kāi)發(fā)者放開(kāi)更大的權(quán)限，另一方面也說(shuō)明了對(duì)于某些小程序 8M 的大小已經(jīng)不夠用了。我個(gè)人今年也是在開(kāi)發(fā)一個(gè) to B 小程序應(yīng)用。這里列舉一些跨頁(yè)面交互的場(chǎng)景。

對(duì)于 B 端應(yīng)用的業(yè)務(wù)需求來(lái)說(shuō)，小程序開(kāi)發(fā)的復(fù)雜度相對(duì)比網(wǎng)頁(yè)開(kāi)發(fā)要復(fù)雜一些。一個(gè)是雙線程的處理機(jī)制問(wèn)題，另一個(gè)是頁(yè)面棧之間交互問(wèn)題。

注: 筆者目前只需要開(kāi)發(fā)微信小程序，為了在小程序頁(yè)面中可以使用 properties behaviors observers 等新功能，已經(jīng)使用 Component 構(gòu)造器來(lái)構(gòu)造頁(yè)面。具體可以參考微信小程序 Component 構(gòu)造器。如果你也沒(méi)有多端開(kāi)發(fā)的需求，建議嘗試使用，可以得到不錯(cuò)的體驗(yàn)。

 

性能優(yōu)化類(lèi)

對(duì)于小程序在頁(yè)面中點(diǎn)擊觸發(fā) wx.navigateTo 跳轉(zhuǎn)其他頁(yè)面，中間會(huì)有一段時(shí)間的空白加載期(對(duì)于分包出去的頁(yè)面，空白期則會(huì)更長(zhǎng))，但是這是小程序內(nèi)部機(jī)制，沒(méi)有辦法進(jìn)行優(yōu)化。我們只能眼睜睜的等待這段沒(méi)有意思的空白期過(guò)去。

當(dāng)考慮到跳轉(zhuǎn)頁(yè)面后的第一件事情便是取數(shù)邏輯，那么我們是否能夠進(jìn)行優(yōu)化呢？答案是肯定的。我們沒(méi)有辦法直接在當(dāng)前頁(yè)面取得數(shù)據(jù)之后再進(jìn)行跳轉(zhuǎn)操作(這樣操作更不好)，但是我們卻可以利用緩存當(dāng)前的請(qǐng)求，詳情可以參考我之前的博客文章 ——Promise對(duì)象 3 種妙用。

代碼如下:

const promiseCache = new Map()

export function setCachePromise(key, promise) {
  promiseCache.set(key, promise)
}

export function getCachePromise(key) {
  // 根據(jù)key獲取當(dāng)前的數(shù)據(jù)  
  const promise = promiseCache.get(key)
  // 用完刪除，目前只做中轉(zhuǎn)用途，也可以添加其他用途
  promiseCache.delete(key)
  return promise  
}

做一份全局的 Map,然后利用 Map 緩存 promise 對(duì)象，在跳轉(zhuǎn)之前代碼為:

// 導(dǎo)入 setCachePromise 函數(shù)

Component({
  methods: {
    getBookData(id) {
      const promise = // promise 請(qǐng)求
        setCachePromise(`xxx:${id}`, promise)      
    },  
    handleBookDetailShow(e) {
      const id = e.detail
      this.getBookData(id)
       wx.navigateTo({url: `xx/xx/x?id=${id}`})
    }
  }
})

而跳轉(zhuǎn)之后的代碼也如下所示:

// 導(dǎo)入 getCachePromise 函數(shù)

Component({
    properties: {
      id: Number  
    },
    lifetimes: {
      attached () {
        const id = this.data.id  
        // 取得全局緩存的promise
        const bookPromise = getCachePromise(`xxx:${id}`)
        bookPromise.then((res) => {
          // 業(yè)務(wù)處理
        }).catch(error => {
          // 錯(cuò)誤處理  
        })
      }
    },
    methods: {
      getBook() {
        // 獲取數(shù)據(jù)，以便于 錯(cuò)誤處理 上拉刷新 等操作  
      }  
    }
})

如此便可以同時(shí)處理取數(shù)和頁(yè)面加載的邏輯，當(dāng)然，這個(gè)對(duì)于頁(yè)面有耦合性，不利于后續(xù)的刪除與修改。但考慮如果僅僅加在分包跳轉(zhuǎn)之間可能會(huì)有不錯(cuò)的效果。

想要無(wú)侵入式，可以進(jìn)一步學(xué)習(xí)研究 微信小程序之提高應(yīng)用速度小技巧 以及 wxpage 框架，同時(shí)考慮到無(wú)論是 ToC 還是 ToC 用戶，都有可能存在硬件以及網(wǎng)絡(luò)環(huán)境等問(wèn)題，該優(yōu)化還是非常值得的。

當(dāng)然微信小程序?yàn)榱藴p少冷啟動(dòng)時(shí)間，提供了周期性更新 數(shù)據(jù)預(yù)拉取 功能。

注: 上面的 promiseCache 只作為中轉(zhuǎn)的用途，不作為緩存的用途，如果你考慮添加緩存，可以參考我之前的博客文章—— 前端 api 請(qǐng)求緩存方案。

 

通知類(lèi)

如果是 pc 端中進(jìn)行交互，對(duì)于數(shù)據(jù)的 CRUD。例如在詳情頁(yè)面進(jìn)行了數(shù)據(jù)的修改和刪除，返回列表時(shí)候就直接調(diào)取之前存儲(chǔ)的列表查詢條件再次查詢即可，而對(duì)于移動(dòng)端這種下拉滾動(dòng)的設(shè)計(jì)，就沒(méi)有辦法直接調(diào)用之前的查詢條件來(lái)進(jìn)行搜索。

如果從列表頁(yè)面進(jìn)入詳情頁(yè)面后，在詳情頁(yè)面只會(huì)進(jìn)行添加或者修改操作。然后返回列表頁(yè)面。此時(shí)可以提示用戶數(shù)據(jù)已經(jīng)進(jìn)行了修改，請(qǐng)用戶自行決定是否進(jìn)行刷新操作。

如在編輯頁(yè)面修改了數(shù)據(jù):

const app = getApp()

component({
  methods: {
    async handleSave() {
      //...
      app.globalData.xxxChanged = true
      //...  
    }
  }
})

列表界面:

const app = getApp()

component({
  pageLifetimes: {
    show() {
      this.confirmThenRefresh()
    }    
  },
  methods: {
    confirmThenRefresh() {
      // 檢查 globalData，如果當(dāng)前沒(méi)有進(jìn)行修改，直接返回 
      if(!app.globalData.xxxChanged) return
      wx.showModal({
        // ...
        complete: () => {
          // 無(wú)論確認(rèn)刷新與否，都把數(shù)據(jù)置為 false 
          app.globalData.xxxChanged = false  
        }  
      })  
    }
  }  
})

當(dāng)然了，我們也可以利用 wx.setStorage 或者 getCurrentPage 獲取前面的頁(yè)面 setData 來(lái)進(jìn)行數(shù)據(jù)通知,以便用戶進(jìn)行頁(yè)面刷新。

電腦刺繡繡花廠 http://www.szhdn.com 廣州品牌設(shè)計(jì)公司https://www.houdianzi.com

訂閱發(fā)布類(lèi)

如果僅僅只涉及到修改數(shù)據(jù)的前提下，我們可以選擇讓用戶進(jìn)行刷新操作，但是如果針對(duì)于刪除操作而言，如果用戶選擇不進(jìn)行刷新，然后用戶又不小心點(diǎn)擊到了已經(jīng)被刪除的數(shù)據(jù)，就會(huì)發(fā)生錯(cuò)誤。所以如果有刪除的需求，我們最好在返回列表頁(yè)面前就進(jìn)行列表的修改，以免造成錯(cuò)誤。

mitt

github 上有很多的 pub/sub 開(kāi)源庫(kù)，如果沒(méi)有什么特定的需求，找到代碼量最少的就是 mitt 這個(gè)庫(kù)了,作者是喜歡開(kāi)發(fā)微型庫(kù)的 developit 大佬,著名的 preact 也是出于這位大佬之手。 這里就不做過(guò)多的介紹，非常簡(jiǎn)單。大家可能都能看明白，代碼如下(除去 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個(gè)方法，on emit以及 off。

只要在多個(gè)頁(yè)面導(dǎo)入 生成的 mitt() 函數(shù)生成的對(duì)象即可(或者直接放入 app.globalData 中也可)。

Component({
  lifetimes: {
    attached: function() {
      // 頁(yè)面創(chuàng)建時(shí)執(zhí)行
      const changeData = http://www.wxapp-union.com/(type, data) => {
        // 處理傳遞過(guò)來(lái)的類(lèi)型與數(shù)據(jù)
      }
      this._changed = changeData
      bus.on('xxxchanged', this._changed)
    },
    detached: function() {
      // 頁(yè)面銷(xiāo)毀時(shí)執(zhí)行
      bus.off('xxxchanged', this._changed)
    }
  }
})