ge
ge
  • 发布:2020-01-08 14:24
  • 更新:2022-03-10 09:45
  • 阅读:20468

uni-app h5 使用微信JSSDK的方式

分类:uni-app

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

jwx.js 文件内容

var jweixin = require('jweixin-module');  
export default {  
    //判断是否在微信中    
    isWechat: function() {  
        var ua = window.navigator.userAgent.toLowerCase();  
        if (ua.match(/micromessenger/i) == 'micromessenger') {  
            //console.log('是微信客户端')  
            return true;  
        } else {  
            //console.log('不是微信客户端')  
            return false;  
        }  
    },  
    initJssdk:function(callback){  
		var uri = encodeURIComponent(window.location.href.split('#')[0]);//获取当前url然后传递给后台获取授权和签名信息  
		uni.request({  
			url:'';//你的接口地址  
			data:{  
				url:uri  
			},  
			success:(res)=>{  
				//返回需要的参数appId,timestamp,noncestr,signature等  
				//注入config权限配置  
				jweixin.config({  
				    debug: false,  
				    appId: res.data.signPackage.appId,  
				    timestamp: res.data.signPackage.timestamp,  
				    nonceStr: res.data.signPackage.nonceStr,  
				    signature: res.data.signPackage.signature,  
				    jsApiList: [//这里是需要用到的接口名称  
				        'checkJsApi',//判断当前客户端版本是否支持指定JS接口  
				        'onMenuShareAppMessage',//分享接口  
				        'getLocation',//获取位置  
						'openLocation',//打开位置  
						'scanQRCode',//扫一扫接口  
						'chooseWXPay',//微信支付  
						'chooseImage',//拍照或从手机相册中选图接口  
						'previewImage',//预览图片接口  
						'uploadImage'//上传图片  
				    ]  
				});  
				if (callback) {  
				    callback(res.data);  
				}  
				  
			}  
		})  
    },  
    //在需要定位页面调用  
    getlocation: function(callback) {  
        if (!this.isWechat()) {  
            //console.log('不是微信客户端')  
            return;  
        }  
        this.initJssdk(function(res) {  
            jweixin.ready(function() {  
                jweixin.getLocation({  
                    type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'  
                    success: function (res) {  
                        // console.log(res);  
                        callback(res)  
                    },  
                    fail:function(res){  
                        console.log(res)  
                    },  
                    // complete:function(res){  
                    //     console.log(res)  
                    // }  
                });  
            });  
        });  
    },  
	openlocation:function(data,callback){//打开位置  
		if (!this.isWechat()) {  
		    //console.log('不是微信客户端')  
		    return;  
		}  
		this.initJssdk(function(res) {  
		    jweixin.ready(function() {  
		        jweixin.openLocation({//根据传入的坐标打开地图  
					latitude:data.latitude,  
					longitude:data.longitude  
		        });  
		    });  
		});  
	},  
	chooseImage:function(callback){//选择图片  
		if (!this.isWechat()) {  
		    //console.log('不是微信客户端')  
		    return;  
		}  
		//console.log(data);  
		this.initJssdk(function(res) {  
		    jweixin.ready(function() {  
		        jweixin.chooseImage({  
					count:1,  
					sizeType:['compressed'],  
					sourceType:['album'],  
					success:function(rs){  
						callback(rs)  
					}  
				})  
		    });  
		});  
	},  
	//微信支付  
	wxpay: function(data,callback) {  
	    if (!this.isWechat()) {  
	        //console.log('不是微信客户端')  
	        return;  
	    }  
	    this.initJssdk(function(res) {  
	        jweixin.ready(function() {  
	            jweixin.chooseWXPay({  
	                timestamp: data.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
	                nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 位  
	                package: data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)  
	                signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'  
	                paySign: data.paysign, // 支付签名  
	                success: function (res) {  
	                    // console.log(res);  
	                    callback(res)  
	                },  
	                fail:function(res){  
	                    callback(res)  
	                },  
	                // complete:function(res){  
	                //     console.log(res)  
	                // }  
	            });  
	        });  
	    });  
	}  
}  

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

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

  if (this.$jwx && this.$jwx.isWechat()) {//检查是否是微信环境  
        this.$jwx.getlocation(function (res) {//获取位置  
		console.log(res);  
                //拿到返回数据自行处理  
        });  
  
      //调用支付前应先处理订单信息,然后根据订单信息返回支付需要的timestamp,noncestr,package,signType,paySign等参数  
     //下面的rs.data为后台处理完订单后返回的;我的业务模式为用户点击提交订单,请求后台添加订单接口,订单添加完成后,后台根据订单id,订单金额等信息调用微信签名拿到timestamp,noncestr等参数返回;  
      this.$jwx.wxpay({//调用支付,  
		'timestamp':rs.data.timeStamp,   
		'nonceStr':rs.data.nonceStr,  
		'package':rs.data.package,  
		'signType':rs.data.signType,  
		'paysign':rs.data.paySign  
	},function (r) {  
		if (r.errMsg == 'chooseWXPay:ok') {  
			uni.redirectTo({//支付成功转到支付成功提示页面  
				url: '/pages/paySuccess  
			})  
		}else{  
			that.$msg('支付失败!');  
		}  
	});  
  }
12 关注 分享
3***@qq.com 9***@qq.com 3***@qq.com 陌上华年 Fancye 还好 2***@qq.com 柠茶不要檬 1***@qq.com 来学习 efficient_work Sailordz

要回复文章请先登录注册

i***@163.com

i***@163.com

回复 动力雀巢 :
是不是公众号没有绑定js安全域名
2022-03-10 09:45
1***@qq.com

1***@qq.com

请问 这里 url:'';//你的接口地址 接口地址是什么?
2021-12-10 18:47
2***@qq.com

2***@qq.com

请问外置浏览器也可以调的起微信支付吗?
2021-11-29 15:18
随意啊

随意啊

回复 x***@163.com :
老哥, 你的解决问题了吗? 卡这了..
2021-10-23 12:36
随意啊

随意啊

回复 9***@qq.com :
老哥, 我现在就碰到你这个问题了, 有秘方吗
2021-10-23 12:30
随意啊

随意啊

回复 动力雀巢 :
大佬, 我也碰到了这个问题, 你是怎么解决的, 我是openlocation的时候
2021-10-23 12:29
xuwantang

xuwantang

请问下,微信内置浏览器uni-app,右上角三个点,点击分享,会触发什么方法啊
2021-07-26 11:20
1***@qq.com

1***@qq.com

大佬那个接口地址是配置号的jssdk安全域名吗?
2021-03-22 19:02
x***@163.com

x***@163.com

回复 动力雀巢 :
你好,你解决了吗 ?我也是同样的情况
2021-01-27 11:57
8***@qq.com

8***@qq.com

var jweixin = require('jweixin-module'); 这句好坑啊啊啊啊啊,
let jWeixin = require('jweixin-module'); w应该是大写的,搞得我怀疑人生啊啊啊啊啊啊啊啊啊啊
2021-01-15 15:48