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

什么是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>的组件，把这个模板也封装起来，这样就能让这些多出来的事变得简单点（完）