ミニプログラム間のクロスページインタラクションの機能と方法

昨年末、WeChat ミニ プログラムのサブパッケージ サイズは 1,200 万に達しました。これは、ミニ プログラムが開発者に徐々に大きな権限を与えていることを示す一方で、また、一部のミニ プログラムでは、8M のサイズではもはや十分ではないことを示しています。今年はto Bミニプログラムアプリケーションも開発中です。ここでは、ページをまたがる対話のシナリオをいくつか示します。

B サイド アプリケーションのビジネス ニーズの場合、小規模なプログラム開発の複雑さは Web 開発よりも比較的複雑です。 1 つはデュアル スレッド処理メカニズムの問題であり、もう 1 つはページ スタック間の相互作用の問題です。

注: 現在、作成者は WeChat アプレットを開発するだけで済みます。アプレット ページでプロパティ動作オブザーバーなどの新しい関数を使用するために、コンポーネント コンストラクターを使用してページを構築しています。詳細については、WeChat アプレット コンポーネント コンストラクターを参照してください。マルチターミナル開発の必要がない場合は、試して良い経験を積むことをお勧めします。

パフォーマンス最適化カテゴリ

---

小規模プログラムの場合は、ページをクリックして wx.navigateTo をトリガーし、他のページにジャンプします。途中の空白期間 読み込み期間（下請けページの場合、空白期間は長くなります）ですが、これはミニプログラムの内部メカニズムであり、最適化する方法はありません。この面白くない期間が過ぎるのを待つしかありません。

ページに飛んで最初に数値を取得するロジックを考えると最適化できないでしょうか？答えは「はい」です。現在のページのデータを取得した直後にジャンプ操作を実行する方法はありません (この操作はさらに悪いです) が、現在のリクエストのキャッシュを使用できます。詳細については、以前のブログ記事 - 3 の素晴らしい記事を参照してください。 Promise オブジェクトの使用。

コードは次のとおりです:

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  
}

グローバル マップを作成し、そのマップを使用して 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() {
        // 获取数据，以便于 错误处理 上拉刷新 等操作  
      }  
    }
})

このようにして、フェッチとページのロードのロジックを同時に処理できます。その後の削除や変更につながります。ただし、下請けのジャンプの間に追加するだけであれば、良い効果が得られる可能性があることを考慮してください。

煩わしくない場合は、WeChat ミニ プログラムのアプリケーション速度を向上させるためのヒントと wxpage フレームワークをさらに学習することができます。 ToC ユーザーの場合、ハードウェアやネットワーク環境に問題がある可能性がありますが、この最適化は非常に価値があります。

もちろん、コールド スタート時間を短縮するために、WeChat アプレットは定期的な更新データの事前取得機能を提供します。

注: 上記の PromiseCache は転送にのみ使用され、キャッシュには使用されません。キャッシュの追加を検討している場合は、私の以前のブログ記事「フロントエンド API リクエスト キャッシュ ソリューション」を参照してください。

通知クラス

---

対話が PC 側で行われる場合、データの CRUD。たとえば、詳細ページでデータを変更または削除した場合、以前に保存したリストのクエリ条件を直接呼び出して、リストに戻ったときに再度クエリを実行できますが、モバイル端末のドロップダウン スクロールのデザインでは、そのような機能はありません。以前のクエリ条件を直接呼び出して検索する方法。

一覧ページから詳細ページに入ると、詳細ページでは追加・変更のみの操作となります。その後、リストページに戻ります。このとき、データが変更されたことをユーザーに通知することができ、ユーザーはデータを更新するかどうかを決定できます。

編集ページでデータが変更された場合:

const app = getApp()

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

List インターフェース:

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 オープン ソース ライブラリがあります。特定の要件がない場合は、量が最も少ないものを使用します。このライブラリの作者は、マイクロ ライブラリの開発が好きな開発者で、有名な preact もこの人が作成したものです。ここではあまり詳しく説明しませんが、非常に簡単です。コードが次のとおりであることは誰でも理解できると思います (フロー ツールのチェックを除く):

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

メソッドは on Emit と Off の 3 つだけです。

生成された 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 一下。
博客地址

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

以上がミニプログラム間のクロスページインタラクションの機能と方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。