h5页面调用微信jssdk

1.安装 weixin-js-sdk
npm install weixin-js-sdk
2.在使用页面引入

import wx from 'weixin-js-sdk'

3.在mounted里面进行wu.config()配置

 <template>
  <div class="head-top">
    <i class="iconfont icon-paizhao iconRight" @click="onClickUp">
    </i>
  </div>
</template>
<script>
  import wx from 'weixin-js-sdk';
  export default {
    data(){
      return {
      }
    },
    mounted () {
      this.getConfig()
    },
    methods: {
    //配置weixinconfig
     getConfig() {
        this.wxShow = sessionStorage.getItem('wxShow');
        let _this = this;
        this.$http.get(`/wx/jsApi/${this.appID}/getJsTicket?refresh=true`)
          .then(res => {
            if(res.ok){
              _this.$http.get(`/wx/jsApi/${this.appID}/signature`, {params: {
                url : window.location.href.split('#')[0]
              }}).then(res => {
                wx.config({
                  debug:true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                  appId: _this.appID, // 必填，公众号的唯一标识
                  timestamp: res.body.timestamp, // 必填，生成签名的时间戳
                  nonceStr: res.body.nonceStr, // 必填，生成签名的随机串
                  signature: res.body.signature, // 必填，签名
                  jsApiList: ["chooseImage", "uploadImage", "downloadImage",]  // 必填，需要使用的JS接口列表
                });
                wx.error(function (res) {
                  console.log('wxerr',res)
                });
              })
            }
          })
      },
      
      //点击获取图片
       onClickUp(){
        let _this = this;
        this.$router.push({path:'/homepage'});
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            let localId = res.localIds[0].toString(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            console.log('localId',localId)
            // 判断 ios
            if (window.__wxjs_is_wkwebview) {
              _this.wxgetLocalImgData(localIds);
              _this.headerImage = res.localData;
              _this.postImg();
            }else{
              _this.headerImage = 'data:image/jpeg/png;base64,' + res.localData;
              _this.postImg();
            }
            console.log('localId',localId)
            // _this.wxuploadImage(localIds);
          },
          fail: function (res) {
            console.log("失败")
          }
        });
      },
      
//得到本地图片地址
wxgetLocalImgData(localIds){
        let _this = this;
        var i = 0; var length = localIds.length;
        var upload = function() {
          wx.getLocalImgData({
            localId: localIds[i], // 图片的localID
            success: function (res) {
              let localData = res.localData; // localData是图片的base64数据，可以用img标签显示
              localData = localData.replace('jgp', 'jpeg');
              _this.localIdImgs.push(localData);
              if( _this.localIdImgs.length >= _this.imgaesMaxLenght ){
                _this.imgLenght = false
              }
              i++;
              i < length && upload();
            }
          });
        }
        upload();
      },

    },
    }
</script>

4.需要的接口文档
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115