基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實踐

更新時間：2019年07月15日 11:45:17 作者：JustBeCoder

這篇文章主要介紹了基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實踐，小程序提供了一種能力-模板消息，基于微信的通知渠道，我們?yōu)殚_發(fā)者提供了可以高效觸達用戶的模板消息能力，以便實現(xiàn)服務的閉環(huán)并提供更佳的體驗,需要的朋友可以參考下

前言

在微信小程序中，小程序提供了一種能力-模板消息，官方文檔是這樣描述的：“基于微信的通知渠道，我們?yōu)殚_發(fā)者提供了可以高效觸達用戶的模板消息能力，以便實現(xiàn)服務的閉環(huán)并提供更佳的體驗?！?br />

看圖說話：

下發(fā)模板消息效果圖

這無疑又給小程序提供了與用戶進行通知、反饋的新能力，但是小程序為了防止模板消息對用戶造成信息轟炸，影響用戶體驗，也設置了一些規(guī)矩：

模板推送位置：服務通知
模板下發(fā)條件：用戶本人在微信體系內與頁面有交互行為后觸發(fā)
模板跳轉能力：點擊查看詳情僅能跳轉下發(fā)模板的該帳號的各個頁面

那我們想通過小程序給用戶發(fā)送模板消息需要怎么做呢？

用戶必須與小程序發(fā)生了頁面的交互行為，如支付、提交表單
支付會產(chǎn)生一個prepay_id的標記，提交表單會產(chǎn)生一個formId的標記
服務端根據(jù)prepay_id或formId來發(fā)送模板消息

無論是prepay_id還是formId都只有7天的有效期

那么問題來了？

如果用戶在使用小程序的過程中，沒有在7天內進行一些信息提交操作，或者是支付操作，那么我們就無法獲取prepay_id，formId了，但是實際的業(yè)務上卻需要給用戶發(fā)送一些模板消息，已達到某些推廣或通知的效果。prepay_id必須是支付的時候才能產(chǎn)生，這個無需多言。今天胡哥就給大家來介紹下，如何在小程序中盡可能的獲取formId，以達到讓服務端有盡可能多的formId來發(fā)送模板消息。

獲取formId的原理

必須是form組件，并且需聲明屬性report-submit="，表示需要發(fā)送模板消息，同時監(jiān)聽bindsubmit事件；
必須在該form組件中，有button組件，同時該button組件需聲明屬性form-type="submit"。

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

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

獲取formId模塊的封裝

基于小程序獲取formId的原理，我們可以變相考慮：

只要用戶觸發(fā)了符合特定條件的包含button組件的form組件的bindSubmit事件，就可以獲取到formID；
同時借助CSS樣式，我們可以將form組件和button組件設置成隱形的，不可見但確真實存在；
將隱形的button組件覆蓋在真實的組件上，當點擊真實組件時，實際上就觸發(fā)了button的點擊，同時用戶是無感知的。

這里是重點，圈起來，一定會考的！

基于Taro的獲取formId功能模塊封裝實踐

設計獨立的功能模塊，以便供其他模塊方便調用，項目目錄結構

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

src/components/formId/index.js

/**
 * 封裝FormId組件，以提供向服務端發(fā)送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)
  // 模態(tài)框展示
  Taro.showModal({
   title: 'formId',
   content: e.detail.formId,
   showCancel: false
  })
  /**
  * 注意： 
  * 實際封裝中，直接將獲取的formId發(fā)送到后端服務器即可，無需彈框提示、控制臺打印，此處只是為了給小伙伴展示效果
  */ 
 }
 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效果圖