接口簽名校驗工具? ?Js-SDK說明文檔

一.流程

步驟一：綁定域名

微信公眾號的后臺設置，必須是線上的，同時沒有端口號
步驟二：引入JS文件

引入jshttps://res2.wx.qq.com/open/js/jweixin-1.4.0.js

或是

npm install weixin-js-sdk?--save

然后在相應的頁面引入
步驟三：通過config接口注入權限驗證配置
步驟四：通過ready接口處理成功驗證
步驟五：通過error接口處理失敗驗證

<template><div class="cnt"><h1>獲取微信sdk</h1><button @click="clickFn">上傳照片</button></div> </template><script>import wx from 'weixin-js-sdk'import {apState,mapActions} from "vuex";export default {namespace: "my",data() {return {name: ""}},created() {let params = {url:location.href.split("#")[0],// 這里是當前頁面的url，一定要 location.href 獲取，不然簽名會無效。}//getSignFns 是后端接口，請求成功，后端返回需要的參數 this.getSignFns(params).then(res => {wx.config({debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId:'wx8eeb3334724ac61b', // 必填，公眾號的唯一標識timestamp: res.timestamp, // 必填，生成簽名的時間戳nonceStr: res.noncestr, // 必填，生成簽名的隨機串signature: res.signature, // 必填，簽名jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表});wx.ready(function(res) {console.log('成功', res)});wx.error(function(res) {alert('配置驗證失敗: ' + res.errMsg)});});},methods: {...mapActions(["getSignFns",]),clickFn() {console.log('觸發點擊事件')wx.chooseImage({count: 1, // 默認9sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有success: function(res) {console.log('觸發照片')}});}}}

參考報錯問題

總結

以上是生活随笔為你收集整理的vue调用微信qpi的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。