什麼是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>的元件，把這個模板也封裝起來，這樣就能讓這些多出來的事變得簡單點（完）