小程序formId的大量获取

最近在做小程序的离线推送，自然需要大量的formId，之前的事件穿透批量获取已经被ban了。那怎么办？乖乖的一次点击获取一个呗（->_->）

直接上图

])
先创建如图的模板文件

formId.wxml

<form class="form" bindsubmit="formSubmit" report-submit='true'>

  <button class="form-btn" form-type="submit">

    <slot></slot>

  </button>

</form>

formId.wxss

.form{

  width: 100%;

  height: 100%;

}

.form-btn{

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  border-color:transparent;

  border:none;

  background-color: transparent;

  align-items:center;

  text-align: center;

}

.form-btn::after{

  border-color:transparent;

  border:none;

  background-color: transparent;

}

formId.js

Component({
  properties: {},
  data: {},
  methods: {
    formSubmit(e){
      let app = getApp();
      app.collectFormId(e.detail.formId);
      this.triggerEvent('function')
    }
  }
})

app.js中的collectFormId方法

collectFormId(formId){
    wx.request({
      method: 'POST',
      url: this.globalData.url + 'routine/template/collect_formId',
      data: {
        uid: this.globalData.uid,//这是我的业务参数，可以不写
        propertyuid: this.globalData.propertyuid,//这是我的业务参数，可以只传formid
        formId: formId,
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
    })
  }

调用

<view class="page">
  <view class="tab">导航</view>
  <view class="body">
    <formId bindfunction="click">
      <text>这里是按钮的内容</text>
    </formId>
  </view>
  <view class="foot">页脚</view>
</view>

随手写的test页面
bindfunction指定主页面的事件方法，然后模板进行调用，做到获取formId和正常的业务不冲突。

  click(){
    console.log("测试页的方法")
  }

当然也可以写在更复杂的xml环境里

效果图：

用户在点击顶部的导航栏时可以同时获取formId，并且实现分页导航