ps.基于小程序在微信中的易傳播性, 為了鼓勵(lì)用戶去傳播分享一般還會(huì)提供邀請(qǐng)獎(jiǎng)勵(lì)機(jī)制。但是微信這邊又會(huì)對(duì)誘導(dǎo)分享進(jìn)行和諧處理。視情況慎用。（本文會(huì)在例子上加上該功能）

看到這，是不是覺(jué)得頭都大了，就一個(gè)小小的登錄功能坑這么多。 年輕的我瑟瑟發(fā)抖~~~。慢慢開(kāi)始填吧。先上登錄代碼

/* utils/api.js  自定義網(wǎng)絡(luò)請(qǐng)求 */
...
function login() {
  return new Promise((resolve, reject) => {
    // 先調(diào)用 wx.login 獲取到 code
    wx.login({
      success: res => {
        // 再調(diào)用 wx.getUserInfo 獲取到用戶的一些信息 （一些基本信息，以及生成UnionID 所用到的信息 比如 rawData, signature, encryptedData, iv）
        wx.getUserInfo({
          // 若獲取不到用戶信息 （最大可能是用戶授權(quán)不允許，也有可能是網(wǎng)絡(luò)請(qǐng)求失敗，但該情況很少）
          fail: (e) => {
            reject(e)
          },
          success: ({ rawData, signature, encryptedData, iv }) => {
            let param = {
              code: res.code,
              rawData,
              signature,
              encryptedData,
              iv
            }
            // 若有邀請(qǐng)ID
            try {
              let invite = wx.getStorageSync('invite')
              if (invite) {
                param.invite = invite
              }
            } catch (e) {
            }
            // 登錄操作
            http({
              url: 'login',
              params: param,
              method: 'post'
            }).then(res => {
              // 該為我們后端的邏輯 若code > 0為登錄成功，其他情況皆為異常 （視自身情況而定）
              if (res.code > 0) {
                // 保存用戶信息
                 wx.setStorage({
                  key: 'userinfo',
                  data: res.data
                })
                wx.setStorage({
                  key: "token",
                  data: res.message,
                  success: () => {
                    resolve(res)
                  }
                })
              } else {
                reject(res)
              }
            }).catch(error => reject(error))
          }
        })
      }
    })
  })
}
...

授權(quán)問(wèn)題

根據(jù)上面的代碼，可以很清楚的看到，若用戶在登錄的時(shí)候不允許小程序獲取他的用戶信息之后才能繼續(xù)。若用戶在這個(gè)時(shí)候點(diǎn)拒絕了呢, 會(huì)怎么樣？ 一片空白!~~ What’s the fuck! 怎么什么都沒(méi)有！垃圾破小程序~~ 冷靜點(diǎn)的用戶也會(huì)百臉懵逼狀。我是誰(shuí)？我該怎么辦？ 也許你會(huì)覺(jué)得，用戶點(diǎn)允許就好了啊，怎么會(huì)這么笨，這種用戶肯定不會(huì)多之類的話。我在我們小程序中加了統(tǒng)計(jì)大約有 20% 的用戶點(diǎn)了拒絕, 如果后續(xù)我們沒(méi)有做任何引導(dǎo)的話，這 20% 的用戶就會(huì)永遠(yuǎn)失去。這個(gè)后果我們完全不能接受。

經(jīng)過(guò)我們的小組研究與討論，給出了一下的一套方案。

/* index.js */
// 若有用戶信息存在則繼續(xù)
Page({
  onLoad () {
    wx.getStorage({
      key: 'userinfo',
      success: (res) => {
        this.setUserinfo(res)
      },
      fail: (res) => {
        api.login().then((res) => {
          this.setUserinfo(res)
        }).catch(e => {
          if (e.errMsg && e.errMsg === 'getUserInfo:fail auth deny') {
            this.setData({
              isauth: false
            })
          }
        })
      }
    })
  },
  toSetting() {
    wx.openSetting({
      success: (res) => {
        this.setData({
          isauth: res.authSetting['scope.userInfo']
        })
        if (res.authSetting['scope.userInfo']) {
          api.login().then((res) => {
            this.setUserinfo(res)
          })
        }
      }
    })
  }
})
// setUserinfo 就是對(duì)用戶信息做一下處理 不具體展開(kāi)了

/* index.wxml */
<view class="unauth" wx:if="{{!isauth}}">
   <image class="unauth-img" src="../../images/auth.png"></image> 
  <text class="unauth-text">檢查到您沒(méi)打開(kāi)授權(quán)</text>
  <button class="color-button unauth-button" bindtap="toSetting">去設(shè)置</button>
</view>
<view class="container" wx:else>
...
</view>

token 失效問(wèn)題

登錄獲取到的 token 是有時(shí)效的，失效過(guò)了會(huì)怎么樣 ? 如果后臺(tái)小伙伴嚴(yán)格按照 REST API 規(guī)范設(shè)計(jì)接口 API 的話，他會(huì)給我們返回一個(gè)錯(cuò)了 http code 為 401。（常見(jiàn)的Http Code以及相關(guān)代碼的意義本文就不做展開(kāi)了，不了解的小伙伴可以自行 google 百度一下。）401 之后我們就需要對(duì)該Code進(jìn)行相應(yīng)的處理?？梢匀缦逻@么寫

api.get('list').then(res => {
  /* do something */
}).catch(e => {
  if (res.statusCode === 401) {
    api.login().then(() => {
      api.get('list').then(res => {
        /* do something */
      })
    })
  }
})

看起來(lái)沒(méi)什么問(wèn)題，也完成需求了。但是會(huì)發(fā)現(xiàn)這有很大的問(wèn)題。

1. 每個(gè)請(qǐng)求都需要加 401 的判斷，項(xiàng)目大起來(lái) 這塊的代碼量是非?？植赖?/li>
2. 接口返回的之后的處理 /* do something */ 也是重復(fù)的 （當(dāng)然把這整塊內(nèi)容都提取出來(lái)，這里就調(diào)用也行。不過(guò)還是想把調(diào)用這邊也省略掉 ^-^ ）

屢一下我們要實(shí)現(xiàn)的目標(biāo)。

1. 需要在每個(gè)請(qǐng)求后面都加一個(gè) 401 的判斷
2. 若未授權(quán) 則進(jìn)行重新登錄
3. 重新登錄之后繼續(xù)前一個(gè)請(qǐng)求
4. 將該請(qǐng)求結(jié)果返回到第一個(gè)請(qǐng)求的結(jié)果里去（實(shí)現(xiàn)無(wú)感知重新登錄獲取信息）

這個(gè)體現(xiàn)出把自己封裝一個(gè)網(wǎng)絡(luò)請(qǐng)求的好處, 我們可以直接改寫 api.js 中的 http 方法里對(duì) error 的處理就好。上代碼：

const http = ({ url = '', params = {}, ...other} = {}) => {
  wx.showLoading({
    title: '加載中...'
  })
  let time = Date.now()
  console.log(`開(kāi)始:${time}`)
  return new Promise((resolve, reject) => {
    wx.request({
      url: getUrl(url),
      data: params,
      header: getHeader(),
      ...other,
      complete: (res) => {
        wx.hideLoading()
        console.log(`耗時(shí):${Date.now() - time}`)
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data)
        } else if (res.statusCode === 401) {
          // 401 為鑒權(quán)失敗 很大可能是token過(guò)期
          // 重新登錄 并且重復(fù)請(qǐng)求
          login().then(res => {
            http({ url, params, ...other }).then(res => {
              resolve(res)
            })
          })
        } else {
          reject(res)
        }
      }
    })
  })
}

小結(jié)

網(wǎng)絡(luò)請(qǐng)求這塊，算目前開(kāi)發(fā)項(xiàng)目中必不可少的一塊。但是例如 小程序，vue, react, weex 等其實(shí)都有一套自己的或者自己推薦的一套API以及相應(yīng)的寫法。沒(méi)一個(gè)都按照他推薦的來(lái)寫，其實(shí)挺蛋疼的，用著很不爽。把他們的API封裝一下，暴露出來(lái)統(tǒng)一的API, 給自己用或者尤其是給自己團(tuán)隊(duì)的小伙伴用就比較方便，少了很多重復(fù)學(xué)習(xí)成本，并且因?yàn)榻y(tǒng)一的API帶來(lái)的統(tǒng)一的格式也是很大的一個(gè)好處。

說(shuō)到小程序要弄清楚的東西不少，有些坑我還在摸索怎么處理。比如小程序的組件化，全局變量的使用（什么值可以放在app.js里），html標(biāo)簽的轉(zhuǎn)換等，后續(xù)弄透了我會(huì)再出來(lái)獻(xiàn)丑的。