微信公众号开发教程：从注册到前后端实现

专注代码十年

已于 2025-04-09 15:35:27 修改

阅读量911

点赞数 12

文章标签：微信

于 2025-04-09 15:21:45 首次发布

本文链接：https://blog.csdn.net/qq_35757427/article/details/147094665

版权

微信公众号开发教程：从注册到前后端实现

微信公众号开发是一个涉及多个环节的过程，包括公众号注册、后端服务搭建、前端页面开发以及微信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（用于微信公众号开发）：

<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-miniapp</artifactId>
    <version>4.1.0</version>
</dependency>

配置微信公众号参数

在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函数：

<template>
    <view>
        <button @click="shareToTimeline">分享到朋友圈</button>
    </view>
</template>

<script>
import { onLoad } from 'vue';
import { initWechatSDK } from '@/utils/wechat.js';

export default {
    setup() {
        const jsApiList = ['updateTimelineShareData', 'updateAppMessageShareData'];

        onLoad(() => {
            initWechatSDK(window.location.href.split('#')[0], jsApiList);
        });

        const shareToTimeline = () => {
            uni.$wx.updateTimelineShareData({
                title: '分享标题',
                link: 'https://your-domain.com/share',
                imgUrl: 'https://your-domain.com/image.jpg',
                success: () => {
                    console.log('分享到朋友圈成功');
                },
                fail: (err) => {
                    console.error('分享到朋友圈失败', err);
                },
            });
        };

        return {
            shareToTimeline,
        };
    },
};
</script>