vue 使用微信jssdk,調用微信相冊上傳圖片功能

更新時間：2020年11月13日 15:18:36 作者：只會切圖的前端

這篇文章主要介紹了vue 使用微信jssdk,調用微信相冊上傳圖片功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue 使用微信jssdk

1、引入weixin-js-sdk

npm install weixin-js-sdk

使用文檔 https://www.npmjs.com/package/weixin-js-sdk

2、配置 vue中微信jssdk配置

import wx from 'weixin-js-sdk'
 created(){ //微信jssdk配置
 let timestamp=new Date().getTime();//時間戳
 let noncestr=Math.random().toString(36).substr(2);//隨機字符串
 let url = "http://"+window.location.host+'/' ;//獲取錨點之前的鏈接 
 let dataJ={
  timestamp,
  noncestr,
  url
 }
 //獲取簽名 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 getSignatureApi(dataJ).then(res=>{//調用獲取簽名方法
  wx.config({
  debug: false,
  appId: '12312312312312', // 必填，公眾號的唯一標識
  timestamp:timestamp , // 必填，生成簽名的時間戳
  nonceStr: noncestr, // 必填，生成簽名的隨機串
  signature:res.signature,
  jsApiList: [
   'chooseImage',//選擇圖片
   'uploadImage'//上傳圖片
  ] // 必填，需要使用的JS接口列表
  });
 })
}

3、使用

methods: {
  choseFile:function(id,index){//點擊事件選擇圖片
 var _this=this;
 wx.chooseImage({//
  count: 1, // 默認9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
  success: function (res) {
  let localId=res.localIds;//獲取到本地localIds
  wx.uploadImage({//上傳到微信服務器
   localId: localId.toString(), // 需要上傳的圖片的本地ID，由chooseImage接口獲得
   isShowProgressTips: 1, // 默認為1，顯示進度提示
   success: function (ret) {}
  });
  }
 });
 }
}

補充知識：Vue公眾號開發(fā)調用微信掃一掃接口實現(xiàn)掃碼功能（JSSDK）

1、安裝、引用微信js-sdk

#通過yarn安裝 yarn add weixin-js-sdk

#通過npm安裝 npm i weixin-js-sdk

項目中的引用 import wx from 'weixin-js-sdk'

2、調用sign接口傳入當前環(huán)境的url、公眾號簽名信息