基于Taro的微信小程序模板消息-获取formId功能模块封装实践

前言

在微信小程序中,小程序提供了一种能力-模板消息,官方文档是这样描述的:“基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验。”

看图说话:

下发模板消息效果图

这无疑又给小程序提供了与用户进行通知、反馈的新能力,但是小程序为了防止模板消息对用户造成信息轰炸,影响用户体验,也设置了一些规矩:

  • 模板推送位置:服务通知
  • 模板下发条件:用户本人在微信体系内与页面有交互行为后触发
  • 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个页面

那我们想通过小程序给用户发送模板消息需要怎么做呢?

  • 用户必须与小程序发生了页面的交互行为,如支付、提交表单
  • 支付会产生一个prepay_id的标记,提交表单会产生一个formId的标记
  • 服务端根据prepay_id或formId来发送模板消息

无论是prepay_id还是formId都只有7天的有效期

那么问题来了?

如果用户在使用小程序的过程中,没有在7天内进行一些信息提交操作,或者是支付操作,那么我们就无法获取prepay_id,formId了,但是实际的业务上却需要给用户发送一些模板消息,已达到某些推广或通知的效果。prepay_id必须是支付的时候才能产生,这个无需多言。今天胡哥就给大家来介绍下,如何在小程序中尽可能的获取formId,以达到让服务端有尽可能多的formId来发送模板消息。

获取formId的原理

  • 必须是form组件,并且需声明属性report-submit=",表示需要发送模板消息,同时监听bindsubmit事件;
  • 必须在该form组件中,有button组件,同时该button组件需声明属性form-type="submit"。

上代码 --- 小程序原生代码演示

<form report-submit="true" bindSubmit="submitEvent">
 <button open-type="submit">提交</button>
</form>

获取formId模块的封装

基于小程序获取formId的原理,我们可以变相考虑:

  • 只要用户触发了符合特定条件的包含button组件的form组件的bindSubmit事件,就可以获取到formID;
  • 同时借助CSS样式,我们可以将form组件和button组件设置成隐形的,不可见但确真实存在;
  • 将隐形的button组件覆盖在真实的组件上,当点击真实组件时,实际上就触发了button的点击,同时用户是无感知的。

这里是重点,圈起来,一定会考的!

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

设计独立的功能模块,以便供其他模块方便调用,项目目录结构

src/
 components/
  formId/
   index.js
   index.scss

src/components/formId/index.js

/**
 * 封装FormId组件,以提供向服务端发送formId的功能
 */
import Taro, { Component } from '@tarojs/taro'
import { View, Form } from '@tarojs/components'
import './index.scss'

export default class FormId extends Component {
 constructor (props) {
  super(props)
 }
 /**
  * formSubmit()
  * @description 提交formId到后端服务器
  * @param {*} e event对象
  */
 formSubmit (e) {
  // 打印在控制台
  console.log('formId:', e.detail.formId)
  // 模态框展示
  Taro.showModal({
   title: 'formId',
   content: e.detail.formId,
   showCancel: false
  })
  /**
  * 注意:
  * 实际封装中,直接将获取的formId发送到后端服务器即可,无需弹框提示、控制台打印,此处只是为了给小伙伴展示效果
  */
 }
 render () {
  let { children } = this.props
  return (
   <Form className="form" reportSubmit="true" onSubmit={this.formSubmit}>
    { children }
    <Button className="form-btn" formType="submit"></Button>
   </Form>
  )
 }
}

src/components/formId/index.scss

非常重要的问题:就是隐藏样式,让用户不可见、无感知,但实际确实存在的。

.form {
 position: relative;
 display: flex;
 .form-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  padding: 0;
  box-sizing: border-box;
  &::after {
   content: "";
   border: none;
  }
 }
}

src/pages/index/index.js 调用formId模块

在任意想使用formId的其他模块中引入,调用即可

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import FormId from '../../components/formId'

export default class Index extends Component {
 render () {
  return (
   <View className="index">
    {/* 调用FormId组件 */}
    <FormId>
     {/* 页面中任意元素 */}
     <Button>其他元素</Button>
    </FormId>
   </View>
  )
 }
}

效果图

获取formId效果图

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏、转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...

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

(0)

相关推荐

  • 使用taro开发微信小程序遇到的坑总结

    Taro,京东凹凸实验室出品的适配多端的一个框架,Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 一.taro开发搭建 1.taro很方便就在于其环境搭建很轻松,照着官方文档几行代码就能搭建好. 2.在进行预览的时候,不同的方式区别是很大的

  • taro开发微信小程序的实践

    在京东凹凸实验室开发Taro跨平台早期之前,就已经进行Taro尝鲜了.开发这个实例 猫眼电影 已经过去几个月了.案例部分使用的是猫眼电影真实线上接口,关于订座的座位数据是自己模拟实现的,案例只供参考学习. 开发环境 操作系统:Window 10 Taro版本:v0.0.69 Node版本:v8.11.1 github地址: https://github.com/Harhao/miniProgram 运行效果 目录分析 src 是主要的开发目录,各个文件实现功能如下所示: ├─.idea │ └─

  • 微信小程序图片左右摆动效果详解

    先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可. 先看效果如下: 简单的参考代码: wxml: <image class='img' src="http://intmote.com/picture/gift.png" animation="{{animation}}"></image

  • 微信小程序开发常见问题及解决方案

    前言 我们在做微信小程序开发的过程中,总会遇到各种奇葩的问题.今天就把我在小程序开发过程中遇到的各种问题,及对应的解决方案总结在这里,方便以后自己回顾,也方便大家查看. 云开发相关 一 云函数调用失败问题 [云函数] [login] 调用失败 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail requestID , cloud function service erro

  • 微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步

    小程序wx.navigateTo路由方法中新增加了events属性,可以用于监听被打开页面发送到当前页面的数据.基础库 2.7.3 开始支持. 相关文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html 基本使用方法文档中已经有示例,可以参考 上级页面 新打开页面 通过上面的方法,小程序可以实现不同页面直接互相调用相关方法,也能进行页面间传值等处理 以上就是本文的全部内容,希望对大家的学

  • 微信小程序解析富文本过程详解

    前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法来替换标签,后来找到了一个很好用的插件:WxParse. 今天分享给大家,Github地址:https://github.com/icindy/wxParse 使用WxParse解析富文本数据 1.将下载下来的插件文件夹复制到我们的项目根目录下(其中emojis文件可根据自己所需决定要或者不要,其他

  • 基于Taro的微信小程序模板消息-获取formId功能模块封装实践

    前言 在微信小程序中,小程序提供了一种能力-模板消息,官方文档是这样描述的:"基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验." 看图说话: 下发模板消息效果图 这无疑又给小程序提供了与用户进行通知.反馈的新能力,但是小程序为了防止模板消息对用户造成信息轰炸,影响用户体验,也设置了一些规矩: 模板推送位置:服务通知 模板下发条件:用户本人在微信体系内与页面有交互行为后触发 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 微信小程序绑定手机号获取验证码功能

    微信小程序验证码获取方式,代码如下所示: <!-- 绑定手机号 --> <view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> <input name="phone" type='number' placeholder=&quo

  • 微信小程序模板消息限制实现无限制主动推送的示例代码

    需求背景 基于微信的通知渠道,微信小程序为开发者提供了可以高效触达用户的模板消息能力,在用户本人与小程序页面有交互行为后触发,通过微信聊天列表中的服务通知可快捷进入查看消息,点击查看详情还能跳转到下发消息的小程序的指定页面. 微信小程序允许下发模板消息的条件分为两类:支付或者提交表单.通过提交表单来下发模板消息的限制为"允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条,多次提交下条数独立,相互不影响)". 然而,用户1次触发7天内推送1条通知是明显不够用的.比如,

  • 微信小程序模板消息推送的两种实现方式

    最近在做微信小程序,为了让用户能更加方便的获取到小程序内部的通知,便想着用模板消息来解决此类问题.首先介绍一下两种方法 第一种是传统的按照微信开发文档来实现模板消息的获取,首先要明确的是你要有一个第三方的服务器,因为微信现在规定在小程序内部不能直接请求微信的服务器,而是要请求第三方服务器,由第三方服务器来请求微信的服务器 1.传统方式实现模板消息 1.1获取用户openId 这一步可以在wx.login方法内获取,用来标注模板消息的接受者 1.2获取模板ID 有两个方法可以获取模版ID 通过模版

  • 如何基于PHP实现微信小程序pdf文件的预览功能

    目录 知识点 问题描述 探索过程 实现思路 最终效果 实现步骤 总结 知识点 微信小程序预览pdf文件 这都是一些实际项目的开发经验,不是东拼西凑的网上水文.如果这篇文章帮到了你,麻烦动动你发财的小手给点个赞,留下个评论. 问题描述 前段时间文库类微信小程序开发中遇到个问题,就是要在小程序中预览阿里云OSS中的pdf文件.微信官方给的方案就一个,就是把文档缓存到本地然后用资源管理器打开. 这样写问题很明显,pdf文件小的话还可以,当pdf文件很大的时候,加载速度就会很慢.而且我只是需要预览单纯的

  • 基于PHP实现微信小程序客服消息功能

    项目说明: 本项目是一个简单微信小程序客服消息类,实现客服消息相关功能.官方给的php示例有误,这里就不再吐槽了. 本示例是采用开发者服务器,没有采用云调用的形式. 官方文档: 客服消息指南 客服消息服务端 适用场景 客户消息流程图 使用步骤 1.开启客服消息 https://mp.weixin.qq.com/wxam... 登录-开发-开发设置-消息推送 []( https://raw.githubusercontent... 点击"启动" []( https://raw.githu

  • 微信小程序模板和模块化用法实例分析

    本文实例讲述了微信小程序模板和模块化用法.分享给大家供大家参考,具体如下: template 模板,在定义的时候使用name属性,如以下声明方式 <template name="mytemp"> <view> name:{{names}} address:{{add}} </view> </template> 模板不能直接在界面上显示,需要调用的时候才能显示出来,调用的时候需要使用is属性来说明调用的是哪个模板,并且传参的形式可以有多种

  • 微信小程序模板(template)使用详解

    本文为大家分享了微信小程序模板template的使用方法,供大家参考,具体内容如下 效果图 以MUI的实例首页和列表页面为实例 通过上图,可以看出两个页面的列表部分很相近,以每行作为单元制作模板. template模板 1.模板存放的位置以及使用模板页面存放的位置 template模板的WXML <!--右侧无箭头 --> <template name="listNone"> <view class="tui-menu-list">

  • 微信小程序订阅消息(java后端实现)开发

    订阅消息说明 订阅消息是微信近期新出的一个能力,用来代替原有的模板消息(原有的模板消息即将下线) 订阅消息的功能较模板消息有所提升,"7天"的限制取消,同时有"一次性"和"永久"订阅.(功能上是这样说的,但是实际开发时发现"永久"订阅还是对小程序的服务类目有要求的,客户的小程序只支持"一次性"订阅) 官方通道: 小程序前端:点击进入 小程序服务端:点击进入 开发思路 用户在小程序内触发按钮或进行支付操作时前

随机推荐