微信和支付宝中的一些常用方法封装
最近做了同一个样子的小程序的支付宝版本，现在如果想想是开发两次的话心里应该是很难受的。去年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是一样的，不需要学习那么多杂东西。
来源：https://www.cnblogs.com/z937741304/p/11426962.html
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
