Vue开发Html5微信公众号的步骤

// 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等功能啦！