最近做项目时需要用到订阅消息这个功能,为了实现这一功能,可让我一顿好找啊。查看了众多博客和相关文章,还是没找到比较详细且适合小白的博客,所以在此我整理了一下我自己写的代码,这是对自己的一份总结,也希望可以帮助跟我一样还在路上的朋友。
首先,需要在微信官方文档查看一下实现订阅消息的步骤订阅消息
其次,因为发送订阅消息需要使用到云开发,所以在项目开始先需对项目进行云开发初始化。
注意:云函数运行前需要部署,如果你不熟悉云环境的话,还是先创建一个吧,不要创建两个,如果有两个环境更不要两个环境之间切来切去,不然这将是很痛的领悟啊!!!切记切记
具体流程
步骤一:获取模板 ID
在微信公众平台手动配置获取模板 ID:
登录 https://mp.weixin.qq.com 获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用。
步骤二:获取下发权限
详见小程序端消息订阅接口 wx.requestSubscribeMessage
步骤三:调用接口下发订阅消息
详见服务端消息发送接口 subscribeMessage.send
实现代码
wxml
和之前模板消息必须用到formid不同,订阅号消息现在已经不用再每次生成formid只需要表单提交后,提醒用户是否同意接收一条订阅消息,同意后才能发送。
下面就是页面表单结构,表单提交按钮绑定order_submit函数
<form bindsubmit="order_submit">
<!-- <view class="title">{{title}}</view> -->
<input class="title" type="text" value="{{title}}" name="title"></input>
<view class="time">
<text>预约时间</text>
<input type="text" placeholder="请输入预约时间" name="time"></input>
</view>
<view class="number">
<text>用餐人数</text>
<input type="number" placeholder="请输入用餐人数" name='number'></input>
</view>
<view class="name">
<text>联系人</text>
<input type="text" placeholder="请输入您的名字" name='name'></input>
</view>
<view class="phone">
<text>联系电话</text>
<input type="number" placeholder="请输入手机号码" maxlength='11' name='phone'></input>
</view>
<view class="note">
<text>备注</text>
<input type="text" placeholder="请输入您的备注信息" name='note' maxlength='18'></input>
</view>
<button form-type="submit">确定</button>
</form>
js
点击按钮后wx.requestSubscribeMessage这个函数会弹出一个微信提示框,系统要给您发送一条订阅消息,必须是用户同意后能才发送订阅消息。
e.detail.value.xx就是接收到表单提交过来的数据,把数据放在message对像中进行传递
用户同意接收后再调用云函数subscribe
const app = getApp()
const tmplId = 'EHnKQwB95VJUbehyLeq2dbnQpCM__Z7XbIU_rUfz5h4' //这是订阅消息模板id,需自行申请
order_submit: function (e) {
//这是模板信息
var message = {
name: e.detail.value.name,
content: `餐厅:${e.detail.value.title}`,
time: e.detail.value.time,
state: '预约成功',
phone: e.detail.value.phone
}
// 调用微信 API 申请发送订阅消息
wx.requestSubscribeMessage({
// 传入订阅消息的模板id,模板 id 可在小程序管理后台申请
tmplIds: [tmplId],
success:res => {
// 申请订阅成功
if (res.errMsg === 'requestSubscribeMessage:ok') {
// 这里将订阅的课程信息调用云函数存入db
wx.cloud.callFunction({
name: 'subscribe',
data: {
message: message
},
})
.then(res => {
wx.showToast({
title: '订阅成功',
icon: 'success',
duration: 2000,
});
console.log('发送成功', res)
})
.catch(res => {
wx.showToast({
title: '订阅失败',
icon: 'success',
duration: 2000,
});
console.log('发送失败', res)
});
}
},
fail:err => {
console.log(err)
}
});
}
},
云函数subscribe
建一个云函数
这里是云函数的具体代码,如果你只开通了一个云环境,那么env:''不用填写,默认空就行,有开发版和正式版多个环境的请写清楚云环境ID
模板ID在小程序后台,订阅消息里复制 ,还没有消息模板的先添加一个适合自己的模板
传过来的参数通过event.xx接收下,并传入模板消息里面,具体这里仔细看下,一一对应下
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:""//这是云环境id
})
// 云函数入口函数
exports.main = async (event, context) => {
try{
const {OPENID} = cloud.getWXContext();
const result = await cloud.openapi.subscribeMessage.send({
touser:OPENID,
page:'pages/index/index',
data:{
//这些参数都会在模板详情那有,这些参数不能弄错,一旦弄错就发送不了
thing1:{
value:event.message.name
},
thing3:{
value:event.message.content
},
time2:{
value:event.message.time
},
phrase4:{
value:event.message.state
},
phone_number6:{
value:event.message.phone
}
},
templateId:'EHnKQwB95VJUbehyLeq2dbnQpCM__Z7XbIU_rUfz5h4'
})
console.log(result)
return result
}catch(err){
console.log(err)
return err
}
}