如何在mpvue下收集小程序的formId

Posted 2021-01-25 饭特稠

什么是formId

formId是小程序可以向用户发送模板消息的通行证，简单而言，你只有获取到formId，把它交给后台，后台同学才能向用户发送通知消息，而这个通行证的有效期只有七天。这是微信为了防止小程序滥用通知消息骚扰用户而提出的一种策略。

如何获取formId

小程序的消息文档告诉我们，获取formId有以下两种途径：支付和提交表单。用户支付一次，可获得3个formId，用户提交表单一次可得到一个formId。如果你的小程序中没有支付行为，需求又需要向用户发送消息时，你就只能依靠提交表单了。

form和form-type

小程序中有个组件叫做form。这个组件平常没什么用，说实话，在搜集formId之前，我还真没有注意过它，但是谁让它是formId的生产者呢，我们需要给用户发消息时，就很有必要了解一下了。

form组件有个属性叫report-submit当在标签中加入这个属性时，一旦表单提交，submit回调中就可以拿到formId了。来看一段代码：

  <form report-submit @submit="uploadFormId">
    <button form-type="submit"> 查看/分享/首页/支付</button>
  </form>  

这里有两个关键点，一个是button要添加form-type="submit"，用来触发表单的提交事件，另一个是要在form元素中加上report-submit属性。这样当用户点击时，你就可以在submit事件的回调中，从event.detail.formId获得一个formId了,拿到之后，通过调用接口上传给后台即可。

获取尽可能多的formId

从运营的角度而言，formId肯定是越多越好。所以每一个页面上用户的每一次点击我们都巴不得触发一次表单提交。哪怕从界面上讲，这次点击可能是跳转，弹窗的功能，跟表单完全无关，都要把button放在一个form中。但是这样无疑增加了前端的工作量，因为需要为每个页面的submit事件绑定一个上传formId的方法。一个可行的方法是借助vue的mixin，为每一个页面实例混入一个上传formId的方法：

    // app.js
    Vue.mixin({
      methods: {
        uploadFormId (e) {
          this.req({
            url: '/api/v1/formid?formId=' + e.target.formId
          })
        }
      }
    })

上面的代码，我们在app.js中，为Vue的所有页面实例注入一个叫uploadFormId的方法。这样，我们就不需要在页面中重复写这个没用的方法。在需要formId的时候，我们只需要为button加一个form-type属性，再把它包在form里面即可。或者写一个<formButton>的组件，把这个模板也封装起来，这样就能让这些多出来的事变得简单点（完）