最近做了同一個樣子的小程序的支付寶版本，現(xiàn)在如果想想是開發(fā)兩次的話心里應該是很難受的。

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

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

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

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

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

　　

　　現(xiàn)在隨著Promise的流行吧，異步方法都可以封裝成為Promise對象，然后就很容易對一些方法進行封裝了。

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

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('獲取成功的回調(diào)函數(shù)');console.log(res)resolve({status: 200,code: res.authCode});},fail(err) {console.log('獲取失敗的回調(diào)');console.log(err);resolve({status: 400,err: err});}})}) },

?

2.授權(quán)后獲取用戶信息

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

?

支付寶獲取用戶信息

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

/*** 獲取目前授權(quán)狀態(tài)信息 這里只判斷狀態(tài)碼如果不是 200 就是沒有拿到信息就好* * 檢測用戶是否授權(quán)個人用戶信息* 如果有授權(quán)返回中文的json格式個人信息* 如果無授權(quán)或者失敗的幾種情況* {status: 200, result: res.userInfo, msg: '獲取用戶信息成功'}* {status: 400, result: false, msg: '調(diào)取配置信息函數(shù)失敗'}* {status: 400, result: false, msg: '沒有授權(quán)'}* {status: 402, result: false, msg: '獲取用戶信息函數(shù)失敗'}* {statsu: 403,result: jsonResult.response,msg: '獲取用戶權(quán)限函數(shù)調(diào)用成功，但是沒有拿到信息'} 此種情況應該不會出現(xiàn)但是內(nèi)部做了一些判斷*/ checkIsAuthUserInfo() {return new Promise((resolve, reject) => {my.getSetting({success: (res) => {console.log('獲取用戶設(shè)置');if (res.authSetting['userInfo']) {// 已經(jīng)授權(quán) my.getOpenUserInfo({success(res) {// 授權(quán)了并且調(diào)用成功了 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: '獲取用戶權(quán)限函數(shù)調(diào)用成功，但是沒有拿到權(quán)限'})}},fail(err) {// 授權(quán)了 但是調(diào)用方法失敗了// console.log(err); console.log(err);resolve({status: 402,result: false,msg: '獲取用戶信息函數(shù)失敗'});}});} else {// 未授權(quán) resolve({status: 400,result: false,msg: '沒有授權(quán)'});}},fail(err) {resolve({status: 400,result: false,msg: '調(diào)取配置信息函數(shù)失敗'});}});}) },

?

?

3.點擊授權(quán)的按鈕

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

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

<!-- 微信授權(quán)登錄 --> <button open-type="getUserInfo" @getuserinfo.stop="getuserinfo" lang='zh_CN'>授權(quán)登錄</button> <!-- 支付寶授權(quán)登錄 --> <button open-type="getAuthorize" @getAuthorize="getuserinfo" @error="cancelAuth" scope='userInfo'>授權(quán)登錄</button>

?

4.版本更新升級

他們的升級函數(shù)做的差不多一樣，內(nèi)容也是差不多的。

微信版本升級

// 我的這些函數(shù)是在app.js 的 onshow中調(diào)用的 const updateManager = wx.getUpdateManager() console.log('小程序更新'); console.log(updateManager);updateManager.onCheckForUpdate(function(res) {// 請求完新版本信息的回調(diào) console.log(res.hasUpdate) })updateManager.onUpdateReady(function() {uni.showModal({title: '更新提示',content: '新版本已經(jīng)準備好，是否重啟應用？',success: function(res) {if (res.confirm) {// 新的版本已經(jīng)下載好，調(diào)用 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) {// 請求完新版本信息的回調(diào) console.log(res.hasUpdate) })updateManager.onUpdateReady(function () {my.confirm({title: '更新提示',content: '新版本已經(jīng)準備好，是否重啟應用？',success: function (res) {if (res.confirm) {// 新的版本已經(jīng)下載好，調(diào)用 applyUpdate 應用新版本并重啟 updateManager.applyUpdate()}}}) })updateManager.onUpdateFailed(function () {// 新版本下載失敗 uni.showModal({title: '更新提示',content: '新版本下載失敗',showCancel: false}) })

?

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

?

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/z937741304/p/11426962.html

總結(jié)

以上是生活随笔為你收集整理的微信和支付宝中的一些常用方法封装的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。