写在最前方！

作为一名开发人员，在学习任何技术之前，都必须阅读官方文档。

官方文档:https://developers.weixin.qq.com/doc/offiaccount/getting _ started/overview . html

微信官方账号有三种微信:订阅号、服务号、企业微信号。可以根据自己的实际应用场景注册相应的类型。在开发中，我们可以使用微信公众平台测试号进行开发测试。

但是在开发之前，需要确定项目实际运行的账号类型，因为涉及到官方的接口权限。根据权限的不同，在开发之前，我们需要根据业务场景和接口权限，为相应的场景设计解决方案。

一、开发准备工作介绍：

我们需要准备一个微信公众平台测试账号，微信公众平台测试账号不需要注册，任何人通过个人微信扫描二维码登录即可获得测试账号。

测试帐户登录地址:

https://mp.weixin.qq.com/debug/cgi-bin/sandbox? t =沙盒/登录

我们还需要准备一个内网穿透工具(ngrok)。在开发过程中，我们需要将本地开发服务器映射到外部网络，以模拟真实服务器的使用。在这里，我们可以使用(Express) (MongoDB)数据库

二、公众号用户消息处理流程

微信官方账号微信消息处理流程示意图

如图，用户无论是通过微信微信官方账号发送一段文字、一张图片还是点击一个按钮，用户的这些操作首先都会被发送到微信服务器，然后消息经过微信服务器处理后按照一定的格式发送到开发者服务器。开发服务器收到微信服务器发来的消息后，可以根据界面文档根据用户的操作进行相应的业务逻辑处理，然后按照一定的格式将结果返回给微信服务器，再由微信服务器将处理后的数据返回给用户。

对于开发者服务器来说，不需要关注微信服务器和用户的交互。开发者服务器只需要关注微信服务器发送给开发者服务器的数据，然后根据文档处理接收到的数据。所以开发者服务器收到每个请求时，都要验证消息来源是否是微信服务器发送的，验证通过后才能根据接口文档处理相应的业务逻辑。

三、微信公众平台测试号说明

1。测试帐户信息:

开发者ID (AppID): 开发者ID是微信官方账号的开发识别码，可以用开发者密钥调用微信官方账号的接口能力。

App secret: 开发者秘密是微信官方账号中验证开发者身份的密码，安全性极高。切记不要将秘钥直接交给第三方开发者，或者直接存储在代码中。如需第三方代为开发微信官方账号功能，请授权访问。

2、接口配置信息：

URL: 开发者服务器的地址，是开发者服务器用来接收和响应微信服务器的消息和事件的接口。

Token:用于生成签名的随机字符串(必须是英文或数字，长度为3-32个字符)。这个签名后面会用到，暂时在这里填个内容也是可以的。

3、JS接口安全域名：

设置JS接口安全域名后，微信官方账号开发者就可以在该域名下调用微信开放的JS接口。

以上内容可以通过官方文件深入理解:前期开发必读和起步开发-入门指南。

四、搭建本地应用

使用Express+MongoDB技术栈搭建一个简单的本地开发者服务器。

1、配置信息

2、最简单服务器代码示例：

const express = require('express') const app = express() const port = 3000 // 定义微信服务器接口获取微信服务器携带过来的参数。 app.get("/wechat", (req, res) => { console.log(req.query); res.send("Hello World!"); }); app.listen(port, () => { console.log(`Example app listening at http://localhost:$

`) })3、req.query返回信息

const express = require(& # 39；快递& # 39；) constapp = express() constport = 3000 //定义微信服务器接口从微信服务器获取的参数。 app . get(& # 34；/微信& # 34；，(req，RES)= & gt；{ console . log(req . query)； RES . send(& # 34；你好世界！"); })； app.listen(port，()= & gt{ console.log(`示例应用程序侦听http://localhost:$ { port } `) })3 .req.query返回信息

4、req.query返回信息字段说明

开发人员通过签名验证请求。如果确认GET请求来自微信服务器，并原样返回echostr参数内容，则开发者服务器配置成功，否则开发者服务器配置失败。

加密/验证过程如下:

将token、timestamp、nonce三个参数按字典顺序排序；

将三个参数串拼接成一个字符串进行sha1加密；

开发人员获得的加密字符串可以与签名进行比较。如果字符串相等，说明请求来自微信。

5、js代码示例：

app . get(& # 34；/微信& # 34；，(req，RES)= & gt；{ const { signature，echostr，timestamp，nonce } = req.query const token = & # 34；lizhijie0429 & # 34； const str =[令牌，时间戳，随机数]。排序()。加入(& # 34；"); const sha 1 str = sha1(str)； sha1Str ===签名？RES . send(echostr):RES . send(& # 34；错误& # 34；); })；此时，转到提交接口配置信息[/s2/]。如果提示成功，说明我们的开发环境已经搭建好了。

过去的内容:

【Vue】在Vite+Vue3.0中用jsx语法开发。

【Vite+vue3】vue3中keep-alive的使用