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

路过一下 · 发表于 2020-4-20 16:21:00

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

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

浏览过的版块