亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2020年11月13日 15:18:36   作者:只會切圖的前端  
這篇文章主要介紹了vue 使用微信jssdk,調(diào)用微信相冊上傳圖片功能,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

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=>{//調(diào)用獲取簽名方法
  wx.config({
  debug: false,
  appId: '12312312312312', // 必填,公眾號的唯一標(biāo)識
  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({//上傳到微信服務(wù)器
   localId: localId.toString(), // 需要上傳的圖片的本地ID,由chooseImage接口獲得
   isShowProgressTips: 1, // 默認為1,顯示進度提示
   success: function (ret) {}
  });
  }
 });
 }
}

補充知識:Vue公眾號開發(fā)調(diào)用微信掃一掃接口實現(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、調(diào)用sign接口傳入當(dāng)前環(huán)境的url、公眾號簽名信息

3、methods(數(shù)據(jù)處理)

wx.scanQRCode 調(diào)用微信的掃一掃接口(官方文檔地址可查看參數(shù)介紹)

needResult 默認為0,掃描結(jié)果由微信處理,1則直接返回掃描結(jié)果(根據(jù)自己的項目需求)

resultStr 二維碼中攜帶的參數(shù) (needResult為1時,掃碼返回結(jié)果)

處理掃碼后的參數(shù)并賦值,調(diào)用項目中的接口跳轉(zhuǎn)頁面等操作(根據(jù)自己的項目需要)

以上這篇vue 使用微信jssdk,調(diào)用微信相冊上傳圖片功能就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實現(xiàn)組件值的累加

    vue實現(xiàn)組件值的累加

    這篇文章主要為大家詳細介紹了vue實現(xiàn)組件值的累加,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • 使用vNode實現(xiàn)給列表字段打標(biāo)簽

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

    這篇文章主要為大家介紹了使用vNode實現(xiàn)給列表字段打標(biāo)簽示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • Vue常見報錯以及解決方案實例總結(jié)

    Vue常見報錯以及解決方案實例總結(jié)

    最近做了一個比較老的vue項目,啟動居然各種報錯,下面這篇文章主要給大家介紹了關(guān)于Vue常見報錯以及解決方案的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式

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

    今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue3+echarts繪制世界地圖的示例代碼

    Vue3+echarts繪制世界地圖的示例代碼

    最近做項目需要實現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價值,感謝的可以了解一下
    2024-03-03
  • vue3中markRaw示例詳解

    vue3中markRaw示例詳解

    markRaw是將一個對象標(biāo)記為普通對象,而toRaw是將reactive對象變?yōu)槠胀▽ο?在 Vue 3 中,markRaw 是一個用于告訴 Vue 的響應(yīng)性系統(tǒng)不要對某個對象進行轉(zhuǎn)換或追蹤其響應(yīng)性的函數(shù),下面給大家介紹vue3中markRaw詳解,感興趣的朋友一起看看吧
    2024-04-04
  • 最新評論