微信公众号网页开发流程听和接口使用

首先说以下微信公众号网页,第一次听说,估计有些人都不知道是什么,其实就是在微信公众号中运行的网页,使用的是内置的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的名字放在数组中才能正常使用!!!

微信公众号网页开发流程听和接口使用

猜你喜欢