微信叶城县E企盈小程序小程序捕获formId实现无限量发送模板信息

前言：微信小程序发送模板信息有两个前提，要么触发一次表单提交，要么触发一次支付。如果需要给用户主动推送模板信息，那么就需要拿到足够多的formId（支付不实现），下面介绍如何才能获取足够多的formId。PS：使用该方法的时候需要符合微信运行规则。思路：我们封装一个组件，组件内部是一个form标签和一个提交按钮，form表单支持返回formId，然后该组件接收外部标签（也就是slot）和一个回调函数，当点击该组件的时候，触发表单提交并向上冒泡（外部组件的内部时间会无效，只能通过回调方法来触发）。第一步：创建catchform捕获组件catchform.wxml

<form class=”catchForm” report-submit bindsubmit=”catchSubmit” >    <button form-type=”submit” class=”catchBtn”>        <slot ></slot >    </button></form>

第二步：优化CSS因为button按钮的样式权重高，行号和其他属性均有自己的开通套装小程序电话:4006-838-530定义，会严重影响内部组件的ui，所以要对button的样式就行重置，主要思路是继承父级的样式。catchform.wxcc

form.catchForm button.catchBtn {  border: none;  text-align: inherit;  padding: 0;  margin: 0;  line-height: inherit;  background: transparent;  color: inherit;  border-radius: 0;  font-size: inherit;}form.catchForm button.catchBtn::after {  border: none;}

第三步：处理组件form提交提交的时候会触发catchSubmit函数，catchSubmit开通二手手机小程序电话:4006-838-530函数内部同步表单信息和触发回调，代码如下：catchform.js

Component({  /**   * 组件的属性列表   */  properties: {  },  /**   * 组件的初始数据   */  data: {    upload: {      type: Boolean,      value: true    }  },  /**   * 组件的方法列表   */  methods: {    //点击即触发获取formId    catchSubmit: function (e) {      if (this.data.upload) {        try {          Request.post(“/api/uploadFormId”, {            formId: e.detail.formId,            touser: getApp().globalData.userInfo.openid,            time: new Date()          });        } catch (err) {          //todo        }      }      //触发回调      this.callbac开通上门服务小程序电话:4006-838-530k(e);    },    /**     * 捕获点击回调     */    callback: function (e) {      try {        this.triggerEvent(“callback”, e);      } catch (err) {        //todo      }    }  }})

第四步：使用catchform捕获组件使用组件

bind:callback=”toDetail”，指触发表单提交后的回调函数data-record=”{{item}}” ， 是自定义参数

后续再根据formId和openId就可以发送模板信息了微信小程序