首先说以下微信公众号网页,第一次听说,估计有些人都不知道是什么,其实就是在微信公众号中运行的网页,使用的是内置的webview
具体流程(开发者而言)
1. 需要在微信公众号测试号中添加域名, 例如自己创建的是nodejs服务器,所以我的域名是localhost:3000, 注意, 因为是测试号, 所以是可以没有http前缀的, 但是官方给的文档中填写的是需要有前缀的, 也就是需要使用备案过的域名 , 没有的话 , 可以使用测试号下面的 设置js安全域名, 就能设置localhost域名了
2. 在html网页中引入 SDK 文件, 官方给的是 在线地址 , 可以cv到浏览器中 ctrl+s 保存到本地
3. 在文件夹根目录下使用如下命令
npm init -y // 初始化一个包管理文件 npm install express -- save // 下载express框架 npm install xtpl xtemplate --save // 模板插件, 后面会用得上
// 在根目录下创建app.js文件 // 在根目录下运行 node ./app.js // 开启本地服务器 // 推荐使用nodemon ./app.js , 不需要反复重启服务器, 但是要下载这个包
创建的app.js文件如下
如果这样访问文件报错了,可能是地址的问题, 建议使用 path 绝对路径, 不容易出问题
const express = require(\'express\'); const app = express(); // 设置静态托管文件 app.use(express.static("./public")); app.set("view engine", "xtpl"); app.set("views", "./views") const { Wechat } = require(\'wechat-jssdk\'); const wx = new Wechat({ appId: \'这里改成你自己测试号的appid\', appSecret: \'这里改成你测试号的appSecret\' }); app.get(\'/\', (req, res) => {
// 这里的http地址, 简单理解为给该页面注册, 让该公众号网页拥有使用js-sdk库中API接口的权利 wx.jssdk.getSignature(\'http://localhost:3000/\').then(signatureData => {
// 正常使用render渲染文件的时候, 是不能传递参数的, 这里使用的 render 是需要结合上面的 xtpl 和 xtemplate 两个插件一起使用的
// 这里的index 是上面设置的模版文件目录下的 index 文件, 后缀省略, 应模板要求, index,html 文件的后缀名字需要改成 xtpl res.render("index", signatureData) }); }) app.listen(3000, () => { console.log(\'serve is running on localhost:3000\') })
中间还下载了 一个名叫wechat-jssdk 的包,是一个辅助获取配置的包
附html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--- 这里引入的js文件是官方提供的 js-sdk 的API 库 ---> <script src="js/jweixin-1.6.0.js"></script> <title>Document</title> </head> <body> <h1>Hello World</h1> <script>
// 这是官方提供的验证接口访问权限的js , 双括号的语法是 xtpl 提供的一种接收数据的语法, app.js中传递过来的参数会默认填充到双花括号里面
wx.config({
// 第一个是开启调试提示, 也就是微信公众号开发工具页面加载的时候,顶部会提示 配置 结果 debug: true, appId: \'{{appId}}\', timestamp: {{ timestamp }}, nonceStr: \'{{nonceStr}}\', signature: \'{{signature}}\',
// 这里是存放使用的 API 的地址, 所有使用的 API 都要在这里登记 jsApiList: [] });
wx,ready(() => {
console.log("验证成功, 所有的接口调用都写在这里面就不会有问题了!!!")
}) </script> </body> </html>
想要网页在微信中正常运行,需要在微信中添加视口标签, 因为开启了debug ,所以在微信公众号调试工具中, 会有错误提示alert, 直到看到 config: ok , 说明配置成功
说明: 配置中的jsApiList是一个空数组, 在调用公众号的 API的时候, 需要把 API的名字放在数组中才能正常使用!!!