Amazing 的小程序受權登陸設計

在小程序開發中，受權登陸是最多見的操做，由於不少業務是要求用戶登陸以後才能進行操做，那麼這個流程我是怎麼設計的呢，下面我就給你們嘮一嘮。

由於受權操做屬於比較基本的功能，並且公共需求比較高，因而我把它放到了 app.js 中。在須要的地方，經過 getApp() 函數拿到 app 實例進行調用便可，使用上仍是比較便利的。

下面是 app.js 中核心的代碼片斷：

{
  /** * 封裝一個函數統一獲取用戶信息，避免直接操做 globalData */
  getUserInfo() {
    return this.globalData.userInfo;
  },
  /** * 判斷是否登陸 */
  checkAuth() {
    return new Promise((resolve, reject) => {
      const userInfo = this.getUserInfo();
      userInfo ? resolve(userInfo) : reject('未登陸');
    });
  },
  /** * 受權登陸 * 我爲了簡單直接用 wx.getUserProfile 進行模擬受權 * 實際的業務狀況可能還須要彈出個面板或者跳轉到受權頁面之類的 */
  auth() {
    return new Promise((resolve, reject) => {
      wx.getUserProfile({
        desc: '受權登陸',
        success: resolve,
        fail: reject,
      })
    }).then(({ userInfo }) => {
      this.globalData.userInfo = userInfo;
    });
  },
  /** * 保證必定是登陸的狀態 */
  authed() {
    return this.checkAuth().catch(() => {
      return this.auth();
    });
  },
  /** * 退出登陸 */
  logoff() {
    return new Promise((resolve) => {
      this.globalData.userInfo = null;
      resolve();
    });
  },
  globalData: {
    userInfo: null
  }
}
複製代碼

主要的邏輯函數都用流行的 Promise 包裹，避免回調嵌套，組合使用特方便。在實際的業務中我會這樣去使用：

{
  // tap事件處理
  async clickHandler() {
    const app = getApp();
    // 點擊以後，經過 authed() 函數保證用戶必定是登陸狀態
    // 通 Promise 鏈，能夠很容易的實現受權以後，自動執行後續的流程
    app.authed().then(() => {
      // 身份校驗經過後調用核心的邏輯 actAction
      return this.actAction();
    });
  },
  async actAction() {
    // todo 動做響應
    console.log('動做響應');
  }
}
複製代碼

經過 js 的方式，這樣沒問題，但我想 Amazing 一下：我能不能在 js 中不調用 authed() 也能實現同樣的邏輯 。通過我 3S 鐘的思考以後，一激動就拔下了名叫 Tom 的這根頭髮：

對於有點擊行爲的元素，我能夠設計一個 Auth 組件，專門用來作登陸操做，而後將這個組件嵌套在須要有點擊行爲的元素中。

好比:

<button class="submit-btn" bindtap="actAction">點擊<Auth/></button>
複製代碼

讓這個 Auth 像玻璃同樣填充滿父容器，阻止掉 Auth 組件冒泡的 tap 事件。當點擊的時候實際上會先觸發 Auth 組件的 tap 事件，父容器的 tap 事件並不會觸發。在 Auth 組件中完成受權後，再拋出自定義的 tap 事件，父容器的 tap 事件觸發，actAction 函數調用成功!很是完美

因而在我飛快的手速下，核心的代碼也逐漸清晰了起來，鍵盤彷佛也有了點兒糊味，哦！原來是 Tom 燒焦了～

Auth 組件的核心代碼以下：

模版：

<-- catchtap 特別重要，這樣能夠捕獲到點擊，而且阻止冒泡給外層 -->
<view class="layer" catchtap="authCheckHandler" style="z-index:{{zIndex}};"></view>
複製代碼

樣式表：

.layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
複製代碼

JS 部分：

Component({
  properties: {
    zIndex: {
      type: Number,
      value: 10
    }
  },
  methods: {
    authCheckHandler() {
      const app = getApp();
      app.authed().then(() => {
        this.successHandler();
      });
    },
    successHandler() {
      // 觸發 tap 事件
      this.triggerEvent('tap', {}, {
        bubbles: true, // @IMPORTANT 這個地方重要的配置，容許自定義事件冒泡
      });
    },
    closeHandler() {
      // 關閉受權彈窗
      this.setData({
        visible: false,
      });
    }
  },
});
複製代碼

詳細的代碼我放在 wx-auth-demo 這個項目中，感興趣的同窗能夠下載體驗一下。核心的點就是經過 dom 嵌套 + 事件冒泡 ，來替換 js 邏輯中的嵌套，接下來我仍是要給本身鼓會兒掌～