Die Funktionen und Methoden der seitenübergreifenden Interaktion zwischen Miniprogrammen

Ende letzten Jahres hat die Unterpaketgröße der WeChat-Miniprogramme 12 Millionen erreicht. Dies zeigt einerseits, dass Miniprogramme den Entwicklern nach und nach größere Berechtigungen gewährt haben zeigt, dass für einige Miniprogramme eine 8M-Größe nicht mehr ausreicht. Ich entwickle dieses Jahr auch eine Mini-Programmanwendung für B. Hier sind einige seitenübergreifende Interaktionsszenarien.

Für die Geschäftsanforderungen von B-Seitenanwendungen ist die Komplexität der Entwicklung kleiner Programme relativ komplizierter als die der Webentwicklung. Das eine ist das Problem des Dual-Thread-Verarbeitungsmechanismus und das andere ist das Interaktionsproblem zwischen Seitenstapeln.

Hinweis: Der Autor muss derzeit nur das WeChat-Applet entwickeln, um neue Funktionen wie Eigenschaften-Verhaltensbeobachter auf der Applet-Seite zu verwenden. Der Komponentenkonstruktor wurde zum Erstellen der Seite verwendet. Einzelheiten finden Sie im WeChat-Applet-Komponentenkonstruktor. Wenn Sie keine Multi-Terminal-Entwicklung benötigen, empfehlen wir Ihnen, es auszuprobieren und eine gute Erfahrung zu machen.

Leistungsoptimierungskategorie

---

Klicken Sie bei kleinen Programmen auf die Seite, um wx.navigateTo auszulösen, um zu anderen Seiten zu springen Der Leerraumzeitraum in der Mitte ist der Ladezeitraum (bei untergeordneten Seiten ist der Leerraumzeitraum länger), aber dies ist der interne Mechanismus des Miniprogramms und es gibt keine Möglichkeit, ihn zu optimieren. Wir können nur darauf warten, dass diese uninteressante Zeit vorübergeht.

Wenn man bedenkt, dass das erste, was nach dem Springen zur Seite die Logik zum Abrufen der Nummer ist, können wir sie dann optimieren? Die Antwort ist ja. Wir haben keine Möglichkeit, die Daten auf der aktuellen Seite direkt abzurufen und dann den Sprungvorgang auszuführen (dieser Vorgang ist noch schlimmer), aber wir können den Cache der aktuellen Anfrage verwenden. Weitere Informationen finden Sie in meinem vorherigen Blog-Artikel - 3 wunderbare Verwendungsmöglichkeiten von Promise-Objekten.

Der Code lautet wie folgt:

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  
}

Erstellen Sie eine globale Karte und verwenden Sie dann die Karte, um das Versprechensobjekt zwischenzuspeichern. Vor dem Springen lautet der Code:

// 导入 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}`})
    }
  }
})

und springen Der nachfolgende Code lautet ebenfalls wie folgt:

// 导入 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() {
        // 获取数据，以便于 错误处理 上拉刷新 等操作  
      }  
    }
})

Auf diese Weise kann die Logik des Abrufens und Ladens der Seite gleichzeitig verarbeitet werden. Dies ist natürlich nicht an die Seite gekoppelt förderlich für eine spätere Löschung und Änderung. Bedenken Sie jedoch, dass es eine gute Wirkung haben kann, wenn es nur zwischen Sprüngen bei der Vergabe von Unteraufträgen hinzugefügt wird.

Wenn Sie nicht aufdringlich sein möchten, können Sie die Tipps zur Verbesserung der Anwendungsgeschwindigkeit von WeChat Mini-Programmen und dem WXPage-Framework weiter studieren. Berücksichtigen Sie dabei, dass sowohl ToC- als auch ToC-Benutzer dies tun können Hardware- und Netzwerkumgebungsprobleme. Diese Optimierung ist immer noch sehr lohnenswert.

Um die Kaltstartzeit zu verkürzen, bietet das WeChat-Applet natürlich eine regelmäßige Vorabruffunktion für Aktualisierungsdaten.

Hinweis: Der obige PromiseCache wird nur für die Übertragung verwendet, nicht für das Caching. Wenn Sie das Hinzufügen eines Caches in Betracht ziehen, können Sie sich auf meinen vorherigen Blog-Artikel „Front-End-API-Request-Caching-Lösung“ beziehen.

Benachrichtigungsklasse

---

Bei Interaktion auf der PC-Seite CRUD der Daten. Wenn Sie beispielsweise Daten auf der Detailseite ändern oder löschen, können Sie bei der Rückkehr zur Liste direkt die zuvor gespeicherten Listenabfragebedingungen aufrufen und erneut abfragen. Für das Dropdown-Bildlaufdesign des mobilen Endgeräts ist dies jedoch der Fall Es gibt keine Möglichkeit, die vorherigen Abfragebedingungen direkt zur Suche aufzurufen.

Wenn Sie die Detailseite über die Listenseite aufrufen, werden auf der Detailseite nur Hinzufügungs- oder Änderungsvorgänge ausgeführt. Kehren Sie dann zur Listenseite zurück. Zu diesem Zeitpunkt kann der Benutzer darüber informiert werden, dass die Daten geändert wurden, und der Benutzer kann entscheiden, ob die Daten aktualisiert werden sollen.

Wenn die Daten auf der Bearbeitungsseite geändert werden:

const app = getApp()

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

Listenschnittstelle:

const app = getApp()

component({
  pageLifetimes: {
    show() {
      this.confirmThenRefresh()
    }    
  },
  methods: {
    confirmThenRefresh() {
      // 检查 globalData，如果当前没有进行修改，直接返回 
      if(!app.globalData.xxxChanged) return
      wx.showModal({
        // ...
        complete: () => {
          // 无论确认刷新与否，都把数据置为 false 
          app.globalData.xxxChanged = false  
        }  
      })  
    }
  }  
})

Natürlich können wir zum Abrufen auch wx.setStorage oder getCurrentPage verwenden Setzen Sie Data auf der vorherigen Seite, um eine Datenbenachrichtigung durchzuführen, damit Benutzer die Seite aktualisieren können.

Abonnement-Veröffentlichungsklasse

---

Wenn es nur um die Änderung von Daten geht, können wir den Benutzer einen Aktualisierungsvorgang durchführen lassen, wenn es sich jedoch um einen Löschvorgang handelt Wenn sich der Benutzer beispielsweise gegen die Aktualisierung entscheidet und dann versehentlich auf gelöschte Daten klickt, tritt ein Fehler auf. Wenn ein Löschvorgang erforderlich ist, ist es daher am besten, die Liste zu ändern, bevor Sie zur Listenseite zurückkehren, um Fehler zu vermeiden.

mitt

Es gibt viele Pub/Sub-Open-Source-Bibliotheken auf Github, wenn es keine besonderen Anforderungen gibt, die mit der geringsten Menge Der Code ist mitt. Der Autor dieser Bibliothek ist ein Entwickler, der gerne Mikrobibliotheken entwickelt. Der berühmte Preact wurde ebenfalls von diesem Typ erstellt. Ich werde hier nicht zu sehr auf die Einführung eingehen, es ist sehr einfach. Jeder kann vielleicht verstehen, dass der Code wie folgt lautet (mit Ausnahme der Flow-Tool-Prüfung):

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); });
    }
  };
}

Es gibt nur 3 Methoden, On Emit und Off.

Importieren Sie einfach die von der generierten mitt()-Funktion generierten Objekte auf mehreren Seiten (oder fügen Sie sie direkt in app.globalData ein).

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 一下。
博客地址

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

Das obige ist der detaillierte Inhalt vonDie Funktionen und Methoden der seitenübergreifenden Interaktion zwischen Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!