E企盈营销工具技术服务商 热线:4006-838-530

微信小程序捕获formId实现无限量发送模板信息

E企盈直播平台营销卖货系统

前言:微信小程序发送模板信息有两个前提,要么触发一次表单提交,要么触发一次支付。如果需要给用户主动推送模板信息,那么就需要拿到足够多的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按钮的样式权重高,行号和其他属性均有自己的定义,会严重影响内部组件的ui,所以要对button的样式就行重置,主要思路是继承父级的样式。catchform.wxccform.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函数内部同步表单信息和触发回调,代码如下:catchform.jsComponent({  /**   * 组件的属性列表   */  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.callback(e);    },    /**     * 捕获点击回调     */    callback: function (e) {      try {        this.triggerEvent(“callback”, e);      } catch (err) {        //todo      }    }  }})第四步:使用catchform捕获组件使用组件bind:callback=”toDetail”,指触发表单提交后的回调函数data-record=”{{item}}” , 是自定义参数后续再根据formId和openId就可以发送模板信息了微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序捕获formId实现无限量发送模板信息
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏