微信小程序收集formId

原理

form内嵌button，使点击事件皆可触发表单提交动作

分析

开始预想是页面下包裹一个form和button，达到点哪里都提交的效果。但试验表明，button 的submit 动作会拦住常规的bindtap/catchtap动作。
所以方案是：
1、Page 根元素位置包裹一 form
2、在动作热区（界面上可响应点击事件的区域）内嵌一个button，代码片段是<button form-type="submit" class='form-btn' ></button>，并在其上绑定对应事件以取代原来的热区事件
3、Page下根元素仍可放一覆盖全页面的button，点击无热区区域时仍可收集 formId

4、插入 button 的热区部分需要添加定位属性，如position:relative;
5、看到网上还有无限嵌套formId以达到点击一次收集多个的效果，被我pass了，原因有几：代码冗余（丑）、必要性不大（敢高频发模板消息就做好被封的心理准备）、可能造成过审难度变大

代码

WXML

<form report-submit="{{true}}" catchsubmit="submitFormId" class='form'>
	// 根元素的button
    <button form-type="submit" class='form-btn'></button>
    <view class="mockClass">
        // 假装代码
        // 热区的button
        <button form-type="submit" class='form-btn' bindtap="toChildPage"></button>
    </view>
</form>

WXSS

.form-btn{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
}

JS
js 就是基本操作，就不贴了
页面js下补充提交方法，可以写在app.js下方便复用

 submitFormId(e) {
    console.log('formid', e.detail.formId)
    let _this = this
    wx.request({
      url: 'domain.com/api/formid', //仅为示例，并非真实的接口地址
      data: {
        formId: e.detail.formId,
        openId: _this.data.openId // openId不一定是这个字段，看你自己放哪里了
      },
      method:'POST',
      header: {
        'content-type': 'application/json', // 默认值
      },
      success(res) {
        console.log(res.data)
      },
    })
  },

如有帮助到你可以点个赞让我知道，蟹蟹~