一、调起微信支付

在微信浏览器里面打开H5网页中执行射流研究…调起支付，WeixinJSBridge内置对象在其他浏览器中无效。具体参考官方文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php？章节=7 _ 7索引=6(1)大致流程：

(2)调用代码示例：

已安装(){ if(类型为weixin bridge==' undefined '){ if(document。addeventlistener){ document。addeventlistener(' weixinsbridgeready '，this.onBridgeReady，false)；} else if(文档。attachevent){ document。attach event(' weixinsbridgeready '，这个。onbridgeready)；文件。attach event(' on weixinsbridgeready '，此。onbridgeready)；} } else { this。onbridgeReady()；}}methods:{ //调起微信支付onbridgeReady(){ const pay _ params=this。payinfo//创建支付返回的签名信息维信桥。invoke(' getBrandWCPayRequest '，{ appId: pay_params.appId，//公众号名称，由商户传入时间戳： pay _ params。时间戳，//时间戳，自1970年以来的秒数非佳洁士：支付参数。非波峰，//随机串package: pay_params.package，sign type : pay _ params。符号类型，//微信签名方式：paysign : pay _ params。paysign/微信签名}，RES={ if(RES . err _ msg==' get _ brand _ wcpay _ request : ok '){//校验支付警报('支付成功');//做某事.} else if(RES . err _ msg==' get _ brand _ wcpay _ request : cancel ' | | RES . err _ msg==' get _ brand _ wcpay _ request : fail '){ alert('支付失败');} } );},}二、实现网签名截图网页上传截图

网签名使用jsignature实现，由于jsignature基于框架实现，需要引入Jquery。签名完成后，使用html2canvas实现网页全屏截图。截图成功后，由于帆布的今天早上方法会根据签名的复杂程度返回不同长短的Base64，过长的Base64传到后台会增加服务器负担，所以需要转成平时输入类型=文件上传的图片格式代码示例：

从" jSignature "导入JSignature从" html2canvas "导入html 2画布；挂载(){ //通过定时器把代码丢到初始化最后执行这个。定时器=setTimeout(()={ //签名签名师容器这个$ SignDom=$(“# Signature”).jSignature({ height: '100% '，//占容器100%宽度： ' 100% ' });}, 0);}，methods:{ //清空签名resetSign() { this .$SignDom这个$SignDom.jSignature('重置');}, //获取签名async getSign() { if(！这个$SignDom)返回；if(！这个$SignDom.jSignature('getData '，' native ').长度){ alert('请填写您的签名!');返回；} //jSignature -获取签名Base64(注意：该Base64指签名那一块，不是整个页面)//让datapair=这个.$SignDom.jSignature('getData '，' image ')；//让符号src=' data : ' data air[0]'，' data air[1]；//html2canvas截取整个页面const HTML _ CANVAS=等待HTML 2 CANVAS(文档。getelementbyid(' app ')；让SignSrc=HTML _ canvas。todaytaul()；//Base64转一滴实现提交图片让uploadImg=这个。dataurltofile(SignSrc)；let param=new FormData()；//创建形式对象param.append('file '，uploadImg，' sign image。png ')；//发送请求.}，//Base64转一滴上传图片数据网址。split('，')，mime=arr[0].匹配(/:(。*?);/)[1]，bstr=atob(arr[1])，n=bstr.length，u8 arr=new Uint 8数组(n)；while(n-){ u8 arr[n]=bstr。charcodeat(n)；}返回新Blob([u8arr]，{ type:mime })；} },销毁(){ //清理设置超时。定时器清零超时（这。计时器);}三、如何在新公共管理运行开发下，手机打开H5公众号测试

(1) 修改package.json，在偏差后面加上-托管您的知识产权

示例：

脚本： { ' dev ' : ' web pack-dev-server-inline-progress-config build/web pack。戴夫。糖膏剂js-host 192。167 .1 .99 '，}，(2) dev跑起来之后，通过文件传输助手发给手机，在手机打开http://您的IP:8080/即可

(3) 打开后就可以在手机上测试支付或wx-js-sdk等功能啦！