前言

在微信小程序中，小程序提供能力模板消息。官方文件是这样描述的：“基于微信的通知渠道，我们为开发者提供能够高效到达用户的模板消息能力，实现服务闭环，提供更好的体验。”

看图说话：

发布模板消息渲染

这无疑为小程序提供了一种新的向用户提供信息和反馈的能力。但是为了防止模板消息对用户造成信息轰炸，影响用户体验，小程序还设置了一些规则：

模板推送位置：服务通知模板分发条件：用户在微信系统中与页面交互后触发模板跳转能力：点击查看详情只能跳转到分发模板的账户的各个页面。我们应该怎么做才能通过小程序将模板消息发送给用户？

用户必须与页面上的小程序进行交互。例如，支付和提交表单将生成一个predate _ id的标记，提交表单将生成一个formId的标记。服务器会根据predate _ id或formId发送模板消息，predate _ id和formId的有效期都只有7天。

那么问题来了？

如果用户在使用小程序时没有在7天内提交一些信息或者付款，那么我们就无法得到predate _ id和formId，但实际上我们需要给用户发送一些模板消息，这已经达到了一定的推广或者通知效果。预付款_id只能在付款时生成，这是不言而喻的。今天胡哥就给大家介绍一下如何在小程序中获取尽可能多的表单id，让服务器可以有尽可能多的表单id来发送模板消息。

获取formId的原则

它必须是表单组件，并且必须声明属性report-submit='，这意味着需要发送模板消息并侦听bindsubmit事件；表单组件中必须有一个按钮组件，并且按钮组件必须声明属性form-type='submit '。小程序原生代码演示

form report-submit=' true ' bind submit=' submit event '按钮open-type=' submit ' submit/button/form获取formId模块的包

基于小程序获取formId的原理，我们可以考虑伪装：

只要用户触发了包含满足一定条件的按钮组件的表单组件的bindSubmit事件，formID可以获得；同时，借助CSS样式，我们可以将表单组件和按钮组件设置为不可见、不可见但真实；将不可见的按钮组件覆盖在真实组件上，当点击真实组件时，它实际上触发了按钮点击，用户并不知道。这里是重点，圈出来了，你一定会考上的！

基于Taro获取formId功能模块的封装实践

设计独立的功能模块，便于其他模块调用，以及项目目录结构

index.scsssrc/components/formId/index.js

/* * *打包formId组件，提供将FormId发送到服务器的功能*/导入taro，{component}从“@ taro js/taro”导入{view，Form }从“@tarojs/components”导入。/index . scss ' export default class FormId扩展Component { constructor(props){ super(props)}/* * * form submit()* @ description将FormId提交给后端服务器* @param {*} e事件对象*/formSubmit (e) {//打印在console.log中(' formid3360 '，E.detail.formId) //modal框显示taro . show modal({ title : ' FormId '，content:e.detail.formid，showcancel3360 false})/* * *这只是为了向您的朋友展示效果*/} render () {let {children}=this。propsreturn (form类名=' form ' report submit=' true ' on submit={ this。Form submit } { children } Button class name=' Form-BTN ' Form type=' submit '/Button/Form)} } src/components/formId/index . SCS

一个很重要的问题：就是隐藏风格，让用户看不见，看不到，但它其实是存在的。形成{ position:相对；display: flex。form-BTN { position : absolute；left : 0；top : 0；宽度： 100%；高度： 100%；背景：透明；outline:无；padd : 0；盒子尺寸：边框盒子；{ content : }之后的：border:无；} }}src/pages/index/index.js调用formId模块

将它引入任何其他想要使用formId的模块，并调用它

从“@tarojs/taro”导入Taro，{ Component }从“@tarojs/components”导入{ View，Button }././components/formId ' export default class Index扩展Component { render(){ return(view class name=' Index ' {/*调用formId Component */} formId {/* page中的任何元素*/} Button的其他元素*/} Button/formId/view)} } render

获取formId渲染

附言

以上就是胡歌今天和大家分享的内容。我喜欢的朋友记得收藏，转发，点击右下角按钮观看，推荐给更多的朋友，欢迎留言交流.

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。