h5微信本地调试 vue_Vue开发Html5微信公众号的步骤
一、調起微信支付
在微信瀏覽器里面打開H5網頁中執行JS調起支付，WeixinJSBridge內置對象在其他瀏覽器中無效。
(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上傳的圖片格式
代碼示例：
import jSignature from "jSignature";
import html2canvas from 'html2canvas';
mounted() {
//通過setTimeout把代碼丟到初始化最后執行
this.Timer = setTimeout(() => {
// Signature 簽名Dom容器
this.$SignDom = $("#Signature").jSignature({
height: "100%",//占容器100%
width: "100%"
});
}, 0);
},
methods:{
//清空簽名
resetSign() {
this.$SignDom && this.$SignDom.jSignature("reset");
},
// 獲取簽名
async getSign() {
if (!this.$SignDom) return;
if (!this.$SignDom.jSignature("getData", "native").length) {
alert("請填寫您的簽名!");
return;
}
// jSignature - 獲取簽名Base64(注意：該Base64指簽名那一塊，不是整個頁面)
// let datapair = this.$SignDom.jSignature("getData", "image");
// let SignSrc = "data:" + datapair[0] + "," + datapair[1];
// html2canvas截取整個頁面
const HTML_CANVAS = await html2canvas(document.getElementById('app'));
let SignSrc = HTML_CANVAS.toDataURL();
// Base64 轉 Blob 實現提交圖片
let uploadImg = this.dataURLtoFile(SignSrc);
let param = new FormData(); //創建form對象
param.append("file", uploadImg,'signImage.png');
// send request...
},
// Base64轉Blob上傳圖片
dataURLtoFile(dataurl) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr],{
type: mime,
});
}
},
destroyed() {
//清理setTimeout
this.Timer && clearTimeout(this.Timer);
}
三、如何在npm run dev下，手機打開H5公眾號測試
(1) 修改package.json,在dev 后面加上--host your IP
示例：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.167.1.99",
},
(2) dev跑起來之后，通過文件傳輸助手發給手機，在手機打開http://your IP:8080/即可
(3) 打開后就可以在手機上測試支付或wx-js-sdk等功能啦！
總結
以上是生活随笔為你收集整理的h5微信本地调试 vue_Vue开发Html5微信公众号的步骤的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： elisa标准曲线怎么做_ELISA标准
- 下一篇： vue 微信录音倒计时_vue 公众号H