十年網(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ò),可以把它分享出去讓更多的人看到吧!