asp.net ,.net ,C#中,uniapp条用微信JSSDK接口,实现支付、分享、上传图片视频、扫一扫等功能,报错invalid signature签名错误,在微信开发工具上报错the permission value is offline verifying,报错[system] TypeError: Cannot read property 'XXX' of undefined

2月 4, 2021 211点热度 0人点赞 0条评论
报错invalid signature签名错误,在微信开发工具上报错the permission value is offline verifying,
报错[system] TypeError: Cannot read property 'XXX' of undefined

报错解决方法,直接跳到最后

1,微信JSSDK接口API,官方文档

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

2,安装微信JS-SDK

2.1,使用npm安装,npm install jweixin-module --save

2.2,直接下载,https://unpkg.com/jweixin-module/out/index.js

3,使用JS-SDK

var jweixin = require('jweixin-module')
jweixin.ready(function(){
// TODO
});

 

4,封装js-sdk

4.1,将js-sdk中的方法封装在一个js中,统一管理,使用时直接调用

例:我是封装在跟目录下request/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 = window.location.href.split('#')[0];
console.log('nowurl' + uri)
const BASE_URL = uni.BASE_URL
uni.request({
url: BASE_URL + 'API/wxInfo.ashx',
data: {
url: uri
},
method: 'POST',
success: (res) => {
// console.log('jwx.js-wxInfo', res)
// console.log(res.data.appId);
// console.log(res.data.timestamp);
// console.log(res.data.nonceStr);
// console.log(res.data.signature);
jweixin.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: [ //这里是需要用到的接口名称
'checkJsApi', //判断当前客户端版本是否支持指定JS接口
'updateTimelineShareData',
'updateAppMessageShareData',
'onMenuShareQQ',
'onMenuShareWeibo',
'getLocation', //获取位置
'closeWindow', //关闭当前网页窗口接口
'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
});
});
});
},
closeWindow: function(data, callback) { //关闭窗口
console.log("关闭窗口")
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function(res) {
jweixin.ready(function() {
jweixin.closeWindow();
});
});
},
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;
}
// alert(JSON.stringify(data));
this.initJssdk(function(res) {
jweixin.ready(function() {
jweixin.chooseWXPay({
appId: data.appId, //公众号名称,由商户传入
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)
// }
});
});
});
},
// 分享
share: function(data, callback) {
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function(res) {
jweixin.ready(function() {
jweixin.updateAppMessageShareData({
title: data.title, // 分享标题
desc: data.desc, // 分享描述
link: data.link, // 分享链接
imgUrl: data.img_url, // 分享图标
success: function(res) {
callback(res)
},
cancel: function(res) {
callback(res)
}
});
});
});
},
sharepyq: function(data, callback) {
if (!this.isWechat()) {
//console.log('不是微信客户端')
return;
}
this.initJssdk(function(res) {
jweixin.ready(function() {
jweixin.updateTimelineShareData({
title: data.title, // 分享标题
link: data.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.img_url, // 分享图标
success: function() {
callback(res)
}
})
});
});
}
}

4.2,在uniapp入口文件main.js中定义全局组件

main.js完整代码

import Vue from 'vue'
import App from './App'
// #ifdef H5
import jwx from '@/request/jwx.js'
Vue.prototype.$jwx = jwx
// #endif
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
...App
})
app.$mount()

5,使用

例1,JS-SDK分享朋友圈:在onshow()直接引用

onShow() {
this.$jwx.share();
}

//需要传入自己的分享标题、描述、图标,回调函数等参数,也可以直接把分享标题在jwx.js里国定写好就不在传参数

例2,JS-SDK实现微信支付

//点击支付后,需要接口返回签名,有一段时间没反应,提示用户等待,避免多次点击

uni.showLoading({
title: '加载中',
mask:true
});

// #ifdef H5
var that=this
if (this.$jwx && this.$jwx.isWechat()) {

//自己的参数
data.openid=userinfo.userdata.openid
data.guid=userinfo.userdata.guid
data.payWay='wx'
data.apptype='H5'
data.zfType='sp'
data.gwc= uni.getStorageSync('thebuycars')
//自己的参数结束

uni.request({
url: BASE_URL+'API/pay/',//自己的接口,相关数据写表,和返回微信支付需要的时间戳、签名
data: data,
method:'POST',
success:(res) =>{
uni.hideLoading();
let paydata=res.data
console.log('paydata',paydata);
this.$jwx.wxpay({
'timestamp':String(paydata.timeStamp),
'nonceStr':paydata.nonceStr,
'package':paydata.package,
'signType':paydata.signType,
'paysign':paydata.paySign
},function (r) {
if (r.errMsg == 'chooseWXPay:ok') {
uni.showToast({
title:'支付成功!'
})
setTimeout(function(){
uni.switchTab({
url:'../user/user'
})
},800)
}else{
uni.showToast({
title:'支付失败!',
icon:'none'
})
}
});

},
fail:(res)=> {
alert(res.data);
}
});
}
// #endif

6,注意事项

在支付时,手机上报错invalid signature签名错误,在微信开发工具上报错the permission value is offline verifying

原因:生成签名是需要获取当前页url,我获取当前页url的方法是通过C#获取,uniapp使用的hash路由模式,会导致url里加上#,而生成签名时,不能含有#,具体看js-sdk官网文档附录5第3小点

/// <summary>
/// 获得当前完整Url地址
/// </summary>
/// <returns>当前完整Url地址</returns>
public static string GetUrl()
{
return HttpContext.Current.Request.Url.ToString().Split('#')[0];
}

去除#后仍然报错,原因,接口里通过C#方法获取到的url,与提交页的url不是同一个,解决方法,通过前端获取url,在传入到接口里

var uri = window.location.href.split('#')[0];
const BASE_URL = uni.BASE_URL
uni.request({
url: BASE_URL + 'API/wxInfo.ashx',
data: {
url: uri
},
method: 'POST',
success: (res) => {
jweixin.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: [ ]
});
if (callback) {
callback(res.data);
}
}
})

 

chunk-vendors.4661bbca.js:1 [system] TypeError: Cannot read property 'isWechat' of undefined

封装的jssdk方法未找到

解决方法:1,使用箭头函数;2,使用var that=this后,用that

 

项目合作,二开:18288957346

jiacai

这个人很懒,什么都没留下

文章评论