阅读 57

微信小程序统一收集上报formId

问题描述

微信小程序中,页面的 form 组件,属性 report-submit 为 true 时,可以声明为需要发送模板消息,此时点击按钮提交表单可以获取 formId,用于发送模板消息,如果小程序页面较多较复杂,则可能需要每个页面都加入 form 组件,太过繁琐。

解决方法

经过多次小程序的开发,发现在所有页面结构的最顶层,可以加一个通用的formId上报组件,其中通过slot节点,承载需要展示的wxml结构,这样既能实现formId的获取,也不影响获取slot节点里面的其他点击事件,正好完美解决上述问题。

方法实现
  • formId-reporter 自定义 Component
<!-- formId-reporter.wxml -->
<!-- 嵌套form组件和button在所有页面的最外层 -->
<form report-submit bindsubmit="handleSubmit">
  <button class="form-btn" form-type="submit" hover-class="none">
    <slot></slot>
  </button>
</form>
复制代码
/* formId-reporter.wxss */
/* button的样式 */
.form-btn {
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  text-align: left;
  line-height: normal;
}

.form-btn::after {
  border: 0;
  display: none;
}
复制代码
// formId-reporter.js
Component({
  methods: {
    handleSubmit(e) {
      const { formId } = e.detail;
      // 处理上报formId
      XXXXX(formId);
    }
  }
});
复制代码
  • 在 Page 中使用 formId-reporter 组件
// index.js
// 在Page.json文件中引用formId-reporter
{
  "usingComponents": {
    "formId-reporter": "/components/formId-reporter/formId-reporter"
  }
}
复制代码
<!-- index.wxml -->
<formId-reporter>
  <view class="index">
    <!-- 这里展示页面内容 -->
  </view>
</formId-reporter>
复制代码

使用了formId-reporter之后,再也不需要痛苦的每个页面加form和button了。

我的博客