The subscription content in the applet is used by everyone in daily life. Generally, when paying, you will receive a support success message, which contains some basic information about how much it costs and where it is used. The subscription message is sent to the user by the applet. In the way of messages, the applet itself does not have the function of receiving messages, but conveys the messages to users through the service notification function of WeChat. Here's a quick look:
The above roughly understands the function of subscribing to messages. Both the client and the server are needed here. This article will use the client and simulate the server in the client. Then in the next article, we will use the server equipped with Node.js as a server.
complete effect
Let's take a look at the finished effect:
You cannot enter the interface before obtaining user information. After obtaining the user information, enter the operation interface. The default log type is daily. You can click to select weekly or monthly reports. Click on the date selection to select the corresponding date. You need to fill in the reminder. The warm reminder defaults to this The log has not been submitted yet, and there is a reminder below. You need to fill in the name of the reminder. When you click on the name of the reminder, you will get the user’s permission to subscribe to the message. After filling in the reminder, the send button will also change from disabled to enabled. Click Send to In the service notification on WeChat, you can see that there will be a notification of this unsubmitted log reminder. Let's start to implement it:
Subscription message related parameters
Parameter preparation
appid (user ID), appSecret (app key), template_id (subscription template id)
After logging in to the WeChat public platform (qq.com) , find [Development Management] on the left menu
Now to get the third subscription template, click [Select] on the [Subscription News] on the left menu, and then search for [Unsubmitted Logs]
Then click [Select], the following will appear
Go back to the interface of [Subscription News], you can find it in [My Templates], open [Details], there is this template id in it
page writing
There is also not much to say about the content written on the page. Click the button to get the data and update the status. Use wx:if or wx:else to display and hide. The style here also needs to be written by yourself, and the page is relatively simple. Still focus on how to implement subscription news.
<!-- index.html -->
<!-- 顶部 -->
<view class="content">
<view class="head">
当前操作员：{
{admin}}
</view>
<block wx:if="{
{!hasUserInfo}}">
<button bindtap="getUserProfile">获取</button>
</block>
<block wx:else>
<form bindsubmit="formSubmit">
<view class="log">
<view class="log_title">
<text>日志类型</text>
<picker bindchange="changeTitle" name="title" value="{
{index}}" range="{
{logArray}}">
<view class="nowing">{
{logArray[index]}}</view>
</picker>
</view>
<view class="log_date">
<text>日期选择</text>
<picker mode="date" name="date" value="{
{date}}" bindchange="bindDateChange">
<view class="nowing">{
{date}}</view>
</picker>
</view>
<view class="log_person">
<text>提醒人</text>
<input type="text" name="remind" bindinput="bindRemindPer" bindtap ="allowSubscribeMessage" placeholder="例如：小明(参考)" value="{
{remind}}"/>
</view>
<view class="log_tip">
<text>温馨提示</text>
<input type="text" name="tip" bindinput="bindTipCont" value="{
{tip}}"/>
</view>
<button form-type="submit" disabled="{
{ remind == '' ? true : false}}">发送</button>
<view class="errMsg">{
{ remind == '' ? 'tips：需要填写提醒人名称才可发送！' : '' }}</view>
</view>
</form>
</block>
</view>Listen to get form information
Monitor the data in the input box in the filled form, obtain the form data and update it; obtain it through bindinput
// index.js
// 获取应用实例
const app = getApp()
Page({
data:{
index: 0 , // 默认为0,日报
logArray:['日报','周报','月报'],
admin:'', // 操作员
lTitle:'未提交日志提醒', // 提醒标题
date: new Date(), // 日期(未格式化)
remind:'', // 提醒人，默认admin
tip:'尚未提交日志', // 温馨提示内容
},
// 获取提醒标题
changeTitle(e){
this.setData({ index : e.detail.value })
},
// 获取日期选择
bindDateChange(e){
this.setData({ date : e.detail.value })
},
// 获取提醒人
bindRemindPer(e){
this.setData({ remind : e.detail.value })
},
// 获取提示内容
bindTipCont(e){
console.log(e)
this.setData({ tip : e.detail.value })
},
// 获取用户信息 - 待写
})
There is a problem here, that is, the problem of selecting the date. The date obtained through new Date() does not conform to the date format, so here you can format the obtained date, and here is not to install the moment.js plug-in. Alright, write the formatted date in the util/util.js file.
Date formatting
Write a public function in util/util.js file and export:
// 格式化日期
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
return [year, month, day].map(formatNumber).join('-')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime
}Introduce and use in the index.js file, const time = require('../../util/util')
// index.js
// 获取应用实例
const app = getApp()
const time = require('../../utils/util')
Page({
data:{
...
date: time.formateTime(new Date()) // 日期(格式化)
}
...
})
The date that can be obtained is " xxxx - xx - xx " in this format, and the following is to obtain user information:
Get user information
To obtain user information, generally words like these can be written in app.js and then saved for global use. Here it is saved in app.js and stored in index.js for easy viewing. The method of obtaining user information in the applet has also been adjusted. For details, please refer to the following wx.getUserProfile(Object object) | WeChat Open Documentation
// index.js
// 获取应用实例
const app = getApp()
const time = require('../../utils/util')
Page({
data:{
hasUserInfo:false, // 获取用户信息
index: 0 , // 默认为0,日报
logArray:['日报','周报','月报'],
admin:'', // 操作员
lTitle:'未提交日志提醒', // 提醒标题
date: time.formateTime(new Date()) // 日期(格式化)
remind:'', // 提醒人，默认admin
tip:'尚未提交日志', // 温馨提示内容
},
// 获取提醒标题
// 获取日期选择
// 获取提醒人
// 获取提示内容
// 获取用户信息
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
this.setData({
admin: res.userInfo.nickName,
hasUserInfo: true
})
}
})
},
// 获取用户权限 - 待写
})When the user information is successfully clicked to obtain, hasUserInfo will be opened in the callback processing, and the filled interface will be displayed at this time, and the obtain button will be hidden.
Obtain permission to subscribe to news
When sending a subscription message, you need to obtain the permission of the subscription message, so you can put it in the user's operation to prompt it. Here, it can be triggered when the user clicks the reminder input box when entering the reminder, and bind it An event bindtap = "allowSubscribeMessage" obtains the user's permission to subscribe to messages. After obtaining it, it needs to save its state, so it needs to be saved in the app.js file.
// app.js
App({
globalData: {
userInfo: null,
hasSubscribeMessage:''
}
})// index.js
// 获取应用实例
const app = getApp()
const time = require('../../utils/util')
const tempid = '' // 填写上你自己的订阅模板id [未提交日志模板]
Page({
data:{
...
},
// 获取提醒标题
// 获取日期选择
// 获取提醒人
// 获取提示内容
// 获取用户信息
// 获取用户权限
allowSubscribeMessage(){
// hasSubscribeMessage 授权状态
if (!app.globalData.hasSubscribeMessage) {
wx.requestSubscribeMessage({
tmplIds: [tempid], // 在此处填写模板id
success(res) {
console.log('获取权限：',res)
app.globalData.hasSubscribeMessage = res.errMsg.split(':')[1]
}
})
}
},
// form 提交表单 - 待写
})After obtaining the location permission, let's submit the content of the form below;
form Submit the form
The [openid] parameter needs to be used in the template information sent by the background server. Then the openid parameter can be obtained through appid, appsecret and code. The first two parameters already exist, so the code parameter can be obtained through wx.login. wx.login obtains the code parameter, and then submits it to the background server;
Submitting the form here will sort out the value in the form, and you can print the submitted content data:
// form 提交表单
formSubmit(e){
// e.detail.value 可以拿到用户提交表单的数据
console.log(e)
console.log(e.detail.value)
According to the definition in the previous data, it is the value of the logArray array subscripted as 0, that is, the daily report, so here it needs to be processed and then submitted. After the wx.login() method successfully obtains the code, the callback will submit the code and the submitted data together. That's it!
Page({
...
// 表单提交
formSubmit(e){
// e.detail.value 可以拿到用户提交表单的数据
// console.log(e.detail.value)
let formInfo = e.detail.value
formInfo.title = this.data.logArray[formInfo.title]
wx.login({
timeout: 2000,
// 成功后会返回code，将code提交给服务器
success: res =>{
// 获取到code
console.log('获取到code:' + res.code)
console.log(res)
// 提交服务器 -- 待写
}
})
}
})The content of the client is basically almost done, and the rest is submitted to the server. Before writing here, first simulate the background server to receive, receive the data submitted by the client, and send the subscription message after processing!
Simulation background server side
Simulate the reception of the background server in the client, receive the form data from the client and use it in the template of the subscription message, and receive the code obtained by the client through the wx.login method
// index.js
const app = getApp()
const time = require('../../utils/util')
const tempid = ''
Page({
...
})
// 模拟服务器端
var server = {
// 响应POST请求
post(data,success) {
console.log('收到来自客户端提交的数据:',data);
// 获取openid - 待写
}
} After simulating the server here, go back to [form submission form] to initiate a request to submit the corresponding obtained code and form form data:
...
// 表单提交
formSubmit(e){
// e.detail.value 可以拿到用户提交表单的数据
// console.log(e.detail.value)
let formInfo = e.detail.value
formInfo.title = this.data.logArray[formInfo.title]
wx.login({
timeout: 2000,
// 成功后会返回code，将code提交给服务器
success: res =>{
// 获取到code
console.log('获取到code:' + res.code)
console.log(res)
// 提交服务器
server.post({ code : res.code , formInfo},()=>{
wx.showToast({
title: '发送成功',
icon: 'success',
duration: 2000
})
// 成功提交,由服务器发起订阅消息 - 待写
})
}
})
}
})
...
// 模拟服务器端
var server = {
// 响应POST请求
post(data,success) {
console.log('收到来自客户端提交的数据:',data);
// 获取openid - 待写
}
} Check here to see if you can receive the data submitted by the client normally: you can see the processing of title and date
The data parameter contains the code and formInfo to submit the form data, and then you need to get the openid parameter in the server.
Get parameter Openid
Obtain the openid parameter on the server side. The acquisition of the openid parameter requires these three parameters: appid, appsecret and code. These three parameters are already available now. The following is to obtain the openid and save it for later use.
You can take a look at the content of the official document: Get openid | WeChat open document , by requesting the following address
https://api.weixin.qq.com/sns/jscode2session
And the following request parameters are required, mainly the acquisition of the first three parameters;
After success, the following parameters will be returned
You can get the openid and session_key, let’s write and get it below, initiate a request through the wx.request method, carry those parameters, after success success: success, that is, trigger the second parameter of the this.getOpenid() method is a callback , (res)=>{ // processing function}.
...
// 模拟服务器端
var server = {
appid: '', // 写上你自己的 appid
secret: '', // 写上你自己的 appsecret
user:{
openid: '' // 待接收
}
// 响应POST请求
post(data,success) {
console.log('收到来自客户端提交的数据:',data);
// 获取openid
this.getOpenid(data,(res)=>{
// 获取code成功回调
console.log('用户OpenId': res.data.code)
// 保存
this.user.openid = res.data.openid
success()
})
},
// 获取Openid方法
getOpenid(res,success){
// res中有 code,formInfo
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
data: { // 请求参数
appid: this.appid,
secret: this.secret,
js_code: res.code,
grant_type: 'authorization_code'
},
success: success
})
}
} Let's see if the user's Openid has been obtained:
After getting the Openid, you can publish and subscribe messages.
publish subscribe message
In the previous [form] submission content, after successfully returning the code, submit it to the server. At this time, you can send a subscription message from the client to the server to respond.
...
// 表单提交
formSubmit(e){
...
// 提交服务器
server.post({ code : res.code , formInfo},()=>{
wx.showToast({
title: '发送成功',
icon: 'success',
duration: 2000
})
// 成功提交,由服务器发起订阅消息
server.sendTempMsg(formInfo,(res)=>{
console.log('订阅消息发送结果：',res.data)
})
})
}
})
}
})
...
// 模拟服务器端
var server = {
appid: '', // 写你自己的 appid
secret:'', // 写你自己的 appsecret
user:{
openid: '' // 待接收
},
// 响应POST请求
// 获取Openid方法
// 发送订阅消息 - 待写
}# Parameters required for publishing and subscribing messages
openid, template_id (subscription template id), template parameters
The openid and template_id parameters have been obtained, and the parameters of this template are left. We applied for the template earlier, so which parameters we need in the publish and subscribe template need to be determined by ourselves.
Through the above, you can formulate a template for publishing and subscribing messages. This WeChat API interface is required for publishing and subscribing template information. You can take a look at the interface provided by the official document and the required request parameters:
POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKEN 
The main missing parameter here is the access_token parameter, which is the credential of the interface call, then publishing and subscribing messages also needs to obtain the access_token, which is [Get the interface call credential], get the interface call credential | WeChat open document, through the following WeChat API interface You can get the means of calling the interface.
GET https://api.weixin.qq.com/cgi-bin/tokenThe required parameters are already available, so let's start writing the publish-subscribe message code.
// 模拟服务器端
var server = {
appid: '', // 写你自己的 appid
secret:'', // 写你自己的 appsecret
user:{
openid: '' // 待接收
},
// 响应POST请求
// 获取Openid方法
// 发送订阅消息
sendTempMsg(formInfo,success){
var that = this.user
var temp = {
touser: that.openid
template_id: tempid, // 订阅模板id
data: {
phrase1: { value: formInfo.title },
date2: { value: formInfo.date },
name3: {value: formInfo.remind },
thing4: { value: formInfo.tip }
},
miniprogram_state: 'developer',
lang: 'zh_CN'
}
// 发送订阅
this.getAccessToken(res=>{
var token = res.data.access_token
console.log('服务器access_token：' + token)
var url = 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' + token
wx.request({
url,
method: 'POST',
data: temp,
success
})
})
// 获取 access_token
getAccessToken(success){
var url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + this.appid + '&secret=' + this.secret
wx.request({
url,
success: success
})
}
}
}
The server will return access_token, and when the server sends a subscription message successfully, the client will listen and call back.
At this point, the code content has been written, let's test whether it can send subscription messages!
Publish subscribe message test
1. When the Get button is clicked, the user information will be obtained, and a prompt will be displayed at this time. When the status of hasUserInfo is true when the information is obtained, the filling interface will also appear at this time.
2. The current operator is to obtain the NiceName in the user information, and the value of hasUserInfo is also true. At this time, the reminder has not been filled in, and there are gray prompts for reference filling, and the publish button is disabled, and there is a red prompt at the bottom , need to be filled in before the button can be enabled to send.
3. When the input box of the reminder is clicked, the permission event of obtaining the publish and subscribe message will be triggered.
4. After obtaining the permission, after entering the reminder "syan", you can see the send button and it is enabled, and the red prompt font under the button is also hidden.
5. After clicking send, you can see a prompt message indicating that the sending is successful.
6. Take out your mobile phone and open WeChat, or open WeChat on your computer and you can see this message in the service notification.
The WeChat service notification can receive this subscription message, so the content of this article is over. In the next issue, there will be another article about using the Node. support! ! !
