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

路过一下 發表於 2020-4-20 16:21:00

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

首先说以下微信公众号网页,第一次听说,估计有些人都不知道是什么,其实就是在微信公众号中运行的网页,使用的是内置的webview
具体流程(开发者而言)
1. 需要在微信公众号测试号中添加域名, 例如自己创建的是nodejs服务器,所以我的域名是localhost:3000, 注意, 因为是测试号, 所以是可以没有http前缀的, 但是官方给的文档中填写的是需要有前缀的, 也就是需要使用备案过的域名 , 没有的话 , 可以使用测试号下面的设置js安全域名, 就能设置localhost域名了
2. 在html网页中引入 SDK 文件, 官方给的是在线地址  , 可以cv到浏览器中 ctrl+s 保存到本地
3. 在文件夹根目录下使用如下命令
<div class="cnblogs_code">
<pre>npm init -y// 初始化一个包管理文件
npm install express -- save // 下载express框架
npm install xtpl xtemplate --save // 模板插件, 后面会用得上 

//在根目录下创建app.js文件

// 在根目录下运行
node ./app.js // 开启本地服务器

// 推荐使用nodemon ./app.js , 不需要反复重启服务器, 但是要下载这个包</pre>
</div>
创建的app.js文件如下
如果这样访问文件报错了,可能是地址的问题, 建议使用 path 绝对路径, 不容易出问题
<div class="cnblogs_code">
<pre>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')
})</pre>
</div>
中间还下载了一个名叫wechat-jssdk 的包,是一个辅助获取配置的包
附html代码
<div class="cnblogs_code">
<pre><!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> 　　　　// 这是官方提供的验证接口访问权限的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></pre>
</div>
想要网页在微信中正常运行,需要在微信中添加视口标签, 因为开启了debug ,所以在微信公众号调试工具中, 会有错误提示alert, 直到看到  config: ok , 说明配置成功
 
说明:  配置中的jsApiList是一个空数组, 在调用公众号的 API的时候, 需要把 API的名字放在数组中才能正常使用!!!

</div>
<div id="MySignature" role="contentinfo">
本想把生活活成一首诗, 时而优雅 , 时而豪放 , 结果活成了一首歌 , 时而不靠谱 , 时而不着调 
来源：https://www.cnblogs.com/fmg0224/p/12738515.html

頁: [1]

琼殿技术论坛's Archiver

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