专栏目录请点击
简介
- 我们一般在自定义返回的页面上，点击，可以使用微信的js-sdk，但是需要我们进行引入
- 假设我们在search路由引入js-sdk，在引入js-sdk的时候，我们首先要生成js-sdk的使用的签名，签名的规则我们可以查看官网 点击
生成签名
服务器地址的获取
- 打开设置服务器地址的网页，点击
- 配置js安全域名，安全域名尽量与url相同，但是不带http前缀
- 在我们的
config/index.js下，保存我们的域名
module.exports = {
...
url:"http://1fyd7hkb6qqf.ngrok.xiaomiqiu123.top"
}
签名的生成
app.get("/search", async(req, res) => {
// 首先生成签名
/*
1. 需要以下四个参数
noncestr=Wm3WZYTPz0wzccnW 随机字符串
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg 临时票据
timestamp=1414587457 时间戳
url=http://mp.weixin.qq.com?params=value 当前服务器地址
2. 将其进行字典排序，并用&拼接在一起
3. 进行sha1加密
*/
// 1. 获取到参数
const { ticket } = await wechat.fetchTicket()
const timestamp = Date.now(), jsapi_ticket = ticket, noncestr = Math.random().split(".")[1]
// 2. 进行字典排序
const str = [
`jsapi_ticket=${jsapi_ticket}`,
`timestamp=${timestamp}`,
`url=${url}/search`,
`noncestr=${noncestr}`,
].sort().join("&")
console.log(str)
// 3. 进行sha1加密
const signature = sha1(str)
// 4. 将相关的参数传入到网页中
res.render("search",{signature,noncestr,timestamp})
})
网页模板处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
// 1. 绑定安全域名
// 2. 引入js文件
// 3. 通过config接口注入权限配置
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: '<%=appId %>', // 必填，公众号的唯一标识
timestamp: '<%=timestamp%>', // 必填，生成签名的时间戳
nonceStr: '<%=nonceStr%>', // 必填，生成签名的随机串
signature: '<%=signature%>',// 必填，签名
jsApiList: [
"onMenuShareQQ",
"onMenuShareQZone",
"startRecord",
"stopRecord",
"translateVoice"
] // 必填，需要使用的 JS 接口列表
});
wx.ready(function () {
// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
});
wx.error(function (res) {
// config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
});
</script>
</head>
<body>
<h1>这是一个搜索页面</h1>
</body>
</html>
对于代码的解释
- 绑定安全域名，我们在服务器地址获取的步骤已经做了
- 引入js文件，我们要在当前页面的头部引入微信sdk的文件，这个官网中也有说明
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 引入文件之后，我们全局就多了
wx这个对象，这个时候，我们需要调用他的config方法来进行权限的注入 - 我们如何知道权限注入是否成功了呢，我们还是通过wx中提供的方法，当通过后会调用
wx.ready的方法，没有通过就会调用wx.error的方法
扫一扫
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
