什麽是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肯定是越多越好。所以每一個頁面上用戶的每一次點擊我們都巴不得觸發一次表單提交。哪怕從界面上講，這次點擊可能是跳轉，彈窗的功能，跟表單完全無關，都要把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>的組件，把這個模板也封裝起來，這樣就能讓這些多出來的事變得簡單點（完）

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