美文网首页
小程序总结(十二)- 关于微信消息推送

小程序总结(十二)- 关于微信消息推送

作者: 自律财富自由 | 来源:发表于2018-10-30 10:52 被阅读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

相关文章

网友评论

      本文标题:小程序总结(十二)- 关于微信消息推送

      本文链接:https://www.haomeiwen.com/subject/wabwtqtx.html