首先说以下微信公众号网页,第一次听说,估计有些人都不知道是什么,其实就是在微信公众号中运行的网页,使用的是内置的webview
具体流程(开发者而言)
1. 需要在微信公众号测试号中添加域名, 例如自己创建的是nodejs服务器,所以我的域名是localhost:3000, 注意, 因为是测试号, 所以是可以没有http前缀的, 我写了好像debug中就报错了
2. 在html网页中引入 SDK 文件, 官方给的是 在线地址 , 可以cv到浏览器中 ctrl+s 保存到本地
3. 在文件夹根目录下使用如下命令
npm init -y // 初始化一个包管理文件 npm install express -- save // 下载创建服务的插件 npm install xtpl xtemplate --save // 模板插件, 后面会用得上 // 在根目录下创建app.js文件 // 在根目录下运行 node ./app.js // 开启本地服务器 // 推荐使用nodemon ./app.js , 不需要反复重启服务器, 但是要下载这个包
创建的app.js文件如下
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: 'wxebb7723e597d9c2b', appSecret: '83c74b80bbb0f41530db4274a684b0e2' }); app.get('/', (req, res) => { wx.jssdk.getSignature('http://localhost:3000/').then(signatureData => { 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"> <script src="js/jweixin-1.6.0.js"></script> <title>Document</title> </head> <body> <h1>Hello World</h1> <script> wx.config({ debug: true, appId: '{{appId}}', timestamp: {{ timestamp }}, nonceStr: '{{nonceStr}}', signature: '{{signature}}', jsApiList: [] }); </script> </body> </html>
想要网页在微信中正常运行,需要在微信中添加视口标签, 因为开启了debug ,所以在微信公众号调试工具中, 会有错误提示alert, 直到看到 config: ok , 说明配置成功
说明: 配置中的jsApiList是一个空数组, 在调用公众号的 API的时候, 需要把 API的名字放在数组中才能正常使用!!!