Vue开发Html5微信公众号的步骤
124 浏览量
2020-10-17
04:41:02
上传
评论
收藏 54KB PDF 举报
Vue开发开发Html5微信公众号的步骤微信公众号的步骤
主要介绍了Vue开发Html5微信公众号的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起
跟随小编过来看看吧
一、调起微信支付一、调起微信支付
在微信浏览器里面打开H5网页中执行JS调起支付，WeixinJSBridge内置对象在其他浏览器中无效。
具体参考官方文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
（1）大致流程：
（2）调用代码示例：
mounted(){
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
this.onBridgeReady,
false
);
} else if (document.attachEvent) {
document.attachEvent(
"WeixinJSBridgeReady",
this.onBridgeReady
);
document.attachEvent(
"onWeixinJSBridgeReady",
this.onBridgeReady
);
}
} else {
this.onBridgeReady();
}
}
methods:{
// 调起微信支付
onBridgeReady() {
const pay_params = this.payInfo; //创建支付返回的签名信息
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: pay_params.appId, //公众号名称，由商户传入
timeStamp: pay_params.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: pay_params.nonceStr, //随机串
package: pay_params.package,
signType: pay_params.signType, //微信签名方式：
paySign: pay_params.paySign //微信签名
},
res => {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 校验支付
alert('支付成功');
//do something...
}else if(res.err_msg == "get_brand_wcpay_request:cancel"||res.err_msg == "get_brand_wcpay_request:fail"){
alert('支付失败');
}
}
);
},
}
二、实现二、实现Web签名签名+截图网页截图网页+上传截图上传截图
web签名使用 jsignature 实现，由于jsignature 基于Jquery实现，需要引入Jquery。
签名完成后，使用 html2canvas 实现网页全屏截图。
截图成功后，由于Canvas的 toDataURL方法会根据签名的复杂程度返回不同长短的Base64，过长的Base64传到
后台会增加服务器负担，所以需要转成平时input type=file上传的图片格式
资源评论
