vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能

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

這篇文章主要介紹了vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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();//時(shí)間戳
 let noncestr=Math.random().toString(36).substr(2);//隨機(jī)字符串
 let url = "http://"+window.location.host+'/' ;//獲取錨點(diǎn)之前的鏈接 
 let dataJ={
  timestamp,
  noncestr,
  url
 }
 //獲取簽名 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 getSignatureApi(dataJ).then(res=>{//調(diào)用獲取簽名方法
  wx.config({
  debug: false,
  appId: '12312312312312', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp:timestamp , // 必填，生成簽名的時(shí)間戳
  nonceStr: noncestr, // 必填，生成簽名的隨機(jī)串
  signature:res.signature,
  jsApiList: [
   'chooseImage',//選擇圖片
   'uploadImage'//上傳圖片
  ] // 必填，需要使用的JS接口列表
  });
 })
}

3、使用

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

補(bǔ)充知識(shí)：Vue公眾號(hào)開(kāi)發(fā)調(diào)用微信掃一掃接口實(shí)現(xiàn)掃碼功能（JSSDK）

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

#通過(guò)yarn安裝 yarn add weixin-js-sdk

#通過(guò)npm安裝 npm i weixin-js-sdk

項(xiàng)目中的引用 import wx from 'weixin-js-sdk'

2、調(diào)用sign接口傳入當(dāng)前環(huán)境的url、公眾號(hào)簽名信息