h5项目中使用到的知识点汇总

html2canvas

html2canvas 将dom元素转为canvas画布图片，h5长按保存图片到本地

      const dom = document.querySelector("#id") as HTMLElement;
      const options = {
        backgroundColor: '#F6F6F6' // null或transparent可将canvas背景设置为透明
      }
      html2canvas(dom, options).then(canvas => {
        // document.body.appendChild(canvas);
        let dataImg = canvas.toDataURL();
        setNewImgBase64(dataImg);
        setShowElement(false);
      });

常用的配置项

|参数|类型|默认值|描述| |-|-|-|-| |allowTaint|Boolean|false|是否允许跨域图像污染画布| |useCORS|Boolean|false|是否跨域加载图片| |backgroundColor|String|#fff|背景色| |width|Number|元素宽度|单元格| |height|Number|元素高度|单元格|

html2Canvas绘制跨域图片

首先在线图片域名需要配置允许跨域访问;

然后img标签需要添加crossorigin="anonymous",src后面添加时间戳防止被缓存;

      <img
        crossorigin="true"
        class="share"
        :src="src+'?'+new Date().getTime()"
      >

最后就是html2Canvas添加{allowTaint: true,useCORS: true}配置项。useCORS: true和上面crossorigin="anonymous"起到的作用是一样的（二选一即可，感兴趣的可以在源码里看一下，这个配置项就是影响给不给图片添加crossorigin="anonymous"）

      html2canvas(dom, {allowTaint: true,useCORS: true,}).then(canvas => {
          let imgUrl = canvas.toDataURL()
      })

H5使用微信/支付宝jsBridge

微信js-sdk

    //1. 引入微信js-sdk：
    npm install —save weixin-js-sdk
    //2. 封装一个微信js-sdk接口引用的公共类
    import wx from ‘weixin-js-sdk’
    //3. 调用微信js-sdk之前需要先调用config配置接口，从微信公众平台获取微信相关配置信息，后台生成需要的参数信息（appId, nonceStr, signature, timestamp），配置安全域名，前端调用wx.config
    wx?.config({
        beta: true, //对于没有公开的接口需要配置beta
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId, // 必填，公众号的唯一标识
        timestamp, // 必填，生成签名的时间戳
        nonceStr, // 必填，生成签名的随机串
        signature,// 必填，签名
        jsApiList: [
            'chooseInvoiceTitle'  //获取微信抬头信息接口，属于没有公开的接口
        ] // 必填，需要使用的JS接口列表
    });
    //4. 调用接口之前还需要调用wx.ready
    //5. 例如调用获取微信抬头接口
    wx.invoke('chooseInvoiceTitle', { scene: "1" }, function (res) {
        resolve(res);
    })

支付宝jsBridge

    //支付宝jsBridge比微信sdk方便，不用引入任何库，也不需要获取配置信息，只要在支付宝环境中，window对象下就会注入AlipayJSBridge
    ready(callback) {
        // 如果jsbridge已经注入则直接调用
        if (window.AlipayJSBridge) {
            callback && callback();
        } else {
            // 如果没有注入则监听注入的事件
            document.addEventListener('AlipayJSBridgeReady', callback, false);
        }
    }
    //在每次调用接口之前都要掉用ready方法
    //以获取支付宝抬头信息为例
    this.ready(function () {
        window.AlipayJSBridge.call('startBizService', {
	    name: 'invoice-title' // name为服务名称，发票抬头写死为invoice-title
        }, async(result) => {})
    });