十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
這篇文章給大家分享的是有關(guān)基于Taro的微信小程序模板消息怎么獲取formId功能模塊封裝的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新區(qū)企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站制作,新區(qū)網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
下發(fā)模板消息效果圖

這無疑又給小程序提供了與用戶進(jìn)行通知、反饋的新能力,但是小程序?yàn)榱朔乐鼓0逑τ脩粼斐尚畔⑥Z炸,影響用戶體驗(yàn),也設(shè)置了一些規(guī)矩:
模板推送位置:服務(wù)通知
模板下發(fā)條件:用戶本人在微信體系內(nèi)與頁面有交互行為后觸發(fā)
模板跳轉(zhuǎn)能力:點(diǎn)擊查看詳情僅能跳轉(zhuǎn)下發(fā)模板的該帳號的各個(gè)頁面
那我們想通過小程序給用戶發(fā)送模板消息需要怎么做呢?
用戶必須與小程序發(fā)生了頁面的交互行為,如支付、提交表單
支付會(huì)產(chǎn)生一個(gè)prepay_id的標(biāo)記,提交表單會(huì)產(chǎn)生一個(gè)formId的標(biāo)記
服務(wù)端根據(jù)prepay_id或formId來發(fā)送模板消息
無論是prepay_id還是formId都只有7天的有效期
那么問題來了?
如果用戶在使用小程序的過程中,沒有在7天內(nèi)進(jìn)行一些信息提交操作,或者是支付操作,那么我們就無法獲取prepay_id,formId了,但是實(shí)際的業(yè)務(wù)上卻需要給用戶發(fā)送一些模板消息,已達(dá)到某些推廣或通知的效果。prepay_id必須是支付的時(shí)候才能產(chǎn)生,這個(gè)無需多言。今天胡哥就給大家來介紹下,如何在小程序中盡可能的獲取formId,以達(dá)到讓服務(wù)端有盡可能多的formId來發(fā)送模板消息。
獲取formId的原理
必須是form組件,并且需聲明屬性report-submit=",表示需要發(fā)送模板消息,同時(shí)監(jiān)聽bindsubmit事件;
必須在該form組件中,有button組件,同時(shí)該button組件需聲明屬性form-type="submit"。
上代碼 --- 小程序原生代碼演示
獲取formId模塊的封裝
基于小程序獲取formId的原理,我們可以變相考慮:
只要用戶觸發(fā)了符合特定條件的包含button組件的form組件的bindSubmit事件,就可以獲取到formID;
同時(shí)借助CSS樣式,我們可以將form組件和button組件設(shè)置成隱形的,不可見但確真實(shí)存在;
將隱形的button組件覆蓋在真實(shí)的組件上,當(dāng)點(diǎn)擊真實(shí)組件時(shí),實(shí)際上就觸發(fā)了button的點(diǎn)擊,同時(shí)用戶是無感知的。
這里是重點(diǎn),圈起來,一定會(huì)考的!
基于Taro的獲取formId功能模塊封裝實(shí)踐
設(shè)計(jì)獨(dú)立的功能模塊,以便供其他模塊方便調(diào)用,項(xiàng)目目錄結(jié)構(gòu)
src/ components/ formId/ index.js index.scss
src/components/formId/index.js
/**
* 封裝FormId組件,以提供向服務(wù)端發(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到后端服務(wù)器
* @param {*} e event對象
*/
formSubmit (e) {
// 打印在控制臺
console.log('formId:', e.detail.formId)
// 模態(tài)框展示
Taro.showModal({
title: 'formId',
content: e.detail.formId,
showCancel: false
})
/**
* 注意:
* 實(shí)際封裝中,直接將獲取的formId發(fā)送到后端服務(wù)器即可,無需彈框提示、控制臺打印,此處只是為了給小伙伴展示效果
*/
}
render () {
let { children } = this.props
return (
)
}
}src/components/formId/index.scss
非常重要的問題:就是隱藏樣式,讓用戶不可見、無感知,但實(shí)際確實(shí)存在的。
.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調(diào)用formId模塊
在任意想使用formId的其他模塊中引入,調(diào)用即可
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 (
{/* 調(diào)用FormId組件 */}
{/* 頁面中任意元素 */}
)
}
}效果圖
獲取formId效果圖

感謝各位的閱讀!關(guān)于“基于Taro的微信小程序模板消息怎么獲取formId功能模塊封裝”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!