uni-app h5 微信JSSDK的方式支付

综合各方经验及文档总结了以下我的使用方法，希望对有需要的同学有些帮助
第一步：npm install jweixin-module --save
第二步：common文件夹新建js文件，我这里命名jwx.js



jwx.js 文件内容

1. var jweixin = require('jweixin-module');   
2. export default {   
3.     //判断是否在微信中     
4.     isWechat: function() {   
5.         var ua = window.navigator.userAgent.toLowerCase();   
6.         if (ua.match(/micromessenger/i) == 'micromessenger') {   
7.             //console.log('是微信客户端')   
8.             return true;   
9.         } else {   
10.             //console.log('不是微信客户端')   
11.             return false;   
12.         }   
13.     },   
14.     initJssdk:function(callback){   
15.         var uri = encodeURIComponent(window.location.href.split('#')[0]);//获取当前url然后传递给后台获取授权和签名信息   
16.         uni.request({   
17.             url:'',//你的接口地址   
18.             data:{   
19.                 url:uri   
20.             },   
21.             success:(res)=>{   
22.                 //返回需要的参数appId,timestamp,noncestr,signature等   
23.                 //注入config权限配置   
24.                 jweixin.config({   
25.                     debug: false,   
26.                     appId: res.data.signPackage.appId,   
27.                     timestamp: res.data.signPackage.timestamp,   
28.                     nonceStr: res.data.signPackage.nonceStr,   
29.                     signature: res.data.signPackage.signature,   
30.                     jsApiList: [//这里是需要用到的接口名称   
31.                         'checkJsApi',//判断当前客户端版本是否支持指定JS接口   
32.                         'onMenuShareAppMessage',//分享接口   
33.                         'getLocation',//获取位置   
34.                         'openLocation',//打开位置   
35.                         'scanQRCode',//扫一扫接口   
36.                         'chooseWXPay',//微信支付   
37.                         'chooseImage',//拍照或从手机相册中选图接口   
38.                         'previewImage',//预览图片接口   
39.                         'uploadImage'//上传图片   
40.                     ]   
41.                 });   
42.                 if (callback) {   
43.                     callback(res.data);   
44.                 }   
45.  
46.             }   
47.         })   
48.     },   
49.     //在需要定位页面调用   
50.     getlocation: function(callback) {   
51.         if (!this.isWechat()) {   
52.             //console.log('不是微信客户端')   
53.             return;   
54.         }   
55.         this.initJssdk(function(res) {   
56.             jweixin.ready(function() {   
57.                 jweixin.getLocation({   
58.                     type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'   
59.                     success: function (res) {   
60.                         // console.log(res);   
61.                         callback(res)   
62.                     },   
63.                     fail:function(res){   
64.                         console.log(res)   
65.                     },   
66.                     // complete:function(res){   
67.                     //     console.log(res)   
68.                     // }   
69.                 });   
70.             });   
71.         });   
72.     },   
73.     openlocation:function(data,callback){//打开位置   
74.         if (!this.isWechat()) {   
75.             //console.log('不是微信客户端')   
76.             return;   
77.         }   
78.         this.initJssdk(function(res) {   
79.             jweixin.ready(function() {   
80.                 jweixin.openLocation({//根据传入的坐标打开地图   
81.                     latitude:data.latitude,   
82.                     longitude:data.longitude   
83.                 });   
84.             });   
85.         });   
86.     },   
87.     chooseImage:function(callback){//选择图片   
88.         if (!this.isWechat()) {   
89.             //console.log('不是微信客户端')   
90.             return;   
91.         }   
92.         //console.log(data);   
93.         this.initJssdk(function(res) {   
94.             jweixin.ready(function() {   
95.                 jweixin.chooseImage({   
96.                     count:1,   
97.                     sizeType:['compressed'],   
98.                     sourceType:['album'],   
99.                     success:function(rs){   
100.                         callback(rs)   
101.                     }   
102.                 })   
103.             });   
104.         });   
105.     },   
106.     //微信支付   
107.     wxpay: function(data,callback) {   
108.         if (!this.isWechat()) {   
109.             //console.log('不是微信客户端')   
110.             return;   
111.         }   
112.         this.initJssdk(function(res) {   
113.             jweixin.ready(function() {   
114.                 jweixin.chooseWXPay({   
115.                     timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符   
116.                     nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位   
117.                     package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）   
118.                     signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'   
119.                     paySign: data.paysign, // 支付签名   
120.                     success: function (res) {   
121.                         // console.log(res);   
122.                         callback(res)   
123.                     },   
124.                     fail:function(res){   
125.                         callback(res)   
126.                     },   
127.                     // complete:function(res){   
128.                     //     console.log(res)   
129.                     // }   
130.                 });   
131.             });   
132.         });   
133.     }   
134. }   

第三步：main.js 文件里引入
import jwx from '@/common/jwx'
Vue.prototype.$jwx = jwx

第四步：在需要的页面直接用this.$jwx.xxx(接口名称)调用即可
 

1. if (this.$jwx && this.$jwx.isWechat()) {//检查是否是微信环境   
2.       this.$jwx.getlocation(function (res) {//获取位置   
3.       console.log(res);   
4.               //拿到返回数据自行处理   
5.       });   
6.  
7.     //调用支付前应先处理订单信息，然后根据订单信息返回支付需要的timestamp,noncestr,package,signType,paySign等参数   
8.    //下面的rs.data为后台处理完订单后返回的；我的业务模式为用户点击提交订单，请求后台添加订单接口，订单添加完成后，后台根据订单id，订单金额等信息调用微信签名拿到timestamp,noncestr等参数返回;   
9.     this.$jwx.wxpay({//调用支付，   
10.       'timestamp':rs.data.timeStamp,    
11.       'nonceStr':rs.data.nonceStr,   
12.       'package':rs.data.package,   
13.       'signType':rs.data.signType,   
14.       'paysign':rs.data.paySign   
15.   },function (r) {   
16.       if (r.errMsg == 'chooseWXPay:ok') {   
17.           uni.redirectTo({//支付成功转到支付成功提示页面   
18.               url: '/pages/paySuccess   
19.           })   
20.       }else{   
21.           that.$msg('支付失败！');   
22.       }   
23.   });   
24. }