線上項目親測無bug,附上官方文檔 js-sdk說明文檔

環(huán)境準(zhǔn)備

首先打開終端執(zhí)行命令npm install weixin-js-sdk
可以在main.js文件中將其掛載到Vue原型上

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

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

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

以下示例是組件中單獨引入請知悉

開始

第一步

首先搭建基本的ui結(jié)構(gòu),這邊就直接上代碼了(只做示例,比較簡單)
html部分如下(使用了兩個vant組件,不懂的話可以查看vant官網(wǎng))

<template>
  <div class="container">
    <h2>身份證照片</h2>
    <p>請上傳本人有效身份證照片,拍攝時請保證身份證邊框完整</p>
    <div class="img_box">
      <div class="left_box" @click="boxClick('1')">
        <van-image width="150" height="75" :src="img1" />
        <div class="title_text">身份證正面照</div>
      </div>
      <div class="right_box" @click="boxClick('2')">
        <van-image width="150" height="75" :src="img2" />
        <div class="title_text">身份證反面照</div>
      </div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
      <div class="clickBtn" @click="goToFilm('camera')">拍攝</div>
      <div class="clickBtn" @click="goToFilm('album')">從相冊選擇</div>
      <div class="clickBtn" @click="show=false">取消</div>
    </van-popup>
  </div>
</template>

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效果圖

第二步

首先通過官方文檔的描述準(zhǔn)備必要的數(shù)據(jù)如下:

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有 api 的返回值會在客戶端 alert 出來超凳，若要查看傳入的參數(shù)胎食，可以在 pc 端打開撑碴，參數(shù)信息會通過 log 打出蝙场，僅在 pc 端時才會打印。
  appId: '', // 必填，公眾號的唯一標(biāo)識
  timestamp: , // 必填圈盔，生成簽名的時間戳
  nonceStr: '', // 必填豹芯，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填驱敲，需要使用的 JS 接口列表
});

我這邊是和后端配合請求接口獲得
注意wx.config需要寫到created聲明周期鉤子函數(shù)中,頁面被創(chuàng)建的時候調(diào)用,然后依次調(diào)用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, //公眾號的唯一標(biāo)識
          timestamp: res.timestamp, //生產(chǎn)簽名時間戳
          nonceStr: res.noncestr, //生成簽名隨機(jī)串
          signature: res.signature, //簽名
          jsApiList: ['chooseImage', 'uploadImage', 'downloadImage', 'getLocalImgData'] //需要使用的接口列表
        });
        //config信息驗證后會執(zhí)行ready方法铁蹈，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作众眨，所以如果需要在頁面加載時就調(diào)用相關(guān)接口握牧，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口娩梨，則可以直接調(diào)用沿腰，不需要放在ready函數(shù)中。
        wx.ready(function () {
          console.log("ready")
        })
        wx.error(function (res) {
          console.log("失敗了", res);
          //  alert(res.errMsg);  // 正式環(huán)境記得關(guān)閉氨范āＫ塘！Ｅκ病措嵌！
          // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗芦缰，具體錯誤信息可以打開config的debug模式查看企巢，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名饺藤。
        });
      })
    },

將configWxApi方法寫入cerated中即可
wechatParamsByRequestComm方法為獲取wx.config中參數(shù)的方法,可以配合后端完成

注意事項：
ios系統(tǒng)調(diào)用api的時候會有系統(tǒng)默認(rèn)彈窗,安卓則沒有,所以需要做好兼容處理

首先附上data代碼塊的數(shù)據(jù)

data () {
    return {
      show: false,//是否彈窗
      img1: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      img2: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      imgFlag: '',//點擊的是哪張圖片
      timer: null
    }
  },

當(dāng)點擊上傳圖片時,ios不需要調(diào)用咋自己的彈窗,Android則需要先調(diào)用咋自己寫的彈窗,兼容代碼如下
點擊安卓首先調(diào)用彈窗,然后再調(diào)用wx的api,蘋果直接調(diào)用wx的api(詳情見goToFilm方法)

this.isMobile()方法為判斷當(dāng)前是ios還是Android,安卓為1,ios為2

boxClick (flag) {
      console.log('flag: ', flag);
      console.log(this.isMobile());
      this.imgFlag = flag
      if (this.isMobile() == '1') {//安卓系統(tǒng)時候才會調(diào)用自己的彈窗,ios有默認(rèn)彈窗
        this.show = true
      } else if (this.isMobile() == '2') {//蘋果系統(tǒng)就直接調(diào)用方法,會有默認(rèn)彈窗
        this.goToFilm(['camera', 'album'])
      }
    },

重點來了,如下為調(diào)用wx api的方法
定時器可以加也可以不加

 goToFilm (sourceType) {
      this.show = false
      console.log(sourceType);
      wx.chooseImage({
        count: 1, // 默認(rèn)9
        sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖包斑，默認(rèn)二者都有 ['original', 'compressed']
        sourceType: sourceType, // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有 ['album', 'camera']
        success: (res) => {
          let localIds = res.localIds;
          let localId = localIds[0]
          console.log('success成功回調(diào)res', res);

          this.timer = window.setTimeout(() => {
            wx.uploadImage({
              localId: localId, // 需要上傳的圖片的本地ID涕俗，由chooseImage接口獲得
              isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
              success: (res) => {
                let serverId = res.serverId; // 返回圖片的服務(wù)器端ID

                wx.downloadImage({
                  serverId: serverId, // 需要下載的圖片的服務(wù)器端ID神帅，由uploadImage接口獲得
                  isShowProgressTips: 1, // 默認(rèn)為1再姑，顯示進(jìn)度提示
                  success: (res) => {
                    let localId = res.localId; // 返回圖片下載后的本地ID

                    wx.getLocalImgData({
                      localId: localId,
                      success: (result) => {
                        console.log('result: ', result);
                        if (this.isMobile() == '2') {//蘋果系統(tǒng)
                          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') {//安卓系統(tǒng)
                          console.log('android');
                          let imgSrc = 'data:image/jpeg/png;base64,' + result.localData; // localData是圖片的base64數(shù)據(jù)，可以用img標(biāo)簽顯示
                          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接口調(diào)用完成');
                      }
                    });
                  }
                })
              }
            })
          }, 100);

        },

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

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

制作不易,如果覺得用得上或者覺得我寫的還不錯的可以點個贊謝謝

結(jié)束