這篇文章給大家分享的是有關(guān)基于Taro的微信小程序模板消息怎么獲取formId功能模塊封裝的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)建站長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新區(qū)企業(yè)提供專(zhuān)業(yè)的成都做網(wǎng)站、成都網(wǎng)站制作，新區(qū)網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

這無(wú)疑又給小程序提供了與用戶進(jìn)行通知、反饋的新能力，但是小程序?yàn)榱朔乐鼓０逑?duì)用戶造成信息轟炸，影響用戶體驗(yàn)，也設(shè)置了一些規(guī)矩：

• 模板推送位置：服務(wù)通知

• 模板下發(fā)條件：用戶本人在微信體系內(nèi)與頁(yè)面有交互行為后觸發(fā)

• 模板跳轉(zhuǎn)能力：點(diǎn)擊查看詳情僅能跳轉(zhuǎn)下發(fā)模板的該帳號(hào)的各個(gè)頁(yè)面

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

• 用戶必須與小程序發(fā)生了頁(yè)面的交互行為，如支付、提交表單

• 支付會(huì)產(chǎn)生一個(gè)prepay_id的標(biāo)記，提交表單會(huì)產(chǎn)生一個(gè)formId的標(biāo)記

• 服務(wù)端根據(jù)prepay_id或formId來(lái)發(fā)送模板消息

無(wú)論是prepay_id還是formId都只有7天的有效期

那么問(wèn)題來(lái)了？

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

獲取formId的原理

• 必須是form組件，并且需聲明屬性report-submit="，表示需要發(fā)送模板消息，同時(shí)監(jiān)聽(tīng)bindsubmit事件；

• 必須在該form組件中，有button組件，同時(shí)該button組件需聲明屬性form-type="submit"。

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

 提交  

獲取formId模塊的封裝

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

• 只要用戶觸發(fā)了符合特定條件的包含button組件的form組件的bindSubmit事件，就可以獲取到formID；

• 同時(shí)借助CSS樣式，我們可以將form組件和button組件設(shè)置成隱形的，不可見(jiàn)但確真實(shí)存在；

• 將隱形的button組件覆蓋在真實(shí)的組件上，當(dāng)點(diǎn)擊真實(shí)組件時(shí)，實(shí)際上就觸發(fā)了button的點(diǎn)擊，同時(shí)用戶是無(wú)感知的。

這里是重點(diǎn)，圈起來(lái)，一定會(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對(duì)象
  */
 formSubmit (e) {
  // 打印在控制臺(tái)
  console.log('formId:', e.detail.formId)
  // 模態(tài)框展示
  Taro.showModal({
   title: 'formId',
   content: e.detail.formId,
   showCancel: false
  })
  /**
  * 注意： 
  * 實(shí)際封裝中，直接將獲取的formId發(fā)送到后端服務(wù)器即可，無(wú)需彈框提示、控制臺(tái)打印，此處只是為了給小伙伴展示效果
  */ 
 }
 render () {
  let { children } = this.props
  return (
   
    { children }
    
   
  )
 }
}

src/components/formId/index.scss

非常重要的問(wèn)題：就是隱藏樣式，讓用戶不可見(jiàn)、無(wú)感知，但實(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組件 */}
    
     {/* 頁(yè)面中任意元素 */}
     其他元素
    
   
  )
 }
}

效果圖

獲取formId效果圖

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