WeChat ミニ プログラム API のカプセル化

今回は WeChat ミニ プログラム API のカプセル化について説明します。WeChat ミニ プログラム API のカプセル化に関する 注意事項 は何ですか? 以下に実際のケースを見てみましょう。

約束の理由

WeChat アプレット API は object パラメーター コールバック モードを使用します。これにより、簡単にコールバック 地獄が発生し、コードの読み取り、判断、変更、デバッグが困難になる可能性があります。

WeChat アプレット API の例

// 获取用户信息
  wx.getSetting({
   success: res => {
    if (res.authSetting['scope.userInfo']) {
     // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
     wx.getUserInfo({
      success: res => {
       // 可以将 res 发送给后台解码出 unionId
       this.globalData.userInfo = res.userInfo
      }
     })
    }
   }
  })

2つの層がある場合、コードは非常にぎこちないことがわかります

アプレットを約束する

アプレットAPIを約束できるパブリック関数を書きます

function promisify (method, options = {}) {
 return new Promise((resolve, reject) => {
  // 将options对象赋值 然后再传给下面调用的方法中
  options.success = resolve
  options.fail = err => {
   reject(err)
  }
  wx[method](options)
 })
}

例を使用してください

パス 追加のパラメーターはオブジェクトの分割を通じて渡されます

promisify('getUserInfo')
 .then((res) => console.log(res))
 .catch((err) => {console.error(err)})
promisify('navigateTo', { url })

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

円弧状のドラッグプログレスバーを実装する手順の詳細な説明

angular6.0でコンポーネントの遅延読み込み機能を実装する(コード付き)

以上がWeChat ミニ プログラム API のカプセル化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。