问题描述
微信小程序中,页面的 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了。