微信小程序与公众号已完成关联。
已在微信公众平台完成统一服务消息的相关配置,获取模板 ID。
小程序需有用户的同意授权,以获取用户的 openid
。
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; } }); } }); }
在小程序端触发消息推送时,要调用微信的统一服务消息接口。此操作一般需后端完成,因为要使用小程序的 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();
在 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); } }); }