微信和支付宝中的一些常用方法封装

更新日期: 2019-08-25阅读: 2.8k标签: 封装

最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年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

链接: https://fly63.com/article/detial/5021

原生js实现ajax请求封装,类似于jquery的操作

ajax可以实现不阻塞用户,达到无刷新更新部分页面的效果,它的异步请求都会首先考虑的是jquery,但是前提得加载它那核心包,如何使用原生的js来实现这一功能呢?

通过2行js代码实现DOM属性的封装以及交换两个变量的值

JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考,否则你就只是一个完成工作的机器。所以,如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间,别犹豫,换一个。

浅谈Vue v-model实现原理,如何封装,以及封装方法

vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是:(1) v-bind:绑定响应式数据,(2) 触发 input 事件 并传递数据 (重点)

如何去设计一个组件封装_前端组件化设计思路

目前前端三大框架(Vue.js, Angular.js, React.js)都在引领着前端的组件化开发方向,组件化的前端开发方式的确为业务实现带来了前所未有的方便,其实组件化开发早已经具有(YUI),但如何封装一个优秀的组件,可能并不是每位前端开发者都能够做好的。

fetch请求二次封装

JS 中使用 fetch 更加高效地进行网络请求,由于fetch 的请求方式同 $ajax 和 axios 都不太一样,为了方便请求过程,进行Fetch网络封装类:方式一传统使用回调函数的方式、方式二借助ES6中的promise的方式封装。

关于那些变化万千,开箱即用的 Promise 高度封装方法

在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续

JS防抖函数、节流函数工具类封装

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间

JQuery组件封装之return this.each(function () {});

这个时候就要说each了,还是之前的,倘若页面上有N个class为div的元素呢,即:this.length>1,这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了

原生js实现ajax的封装

ajax 的全称是Asynchronous JavaScript and XML,简单理解下:ajax就是异步的js和服务端的数据;GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连

JS多态封装继承

JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!