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公眾號開發呼叫微信掃一掃介面實現掃碼功能（JSSDK）

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

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

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

專案中的引用 import wx from 'weixin-js-sdk'

2、呼叫sign介面傳入當前環境的url、公眾號簽名信息

3、methods（資料處理）

wx.scanQRCode 呼叫微信的掃一掃介面（官方文件地址可檢視引數介紹）

needResult 預設為0，掃描結果由微信處理，1則直接返回掃描結果（根據自己的專案需求）

resultStr 二維碼中攜帶的引數 (needResult為1時，掃碼返回結果)

處理掃碼後的引數並賦值，呼叫專案中的介面跳轉頁面等操作（根據自己的專案需要）

以上這篇vue 使用微信jssdk,呼叫微信相簿上傳圖片功能就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。