這篇文章主要介紹了基於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效果圖
後記
以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。