- 步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“
JS
接口安全域名”。
vue2
项目
- 步骤二:引入
JS
文件
在
vue
中安装插件-----npm i -S weixin-js-sdk
vue2
版本1.6.0
main.js
// 全局引入
import Vue from "vue";
import App from "./App.vue";
import wx from "weixin-js-sdk";
Vue.use(Vant);
Vue.prototype.$wx = wx;
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
- 步骤三:通过
config
接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的 JS 接口列表
});
- 示例
// index.js
// JS-SDK使用权限签名算法
//封装之后的axios不要直接使用哦,用webpack跨域了
export const getticket = (initData) => get("/api/ticket/getticket", initData);
// Home.vue
import {
getticket,
} from "@/utils/index.js"; //接口请求封装
methods:{
// 获取签名算法
obtainSignature() {
this.isLateOverdue(); //判断access_token 有无过期后续会说
let a = {
//这个token是从接口获取到的存到本地存储的 //可以看文档获取这个token
access_token: JSON.parse(localStorage.getItem("access_token"))
.access_token, // 之前获取的access_token,后续会说
type: "jsapi",
};
getticket(a).then((res) => {
console.log(res);
res.expires_in = +new Date() + 7200 * 1000 - 5 * 60 * 1000;
localStorage.setItem("jsapi_ticket", JSON.stringify(res)); //存进本地存储
});
},
}
- 成功返回的接口数据
{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}
// 获得jsapi_ticket之后,就可以生成 JS-SDK 权限验证的签名了。
签名算法规则
签名生成规则如下:参与签名的字段包括noncestr
(随机字符串), 有效的jsapi_ticket
, timestamp
(时间戳), url
(当前网页的URL
,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用 URL
键值对的格式(即key1=value1&key2=value2…
)拼接成字符串string1
。这里需要注意的是所有参数名均为小写字符。对string1
作 sha1
加密,字段名和字段值都采用原始值,不进行URL 转义。
- 组合字符串
import {
sha1 } from "../utils/sha1.js"; //接口请求封装
data() {
return {
randomString:
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890", //随机字符串
str: {
},
signature: "",
};
methods: {
// 组合字符串 + 字典排序
sortingStr() {
let timea = 0;
if (
localStorage.getItem("jsapi_ticket") == null &&
JSON.parse(localStorage.getItem("jsapi_ticket")).expires_in <
+new Date()
) {
timea = 1000;
this.obtainSignature();
}
setTimeout(() => {
//防止token过期,导致报错
let strArr = JSON.parse(localStorage.getItem("jsapi_ticket"));
let randonNum = "";
for (let i = 0; i < 17