小程序总结（十二）- 关于微信消息推送
2018-10-30 本文已影响0人
自律财富自由
需求： 向用户推送某个订单状态的消息
// HTML
<form class='footer__content__box' name='pushMsgFm' report-submit bindsubmit='setEValue'>
<button form-type="submit" bindtap='footerButtonClick' data-button='{{item}}' class='{{(item.name == "评价" || item.name == "付款" || item.name == "查看评价") ? "footer__judge__button" : "footer__ticket__button"}}' wx:for="{{option}}" wx:key="{{index}}">
{{item.name}}
</button>
</form>
以上注意：
- 要用form表单包裹
- 既然用form表单包裹了，那里面的元素就一定要是form表单元素，而不能写view
- <form>元素一定要加report-submit属性，以及绑定submit事件，用来获取formId
- form元素（这里是button）上一定要加form-type="submit"
// 用来获取form上绑定的submit事件的e值，因为这里既有点击的e值，又有submit的e值，所以要分开存储一下
setEValue (e) {
console.log('pushMsg = ', e)
this.setData({
eValue: e
})
},
pushMsg (e) {
// 消息模板必传数据obj, 可自定义
let pushData = {
"keyword1": {
"value": '已取消'
},
"keyword2": {
"value": '20181030123456'
},
"keyword3": {
"value": 'tips'
}
}
console.log('pushData = ', pushData)
let templateId = '' //这里在微信公众平台里自己选择
let obj = {
token: this.data.token, // token从后台获取
openId: wx.getStorageSync('msg_open_id'), // 从登录接口返回
oid: this.data.oid,
data: pushData,
templateId: templateId
}
console.log('order obj = ', obj)
// 消息推送接口写在公共文件里了
util.pushMessage(this.data.eValue, obj)
},
footerButtonClick(e) {
console.log('button clicked = ', e)
let name = e.currentTarget.dataset.button.name
let msg = e.currentTarget.dataset.button.msg
if (name == '取消订单') {
wx.showModal({
content: '您确定需要取消订单吗？',
confirmColor: '#ff7101',
success: (modalRes) => {
if (modalRes.confirm) {
wx.request({
url: CANCEL_ORDER,
method: 'POST',
header: {
'Authorization': wx.getStorageSync('access_token')
},
data: {
oid: this.data.oid
},
success: (res) => {
if(res.data.status == 200) {
console.log("取消= ", res)
wx.setStorageSync('isOrderDetail', true)
wx.showToast({
title: '已取消订单',
duration: 2000,
success: () => {
wx.setStorageSync('isOrderDetail', true)
setTimeout(() => {
// 成功取消订单是调用推送消息通知函数
this.pushMsg(this.data.eValue)
wx.switchTab({
url: '/entries/activityOrder/activityOrder'
})
}, 2000)
}
})
} else {
wx.showToast({
title: res.data.msg,
icon: 'none'
})
wx.setStorageSync('isOrderDetail', true)
setTimeout(() => {
wx.switchTab({
url: '/entries/activityOrder/activityOrder'
})
}, 2000)
}
}
})
}
},
fail: () => {}
})
}
}
下面是公共文件中定义的消息推送函数
function pushMessage (e, obj) {
console.log('消息消息 = ', e)
wx.showLoading({
title: '加载中',
icon: 'loading',
});
var formId = e.detail.formId
var url = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + obj.token
console.log('消息推送 = ', obj.data)
wx.request({
url: url,
data: {
touser: obj.openId,
template_id: obj.templateId,//申请的模板消息id，
page: 'entries/orderDetail/orderDetail?oid=' + obj.oid, // 这里原来写的是/entries/orderDetail/orderDetail?oid=' + obj.oid
form_id: formId,
data: obj.data,
color: '#ccc'
},
method: 'POST',
success: function (res) {
wx.hideLoading()
console.log("发送成功")
console.log(res)
},
fail: function (err) {
// fail
console.log(err)
}
})
}
最后，注意只能手机调试，用开发工具调式打印出来的formId: "the formId is a mock one"并不是数字串，所以要在真机上调试才能成功。
存在的问题：
在测试环境、正式环境测试后都能正常收到消息，但是代码发布审核后，用户手机并不能收到消息。
原因：
1、page参数多了斜杠，去掉斜杠后，点击消息模板也能进入到对应页面。
2、如果不是1的问题，就查查其他的参数有没有问题，我们这边后端说有时侯open_id为空。（他们解决的办法是：前端一开始就是从后端获取这个open_id用来发送消息，传给后端后，后端又重新取了open_id,保证open_id不为空）
// 以下是更新
需求2： 产品保存用户点击一次，收集多个fromId,以便后期能主动向用户推送消息
一开始，在一个按钮外层包裹多层div, 然而出现以下问题：
- 1、用户点击一次，虽然可以获取到多个formId, 但是这些formId都是相同的
- 2、点击一次，触发了多次点击事件，导致其他的UI以及逻辑问题
所以上面的办法是行不通的。
解决办法： 在有用户交互的地方进行收集。
- 输入框
- 其他点击的地方
<form report-submit bindsubmit='clickFun'>
<button formType="submit" class="formid__button">
<view class="agree__head__left">
<icon class='{{agree ? "select" : ""}}'></icon>
<text>另外一个点击的地方</text>
</view>
</button>
</form>
<form report-submit bindsubmit='submitFun'>
<button formType="submit" class="right__btn">提交订单</button>
</form>
// 样式
.formid__button {
background-color: transparent;
padding: 0;
margin: 0;
text-align: left;
border: none;
}
.formid__button::after {
border: 0px;
}
最后，注意:
在A用户手机上收集的formId只能用于给A用户发送推送消息，不能给B用户等其他用户发送，不然formId就是无效的，会出现错误代码41028
