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