vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能
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)簽名信息
3、methods(數(shù)據(jù)處理)
wx.scanQRCode 調(diào)用微信的掃一掃接口(官方文檔地址可查看參數(shù)介紹)
needResult 默認(rèn)為0,掃描結(jié)果由微信處理,1則直接返回掃描結(jié)果(根據(jù)自己的項(xiàng)目需求)
resultStr 二維碼中攜帶的參數(shù) (needResult為1時(shí),掃碼返回結(jié)果)
處理掃碼后的參數(shù)并賦值,調(diào)用項(xiàng)目中的接口跳轉(zhuǎn)頁(yè)面等操作(根據(jù)自己的項(xiàng)目需要)
以上這篇vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
- vue調(diào)用本地?cái)z像頭實(shí)現(xiàn)拍照功能
- Vue 瑩石攝像頭直播視頻實(shí)例代碼
- Vue2.0實(shí)現(xiàn)調(diào)用攝像頭進(jìn)行拍照功能 exif.js實(shí)現(xiàn)圖片上傳功能
- vue調(diào)用微信JSDK 掃一掃,相冊(cè)等需要注意的事項(xiàng)
- 詳解Vue調(diào)用手機(jī)相機(jī)和相冊(cè)以及上傳
- imageVue相冊(cè)Sitemenu插件使用方法及注意事項(xiàng)
- vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能
相關(guān)文章
Vue?Router嵌套路由(children)的用法小結(jié)
嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由導(dǎo)航和路由容器(router-link、router-view),通過(guò)配置children可實(shí)現(xiàn)多層嵌套,這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下2022-08-08

使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽

Vue常見(jiàn)報(bào)錯(cuò)以及解決方案實(shí)例總結(jié)

vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式