Alipay version recently made the same way the applet, if now think twice, then develop heart should be very hard to accept.
December last November about the development of micro-channel two is a small program to buy goods in the supermarket, a user version, a version of the business. Our team saw uniapp this thing, and then use this to write something a little demo, and decided to adopt this thing develop a micro letter applet. The development experience people really worried, because it is too slow to compile, save the code is finished here, if you want to micro-channel effects seen little development tools then have to wait for a long time, and then test a little bit of this stuff sometimes uniapp side on behalf of the saved, but the micro-channel development tool code does not move, also need to be recompiled, and then develop uniapp not yet mature now, as it has developed a number of versions, and impossible to native development, and so, and developments in condemning. Later, no one wants to maintain this thing.
Until last Thursday began developing version of Alipay, because uniapp is cross-platform, read some documents began to engage in, and found the layout of confusion out after compiling to Alipay, my heart feels Is there any need to re-develop it again. Later, under-resistant heart and saw that many problems are just the picture of the problem, then use conditional compilation document, it took one day to get the layout, then that is compatible with a number of js code. Because both of them are very similar, and micro-channel pay above what treasure above documents are almost identical. So some things are often used to do a summary.
The main applet is to obtain an authorization, access to user information, upload user information, an upgrade version, different payment method.
uniapp cross-platform is not the kind to write a lot if else to judge different platforms, then run different code, he is based on the same set of code that can be selected separately to each platform code is compiled to run to the platform above, this is me We find that the cross-platform is really good to do.
Ado, I write a little summary about the most basic methods.
Now with the popularity of Promise it, asynchronous methods can be packaged into Promise object, then it is easy to encapsulate some of the approaches.
Because I did a compatible, most start doing micro letter, the name and return values are a priority to use the name of the micro-channel, resulting in page code changes will be very limited.
1. Get login code
Micro-channel acquisition
/** * Get micro-channel code CODE * return {Promise Function} code Success * {code: '', status: 200} * Failed {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 }); } }) }) },
Alipay acquisition
/** * Get Alipay code code * return {Promise Function} code Success * {code: '', status: 200} * Failed {status: 400, err} */ getWxCode: () => { return new Promise((resolve, reject) => { my.getAuthCode({ scopes: 'auth_base', // auth_base auth_user auth_zhimaauth_zhima success(res) { the console.log ( 'callback function to succeed' ); console.log(res) resolve({ status: 200, code: res.authCode }); }, fail(err) { the console.log ( 'acquisition failure callback' ); console.log(err); resolve({ status: 400, err: err }); } }) }) },
2. Authorization for user information
/** * Get enough current authorization status information only to determine the status code 200 is not here, if not to get the information * * Detect whether the user is authorized to personal user information * If there are authorized return json format Chinese personal information * If there is no authorization or failure of several cases * {Status: 200, result: res.userInfo, msg: 'user information acquisition success'} * {Status: 400, result: false, msg: 'function fails retrieved configuration information'} * {Status: 400, result: false, msg: 'not authorized'} * {Status: 402, result: false, msg: 'user information acquiring function fails'} */ checkIsAuthUserInfo() { return new Promise((resolve, reject) => { wx.getSetting({ success(res) { // the console.log ( 'success'); IF (res.authSetting [ 'scope.userInfo' ]) { // authorization information wx.getUserInfo ({ lang: 'zh_CN' , success(res) { // authorize the call is successful and resolve ({status: 200, result : res.userInfo, msg: ' user information acquisition success' }); }, fail(err) { // authorized calling methods but fails // the console.log (ERR); Resolve ({Status: 402, Result: to false , MSG: 'user information acquiring function fails' }); } }) } The else { // unauthorized Resolve ({Status: 400, Result: to false , MSG: 'not authorized' }); } }, fail(err) { // the console.log ( "Method retrieved configuration information failed") Resolve ({Status: 400, Result: to false , MSG: 'function fails retrieved configuration information' }); } }) }) }
Alipay to obtain user information
Alipay is too much trouble, because of the need to device debugging can get.
/** * Get enough current authorization status information only to determine the status code 200 is not here, if not to get the information * * Detect whether the user is authorized to personal user information * If there are authorized return json format Chinese personal information * If there is no authorization or failure of several cases * {Status: 200, result: res.userInfo, msg: 'user information acquisition success'} * {Status: 400, result: false, msg: 'function fails retrieved configuration information'} * {Status: 400, result: false, msg: 'not authorized'} * {Status: 402, result: false, msg: 'user information acquiring function fails'} * {Statsu: 403, result: jsonResult.response, msg: 'User Rights function succeeds, but did not get the message'} such a situation should not occur but the interior did some judgment */ checkIsAuthUserInfo() { return new Promise((resolve, reject) => { my.getSetting({ success: (res) => { the console.log ( 'Get User Settings' ); IF (res.authSetting [ 'the userInfo' ]) { // has authorized my.getOpenUserInfo ({ success(res) { // authorize the call succeeded and the console.log (RES); var JsonResult = the JSON.parse (res.response); IF (jsonResult.response.code === '10000' ) { resolve({ status: 200, result: jsonResult.response, msg: 'get user information success' }); } else { resolve({ statsu: 403 , result: jsonResult.response, msg: 'User Rights function succeeds, but did not get permission' }) } }, fail(err) { // authorized but call the method failed // console.log (ERR); console.log (ERR); resolve({ status: 402, result: false, MSG: 'user information acquiring function fails' }); } }); } The else { // unauthorized resolve ({ status: 400, result: false, msg: 'not authorized' }); } }, fail(err) { resolve({ status: 400, result: false, MSG: 'function fails retrieved configuration information' }); } }); }) },
3. Click the button Authorization
Because they both made adjustments to improve the user experience, not support direct use function calls the authorization box pops up, you must click on the button pop-up box click on the consent and authorization of the way he refused to do.
You may need to use click event on each platform
<! - micro-channel authorization log -> < Button Open-type = "getUserInfo" @ getuserinfo.stop = "GetUserInfo" lang = 'zh_CN' > unauthorized access </ Button >
<-! Alipay authorized login ->
<button open-type="getAuthorize" @getAuthorize="getuserinfo" @error="cancelAuth" scope='userInfo'>授权登录</button>
4. The updated version upgrades
Their upgrade function to do about the same, the content is the same.
Micro-channel version upgrade
// My function is called in these app.js of onshow in const the UpdateManager = wx.getUpdateManager () the console.log ( 'small Update' ); console.log(updateManager); updateManager.onCheckForUpdate ( function (RES) { // End callback request new version information console.log (res.hasUpdate) }) updateManager.onUpdateReady(function() { uni.showModal({ title: 'update prompt' , Content: 'The new version is ready, whether to restart the application? ' , Success: function (RES) { IF (res.confirm) { // The new version has been downloaded well, call the new version of the application and restart applyUpdate updateManager.applyUpdate () } } }) }) updateManager.onUpdateFailed ( function () { // the new version of the download failed uni.showModal ({ title: 'update prompt' , Content: 'The new version of the download failed' , showCancel: false }) })
Alipay small upgrade program
// applet updates const = updatemanager my.getUpdateManager (); // the console.log ( 'Alipay update applet'); // the console.log (updatemanager); updateManager.onCheckForUpdate ( function (RES) { // End Request the new version of the callback information console.log (res.hasUpdate) }) updateManager.onUpdateReady(function () { my.confirm({ title: 'update prompt' , Content: 'The new version is ready, whether to restart the application? ' , success: function (res) { if (res.confirm) { // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(function () { // 新版本下载失败 uni.showModal({ title: '更新提示', content: '新版本下载失败', showCancel: false }) })
再有就是他们调起支付的时候所需的一些字段的不同了，微信是有四五个，而支付宝只需要一个订单号就可以了。
还好当时选择的是一种跨平台的开发方式，可能性能上会比原生的开发差一点，但是开发上来说还是好很多的，而且语法和vue是一样的，不需要学习那么多杂东西。
如果你也在开发两种程序，我这篇文章对你有一点点帮助，那我会很高兴的。