0%

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

问题描述

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

解决方法

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

方法实现
  • formId-reporter 自定义 Component
1
2
3
4
5
6
7
<!-- formId-reporter.wxml -->
<!-- 嵌套form组件和button在所有页面的最外层 -->
<form report-submit bindsubmit="handleSubmit">
<button class="form-btn" form-type="submit" hover-class="none">
<slot></slot>
</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 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;
}
1
2
3
4
5
6
7
8
9
10
// formId-reporter.js
Component({
methods: {
handleSubmit(e) {
const { formId } = e.detail;
// 处理上报formId
XXXXX(formId);
}
}
});
  • 在 Page 中使用 formId-reporter 组件
1
2
3
4
5
6
7
// index.js
// 在Page.json文件中引用formId-reporter
{
"usingComponents": {
"formId-reporter": "/components/formId-reporter/formId-reporter"
}
}
1
2
3
4
5
6
<!-- index.wxml -->
<formId-reporter>
<view class="index">
<!-- 这里展示页面内容 -->
</view>
</formId-reporter>

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