微信和支付寶中的一些常用方法封裝

最近做了同一個樣子的小程式的支付寶版本，現在如果想想是開發兩次的話心裡應該是很難受的。去年11月12月份左右開發了兩個微信小程式是一個在超市買商品的，一個用戶版本，一個商戶版本的。我們團隊看到了uniapp這個東西，然後用這個東西寫了一點demo，然後就決定採納這個東西開發微信小程式了。這個開發體 ...

　　最近做了同一個樣子的小程式的支付寶版本，現在如果想想是開發兩次的話心裡應該是很難受的。

　　去年11月12月份左右開發了兩個微信小程式是一個在超市買商品的，一個用戶版本，一個商戶版本的。我們團隊看到了uniapp這個東西，然後用這個東西寫了一點demo，然後就決定採納這個東西開發微信小程式了。這個開發體驗真的是讓人揪心，因為編譯起來太慢了，就是這邊保存完代碼，你如果想去微信小程式開發工具中看效果的話要等好久，然後測試一點點東西有時候uniapp這邊代保存了，但是微信開發工具中的代碼不動，還需要重新編譯，而且當時的uniapp的開發還沒有現在成熟，因為已經開發了很多個版本了，不可能在轉到原生的開發了，所以在罵聲中進行著開發。到後來都沒有人想維護這個東西了。

　　直到上周四開始開發支付寶版本的，因為uniapp是可以跨平臺的，看了一些文檔就開始搞了，編譯到支付寶之後發現佈局錯亂掉了，心裡感覺難道還需要重新開發一遍嗎。後來耐下心了看，發現很多問題都只是圖片的問題，然後使用文檔中的條件編譯，花了一天的時間把佈局給搞定了，之後就是一些js代碼的相容。因為他們兩個是很類似的，支付寶上面的和微信上面的文檔什麼的都是簡直雷同。所以把一些經常使用的東西做了一個總結。

　　小程式中主要是獲取授權的方法，獲取用戶信息，上傳用戶信息，版本更新升級、支付方法不同。

　　uniapp的跨平臺不是那種寫很多 if else 去判斷不同的平臺，然後運行不同的代碼，他是根據同一套代碼，可以選擇分別把每個平臺的代碼編譯到那個平臺上面去運行，這個我是真的發現了跨平臺確實是好做。

　　廢話不多說了，就寫一點最基本的一些方法總結一下。

　　現在隨著Promise的流行吧，非同步方法都可以封裝成為Promise對象，然後就很容易對一些方法進行封裝了。

因為我做了相容，最開始做的是微信的，所以名稱和返回值都優先考慮使用了微信的名字，導致頁面中的代碼改動會很少。

1.獲取登錄的code

微信的獲取

/**
 * 獲取微信code碼
 * return {Promise Function} code
 *     成功 {code:'', status: 200}
 *     失敗 {status: 400, err}
 */
getWxCode: () => {
    return new Promise((resolve, reject) => {
        wx.login({
            success(res) {
                resolve({
                    status: 200,
                    code: res.code
                });
            },
            fail(err) {
                resolve({
                    status: 400,
                    err: err
                });
            }
        })
    })
},

支付寶的獲取

/**
* 獲取支付寶code碼
* return {Promise Function} code
*     成功 {code:'', status: 200}
*     失敗 {status: 400, err}
*/
getWxCode: () => {
    return new Promise((resolve, reject) => {
        my.getAuthCode({
            scopes: 'auth_base', // auth_base  auth_user   auth_zhimaauth_zhima
            success(res) {
                console.log('獲取成功的回調函數');
                console.log(res)
                resolve({
                    status: 200,
                    code: res.authCode
                });
            },
            fail(err) {
                console.log('獲取失敗的回調');
                console.log(err);
                resolve({
                    status: 400,
                    err: err
                });
            }
        })
    })
},

2.授權後獲取用戶信息

/**
 * 獲取目前授權狀態信息 這裡只判斷狀態碼如果不是 200 就是沒有拿到信息就好
 * 
 * 檢測用戶是否授權個人用戶信息
 * 如果有授權返回中文的json格式個人信息
 * 如果無授權或者失敗的幾種情況
 *     {status: 200, result: res.userInfo, msg: '獲取用戶信息成功'}
 *     {status: 400, result: false, msg: '調取配置信息函數失敗'}
 *     {status: 400, result: false, msg: '沒有授權'}
 *     {status: 402, result: false, msg: '獲取用戶信息函數失敗'}
 */
checkIsAuthUserInfo() {
  return new Promise((resolve, reject) => {
    wx.getSetting({
      success(res) {
        // console.log('成功');
        if (res.authSetting['scope.userInfo']) {
          // 授權信息
          wx.getUserInfo({
            lang: 'zh_CN',
            success(res) {
              // 授權了 並且調用成功
              resolve({ status: 200, result: res.userInfo, msg: '獲取用戶信息成功' });
            },
            fail(err) {
              // 授權了 但是調用方法失敗了
              // console.log(err);
              resolve({ status: 402, result: false, msg: '獲取用戶信息函數失敗' });
            }
          })
        } else {
          // 未授權
          resolve({ status: 400, result: false, msg: '沒有授權' });
        }
      },
      fail(err) {
        // console.log("調取配置信息方法失敗")
        resolve({ status: 400, result: false, msg: '調取配置信息函數失敗' });
      }
    })
  })
}

支付寶獲取用戶信息

支付寶的比較麻煩，因為必須要真機調試才可以獲取。

/**
     * 獲取目前授權狀態信息 這裡只判斷狀態碼如果不是 200 就是沒有拿到信息就好
     * 
     * 檢測用戶是否授權個人用戶信息
     * 如果有授權返回中文的json格式個人信息
     * 如果無授權或者失敗的幾種情況
     *     {status: 200, result: res.userInfo, msg: '獲取用戶信息成功'}
     *     {status: 400, result: false, msg: '調取配置信息函數失敗'}
     *     {status: 400, result: false, msg: '沒有授權'}
     *     {status: 402, result: false, msg: '獲取用戶信息函數失敗'}
     *     {statsu: 403,result: jsonResult.response,msg: '獲取用戶許可權函數調用成功，但是沒有拿到信息'} 此種情況應該不會出現但是內部做了一些判斷
     */
checkIsAuthUserInfo() {
  return new Promise((resolve, reject) => {
    my.getSetting({
      success: (res) => {
        console.log('獲取用戶設置');
        if (res.authSetting['userInfo']) {
          // 已經授權
          my.getOpenUserInfo({
            success(res) {
              // 授權了並且調用成功了
              console.log(res);
              var jsonResult = JSON.parse(res.response);
              if (jsonResult.response.code === '10000') {
                resolve({
                  status: 200,
                  result: jsonResult.response,
                  msg: '獲取用戶信息成功'
                });
              } else {
                resolve({
                  statsu: 403,
                  result: jsonResult.response,
                  msg: '獲取用戶許可權函數調用成功，但是沒有拿到許可權'
                })
              }
            },
            fail(err) {
              // 授權了 但是調用方法失敗了
              // console.log(err);
              console.log(err);
              resolve({
                status: 402,
                result: false,
                msg: '獲取用戶信息函數失敗'
              });
            }
          });
        } else {
          // 未授權
          resolve({
            status: 400,
            result: false,
            msg: '沒有授權'
          });
        }
      },
      fail(err) {
        resolve({
          status: 400,
          result: false,
          msg: '調取配置信息函數失敗'
        });
      }
    });
  })
},

3.點擊授權的按鈕

因為他們兩個都做了調整，提高用戶使用體驗，不在支持直接使用函數調用的方式彈出授權框，必須使用點擊button彈出授權框點擊同意和拒絕的方式來做。

可能點擊事件需要用各個平臺的 on

<!-- 微信授權登錄 -->
<button open-type="getUserInfo" @getuserinfo.stop="getuserinfo" lang='zh_CN'>授權登錄</button>

<!-- 支付寶授權登錄 -->

<button open-type="getAuthorize" @getAuthorize="getuserinfo" @error="cancelAuth" scope='userInfo'>授權登錄</button>

4.版本更新升級

他們的升級函數做的差不多一樣，內容也是差不多的。

微信版本升級

// 我的這些函數是在app.js 的 onshow中調用的

const updateManager = wx.getUpdateManager()
console.log('小程式更新');
console.log(updateManager);

updateManager.onCheckForUpdate(function(res) {
    // 請求完新版本信息的回調
    console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function() {
    uni.showModal({
        title: '更新提示',
        content: '新版本已經準備好，是否重啟應用？',
        success: function(res) {
            if (res.confirm) {
                // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啟
                updateManager.applyUpdate()
            }
        }
    })
})

updateManager.onUpdateFailed(function() {
    // 新的版本下載失敗
    uni.showModal({
        title: '更新提示',
        content: '新版本下載失敗',
        showCancel: false
    })
})

支付寶小程式升級

// 小程式更新
const updateManager = my.getUpdateManager();
// console.log('支付寶小程式更新');
// console.log(updateManager);
updateManager.onCheckForUpdate(function (res) {
    // 請求完新版本信息的回調
    console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
    my.confirm({
        title: '更新提示',
        content: '新版本已經準備好，是否重啟應用？',
        success: function (res) {
            if (res.confirm) {
                // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啟
                updateManager.applyUpdate()
            }
        }
    })
})

updateManager.onUpdateFailed(function () {
    // 新版本下載失敗
    uni.showModal({
        title: '更新提示',
        content: '新版本下載失敗',
        showCancel: false
    })
})

再有就是他們調起支付的時候所需的一些欄位的不同了，微信是有四五個，而支付寶只需要一個訂單號就可以了。

還好當時選擇的是一種跨平臺的開發方式，可能性能上會比原生的開發差一點，但是開發上來說還是好很多的，而且語法和vue是一樣的，不需要學習那麼多雜東西。

如果你也在開發兩種程式，我這篇文章對你有一點點幫助，那我會很高興的。