javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 基于Taro的微信小程序模板消息

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

作者:JustBeCoder

这篇文章主要介绍了基于Taro的微信小程序模板消息-获取formId功能模块封装实践,小程序提供了一种能力-模板消息,基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验,需要的朋友可以参考下

前言

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

看图说话:

下发模板消息效果图

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

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

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

那么问题来了?

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

获取formId的原理

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

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

获取formId模块的封装

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

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

基于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效果图

后记

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

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

您可能感兴趣的文章:
阅读全文