微信小程式如何突破模板訊息限制，獲取多個formId?

undefind_5發表於2018-08-30
微信小程式ORM

做小程式的時候，產品提出模板訊息推送用服務通知的方式推送（正常情況是用公眾號推送），然後去查小程式手冊，發現服務通知存在著問題：（7天有效期）支付等方式只可以獲取3個formID,推送3條模板訊息，表單提交方式一次提交只能獲取一個formIdm推送一條通知。產品要求一次生成50個formId,以在7天內有50個formI的可以用來推送訊息。這就有一個問題，如何在點選推送的時候提交50次form表單呢？試了很多方法：剛開始的時候，思維只侷限在了通過for迴圈的方式去動態呼叫formsubmit方法來提交表單，可是發現由於formId的獲取方式是由當前表單的submit按鈕提交方法中，event物件自動生成的，如果迴圈呼叫，迴圈的當前方法的event物件並沒有變化，仍然是第一次觸發的那個提交方法的event物件，故結果就是你僅僅只是迴圈生成了多個一樣的formId。達不到要求，那麼如何在點選推送的時候同時提交多個form表單呢？又試了試在頁面上同時動態生成多個表單的方式，發現小程式無法像jq一樣append節點...,那麼好吧，我又試了同時在頁面上覆制5個表單，提交方法都一樣或不一樣（方法名稱遵循一定的規律，以後面動態呼叫），發現提交方法名相同的時候，仍然只提交了一次；換成不同的方法名後（如方法名字元後面按順序拼接序號），發現沒辦法呼叫...(沒辦法的情況下，已經忽略了可行性，這種明顯坑自己的方式都敢來試),後來找到一個前輩的文章：傳送

才發現了原來要同時提交多個form表單，以獲取多個不同的formId來傳送多個訊息模板通知原來還能通過另一種方式來實現：簡單來說，就是運用css樣式重疊，讓頁面上的多個不同的form表單通過一次觸發，點選事件穿透，來實現觸發多個表單的方式。
頁面上具體css效果就不貼了，直接上效果截圖：

clipboard.png
這個訂閱按鈕下面其實有50個表單的巢狀，可以看一下wxml的截圖的冰山一角：

clipboard.png
即wxml的結構要遵循多個表單一層一層往內巢狀，以實現點選事件穿透（冒泡）的結果。
css樣式（其中對button樣式的處理和前輩的樣式有區別——這說明具體的樣式是有差異的）：

.btn{
  width: 1rpx;
  height: 1rpx;
  margin: 0;
  padding: 0;
  /* position: fixed; */
  /* top: 150rpx; */
  border-color:transparent;
  border:none;
  background-color:transparent;
}
.aa{
  height:68rpx;
  width:156rpx;
  position:fixed;
  top: 150rpx;
}
button::after{
  border: none;
}

然後submit方法中一次push如當前表單提交方法的evet的formId，具體的js方法在前輩連結中有，就不貼上了。

這篇文章是作為本人遇到這個坑的一個反映與記錄。花點時間記錄分享出來，只希望能對友需要的朋友提供參考與幫助。同時感謝那位前輩的騷思路，真的學到了騷操作！

相關文章