小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> uniapp通过微信小程序给关联公众号发送消息提醒

uniapp通过微信小程序给关联公众号发送消息提醒

1. 前提条件

  • 微信小程序与公众号已完成关联。

  • 已在微信公众平台完成统一服务消息的相关配置,获取模板 ID。

  • 小程序需有用户的同意授权,以获取用户的 openid

2. 实现步骤

步骤 1:获取用户 openid

在用户授权的情况下,通过小程序的登录接口获取用户的 openid

// 在页面的 methods 中添加以下方法
login() {
    uni.login({
        provider: 'weixin',
        success: (loginRes) => {
            // 调用后端接口,将 code 发送给后端,后端换取 openid
            uni.request({
                url: 'https://your-api.com/getOpenid',
                data: {
                    code: loginRes.code
                },
                success: (res) => {
                    this.openid = res.data.openid;
                }
            });
        }
    });
}

步骤 2:推送统一服务消息

在小程序端触发消息推送时,要调用微信的统一服务消息接口。此操作一般需后端完成,因为要使用小程序的 access_token。以下是一个后端(以 Node.js 为例)的示例代码:

const axios = require('axios');

// 获取 access_token
async function getAccessToken(appid, secret) {
    const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
    const res = await axios.get(url);
    return res.data.access_token;
}

// 发送统一服务消息
async function sendUniformMessage(accessToken, openid, templateId, page, data) {
    const url = `https://api.weixin.qq.com/cgi-bin/message/wxopen/template/uniform_send?access_token=${accessToken}`;
    const postData = {
        touser: openid,
        weapp_template_msg: {
            template_id: templateId,
            page: page,
            data: data
        },
        mp_template_msg: {
            appid: '公众号的 appid',
            template_id: templateId,
            url: '公众号文章链接',
            miniprogram: {
                appid: '小程序的 appid',
                pagepath: page
            },
            data: data
        }
    };
    const res = await axios.post(url, postData);
    return res.data;
}

// 主函数
async function main() {
    const appid = '小程序的 appid';
    const secret = '小程序的 secret';
    const openid = '用户的 openid';
    const templateId = '统一服务消息模板 ID';
    const page = '小程序页面路径';
    const data = {
        "keyword1": {
            "value": "消息内容 1"
        },
        "keyword2": {
            "value": "消息内容 2"
        }
    };

    const accessToken = await getAccessToken(appid, secret);
    const result = await sendUniformMessage(accessToken, openid, templateId, page, data);
    console.log(result);
}

main();

步骤 3:在 UniApp 中调用后端接口

在 UniApp 里调用后端的消息推送接口,示例代码如下:

sendMessage() {
    uni.request({
        url: 'https://your-api.com/sendMessage',
        method: 'POST',
        data: {
            openid: this.openid,
            templateId: '统一服务消息模板 ID',
            page: '小程序页面路径',
            data: {
                "keyword1": {
                    "value": "消息内容 1"
                },
                "keyword2": {
                    "value": "消息内容 2"
                }
            }
        },
        success: (res) => {
            console.log('消息发送结果:', res.data);
        }
    });
}


联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了