vue使用weixin-js-sdk实现拍照上传图片和从相册选择图片(兼容ios和Android)

线上项目亲测无bug,附上官方文档 js-sdk说明文档

环境准备

首先打开终端执行命令npm install weixin-js-sdk
可以在main.js文件中将其挂载到Vue原型上

Vue.prototype.wx=require('weixin-js-sdk')

或者可以直接在组件中使用

let wx = require('weixin-js-sdk')

以下示例是组件中单独引入请知悉

开始

第一步

首先搭建基本的ui结构,这边就直接上代码了(只做示例,比较简单)
html部分如下(使用了两个vant组件,不懂的话可以查看vant官网)

css部分如下

h2 {
  line-height: 60px;
  margin-left: 30px;
}
p {
  text-align: center;
}
.img_box {
  display: flex;
  justify-content: space-evenly;
  margin: 10px 0;
}
.title_text {
  text-align: center;
  margin-top: 15px;
  color: #87ceeb;
  font-size: 16px;
}
.clickBtn {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ccc;
}

效果图如下

ui效果图

第二步

首先通过官方文档的描述准备必要的数据如下:

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

我这边是和后端配合请求接口获得
注意wx.config需要写到created声明周期钩子函数中,页面被创建的时候调用,然后依次调用wx.ready和wx.error
代码片段如下:

configWxApi () {
      let myUrl = window.location.href.split("#")[0];
      this.wechatParamsByRequestComm(myUrl, 'getWxData', {}, (res) => {
        console.log('wechatData', res);
        wx.config({
          debug: false,
          appId: res.appId, //公众号的唯一标识
          timestamp: res.timestamp, //生产签名时间戳
          nonceStr: res.noncestr, //生成签名随机串
          signature: res.signature, //签名
          jsApiList: ['chooseImage', 'uploadImage', 'downloadImage', 'getLocalImgData'] //需要使用的接口列表
        });
        //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.ready(function () {
          console.log("ready")
        })
        wx.error(function (res) {
          console.log("失败了", res);
          //  alert(res.errMsg);  // 正式环境记得关闭啊！！！！
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
      })
    },

将configWxApi方法写入cerated中即可
wechatParamsByRequestComm方法为获取wx.config中参数的方法,可以配合后端完成

注意事项：
ios系统调用api的时候会有系统默认弹窗,安卓则没有,所以需要做好兼容处理

首先附上data代码块的数据

data () {
    return {
      show: false,//是否弹窗
      img1: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      img2: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      imgFlag: '',//点击的是哪张图片
      timer: null
    }
  },

当点击上传图片时,ios不需要调用咋自己的弹窗,Android则需要先调用咋自己写的弹窗,兼容代码如下
点击安卓首先调用弹窗,然后再调用wx的api,苹果直接调用wx的api(详情见goToFilm方法)

this.isMobile()方法为判断当前是ios还是Android,安卓为1,ios为2

boxClick (flag) {
      console.log('flag: ', flag);
      console.log(this.isMobile());
      this.imgFlag = flag
      if (this.isMobile() == '1') {//安卓系统时候才会调用自己的弹窗,ios有默认弹窗
        this.show = true
      } else if (this.isMobile() == '2') {//苹果系统就直接调用方法,会有默认弹窗
        this.goToFilm(['camera', 'album'])
      }
    },

重点来了,如下为调用wx api的方法
定时器可以加也可以不加

 goToFilm (sourceType) {
      this.show = false
      console.log(sourceType);
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 ['original', 'compressed']
        sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有 ['album', 'camera']
        success: (res) => {
          let localIds = res.localIds;
          let localId = localIds[0]
          console.log('success成功回调res', res);

          this.timer = window.setTimeout(() => {
            wx.uploadImage({
              localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: (res) => {
                let serverId = res.serverId; // 返回图片的服务器端ID

                wx.downloadImage({
                  serverId: serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                  isShowProgressTips: 1, // 默认为1，显示进度提示
                  success: (res) => {
                    let localId = res.localId; // 返回图片下载后的本地ID

                    wx.getLocalImgData({
                      localId: localId,
                      success: (result) => {
                        console.log('result: ', result);
                        if (this.isMobile() == '2') {//苹果系统
                          console.log('ios');
                          let imgSrc = result.localData;
                          if (this.imgFlag == '1') {
                            this.img1 = imgSrc
                          } else if (this.imgFlag == '2') {
                            this.img2 = imgSrc
                          }
                        } else if (this.isMobile() == '1') {//安卓系统
                          console.log('android');
                          let imgSrc = 'data:image/jpeg/png;base64,' + result.localData; // localData是图片的base64数据，可以用img标签显示
                          if (this.imgFlag == '1') {
                            this.img1 = imgSrc
                          } else if (this.imgFlag == '2') {
                            this.img2 = imgSrc
                          }
                        }
                      },
                      fail: (err) => {

                        console.log('getLocalImgData失败', err);
                      },
                      complete: () => {
                        window.clearTimeout(this.timer)
                        console.log('getLocalImgData接口调用完成');
                      }
                    });
                  }
                })
              }
            })
          }, 100);

        },

        fail: (err) => {
          console.log('chooseImage失败', err);
        },

        complete: () => {
          console.log('chooseImage接口调用完成');
        }
      });
    },

制作不易,如果觉得用得上或者觉得我写的还不错的可以点个赞谢谢

结束