微信公众号开发教程：从注册到前后端实现
微信公众号开发是一个涉及多个环节的过程，包括公众号注册、后端服务搭建、前端页面开发以及微信JS-SDK的集成。本文将详细介绍如何开发一个微信公众号，包括前后端分离的实现。
一、注册微信公众号
登录微信公众平台
打开微信公众平台官网：https://mp.weixin.qq.com/，点击右上角的“注册”按钮。按照提示填写相关信息，如公众号名称、功能介绍、头像等，并选择公众号类型（订阅号或服务号）。完成邮箱验证、信息登记等步骤，提交审核。审核通过后，即可获得一个微信公众号。 获取开发参数
登录微信公众平台后台，进入“设置”->“公众号设置”->“功能设置”页面。记录下AppID和AppSecret，这两个参数在后续开发中非常重要，用于调用微信接口等。
二、后端开发
（一）环境搭建
创建Spring Boot项目
使用Spring Initializr（https://start.spring.io/）快速生成一个Spring Boot项目，选择需要的依赖，如Spring Web、Lombok等。下载项目并解压到本地。 引入微信相关依赖
在pom.xml文件中添加微信相关的依赖，例如weixin-java-miniapp（用于微信公众号开发）：
配置微信公众号参数
在application.yml文件中添加微信公众号的配置：wechat:
mp:
app-id: your_appid
app-secret: your_appsecret
token: your_token
aes-key: your_aes_key
（二）创建微信公众号服务
创建WeChatService类
用于处理微信公众号的相关业务逻辑：import com.github.binarywang.wxpay.config.WxPayConfig;
import com.github.binarywang.wxpay.service.WxPayService;
import com.github.binarywang.wxpay.service.impl.WxPayServiceImpl;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl;
import me.chanjar.weixin.mp.config.WxMpConfigStorage;
import me.chanjar.weixin.mp.config.impl.WxMpDefaultConfigImpl;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Service;
@Service
public class WeChatService {
@Value("${wechat.mp.app-id}")
private String appId;
@Value("${wechat.mp.app-secret}")
private String appSecret;
@Value("${wechat.mp.token}")
private String token;
@Value("${wechat.mp.aes-key}")
private String aesKey;
@Bean
public WxMpService wxMpService() {
WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
config.setAppId(appId);
config.setSecret(appSecret);
config.setToken(token);
if (aesKey != null && !aesKey.isEmpty()) {
config.setAesKey(aesKey);
}
WxMpService wxMpService = new WxMpServiceImpl();
wxMpService.setWxMpConfigStorage(config);
return wxMpService;
}
}
（三）处理微信服务器验证
创建WeChatController类
用于处理微信服务器的验证请求：import me.chanjar.weixin.common.api.WxConsts;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.bean.message.WxMpXmlMessage;
import me.chanjar.weixin.mp.bean.message.WxMpXmlOutMessage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@RestController
@RequestMapping("/wechat")
public class WeChatController {
@Autowired
private WxMpService wxMpService;
@GetMapping
public String validate(HttpServletRequest request, HttpServletResponse response) throws IOException {
return wxMpService.checkSignature(request);
}
@PostMapping
public void message(HttpServletRequest request, HttpServletResponse response) throws IOException, WxErrorException {
WxMpXmlMessage inMessage = WxMpXmlMessage.fromXml(request.getInputStream());
WxMpXmlOutMessage outMessage = null;
switch (inMessage.getMsgType()) {
case TEXT:
outMessage = WxMpXmlOutMessage.TEXT().content("Hello, WeChat!").fromUser(inMessage.getToUser()).toUser(inMessage.getFromUser()).build();
break;
default:
outMessage = WxMpXmlOutMessage.TEXT().content("Unsupported message type").fromUser(inMessage.getToUser()).toUser(inMessage.getFromUser()).build();
break;
}
response.setContentType("application/xml; charset=UTF-8");
response.getWriter().write(outMessage.toXml());
}
}
（四）配置菜单
创建MenuController类
通过微信接口动态生成菜单：import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.bean.menu.WxMpMenu;
import me.chanjar.weixin.mp.bean.menu.WxMpMenuButton;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class MenuController {
@Autowired
private WxMpService wxMpService;
@GetMapping("/createMenu")
public String createMenu() throws WxErrorException {
WxMpMenu menu = new WxMpMenu();
WxMpMenuButton button1 = new WxMpMenuButton();
button1.setName("菜单1");
button1.setType(WxConsts.MenuButtonType.CLICK);
button1.setKey("MENU1");
WxMpMenuButton button2 = new WxMpMenuButton();
button2.setName("菜单2");
button2.setType(WxConsts.MenuButtonType.VIEW);
button2.setUrl("http://your-domain.com/page2");
menu.getButtons().add(button1);
menu.getButtons().add(button2);
wxMpService.getMenuService().menuCreate(menu);
return "Menu created successfully";
}
}
三、前端开发
（一）集成微信JS-SDK
安装微信JS-SDK
在项目根目录下运行以下命令安装微信JS-SDK：npm install weixin-js-sdk --save
创建获取配置信息的工具函数
创建一个文件（例如src/utils/wechat.js），用于封装获取微信JS-SDK配置信息的逻辑：import { request } from 'uni-app';
export const getWechatConfig = async (url, jsApiList) => {
const res = await request({
url: `${process.env.VUE_APP_API_BASE_URL}/wechat/config`, // 后端接口地址
method: 'GET',
data: {
url: url, // 当前页面的完整URL
jsApiList: jsApiList.join(','),
},
});
if (res[1].statusCode === 200) {
return res[1].data;
} else {
console.error('获取微信JS-SDK配置失败', res[1]);
throw new Error('获取微信JS-SDK配置失败');
}
};
初始化微信JS-SDK
在src/utils/wechat.js中继续添加初始化微信JS-SDK的逻辑：export const initWechatSDK = async (url, jsApiList) => {
const config = await getWechatConfig(url, jsApiList);
const { appId, timestamp, nonceStr, signature } = config;
uni.$wx.config({
debug: false, // 开启调试模式
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名
jsApiList: jsApiList, // 必填，需要使用的JS接口列表
});
uni.$wx.ready(() => {
console.log('微信JS-SDK初始化成功');
});
uni.$wx.error((err) => {
console.error('微信JS-SDK初始化失败', err);
});
};
（二）在页面中使用微信JS-SDK
在页面中调用初始化函数
在需要使用微信JS-SDK功能的页面中（例如src/pages/Index.vue），调用initWechatSDK函数：
四、部署与测试
（一）部署后端服务
将后端服务部署到服务器
确保后端服务可以通过公网访问。在微信公众平台后台的“开发”->“基本配置”页面，配置服务器地址（URL）、Token和AES密钥。
（二）部署前端服务
将前端项目打包部署
使用uni-app的build命令打包项目：uni build --h5
将打包后的dist目录部署到服务器上，确保可以通过微信公众号访问。
（三）测试
测试微信服务器验证
访问http://your-server-domain/wechat，确保微信服务器可以正常验证。 测试消息处理
发送消息到公众号，确保后端可以正确处理并回复。 测试微信JS-SDK功能
在前端页面中测试分享到朋友圈、选择图片等功能，确保微信JS-SDK初始化成功并可以正常使用。
五、总结
通过以上步骤，你可以在uni-app（Vue 3）项目中成功开发一个微信公众号，包括前后端分离的实现。希望这篇教程能帮助你顺利完成开发！
如果在开发过程中遇到任何问题，欢迎随时提问。祝你开发顺利！
希望这篇教程对你有帮助！如果有任何问题或需要进一步的解释，请随时告诉我。