vue 微信公众号 js-sdk

vue项目中，调用微信公众号 js-sdk 选择或者拍照，上传图片

1 安装依赖：yarn add weixin-js-sdk

2 引入依赖：

  import wx from 'wexin-js-sdk'

3.使用

jssdk需要签名权限, 这个权限是由后台提供的,前端要把签名权限注入到wx.config中：

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

1.将当前界面的url 传给后端
2.后端返回微信认证需要的参数
3.jsApiList
4.例子中用到的是 "chooseImage", "uploadImage" 两个sdk;
业务场景是： 先从手机上选择照片 ，然后上传找到到微信服务（微信服务会返回上传成功的图片serverId ,前端将serviceId给后台,后台从微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即media_id）

methods: {
 useCamera() {
  getWxParam({
        url: window.location.href.split("#")[0]
      }).then(res => {
        res = res.data;
        if (res && res.code === 0) {
          const { appId, timestamp, nonceStr, signature } = res.data;
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId, // 必填，公众号的唯一标识
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature, // 必填，签名
            jsApiList: ["chooseImage", "uploadImage"] // 必填，需要使用的JS接口列表
          });
          this.useWxCamera(); // 调用wx sdk
        }
 })
},
useWxCamera() {
      const that = this;
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          wx.uploadImage({
            localId: `${localIds}`, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function(res) {
              var serverId = res.serverId; // 返回图片的服务器端ID
              this.loadingFlag = true;  // 加载中
            // idCardOcr 是调接口方法 这里的业务是上传图片之后，后台识别身份证号，再传给前端
              idCardOcr(serverId)
                .then(res => {
                  res = res.data;
                  that.loadingFlag = false;
                  if (res && res.code === 0) {
                    const { idCard , name } = res
                    that.idCard = idCard ;
                    that.name = name;
                  } else {
                    Toast(res.message || "系统异常，请重试");
                  }
                })
                .catch(res => {
                  that.loadingFlag = false;
                });
            }
          });
        }
      });
    }
}