手把手教你學(xué)會微信公眾號活動H5開發(fā)（附服務(wù)端代碼）

時間：2023-07-24 18:36:01 | 來源：網(wǎng)站運營

時間：2023-07-24 18:36:01 來源：網(wǎng)站運營

手把手教你學(xué)會微信公眾號活動H5開發(fā)（附服務(wù)端代碼）：

背景

為了精細化運營用戶，我們需要統(tǒng)計用戶的站外訪問情況。

1.綁定微信標(biāo)識（openidX）&uid，支持以uid為標(biāo)識向?qū)W員推送公眾號信息。

2.在綁定契機中，將uid與用戶微信訪問h5的標(biāo)識（openidA)關(guān)聯(lián)起來，實現(xiàn)過往訪問歷史的同步和未來訪問的監(jiān)測。

openidX = 承擔(dān)推送任務(wù)的公眾號X下獲取的openid。

openidA = 公眾號“有道精品課”下通過網(wǎng)頁授權(quán)獲取的openid。 可能記錄著用戶以往訪問任意h5的時間戳、頁面各可視區(qū)域訪問時長、每次訪問的ip地址及ip解碼等。

涉及端

服務(wù)端 - 微信標(biāo)識的獲取、關(guān)聯(lián)、記錄，綁定行為的記錄。

蓋亞系統(tǒng) - 功能菜單擴充

數(shù)據(jù)中臺- userinfo

前端 - uid綁定/解綁頁

獲取微信網(wǎng)頁授權(quán)

第一步：用戶同意授權(quán)，獲取code

在確保微信公眾賬號擁有授權(quán)作用域（scope參數(shù)）的權(quán)限的前提下（服務(wù)號獲得高級接口后，默認擁有scope參數(shù)中的snsapi_base和snsapi_userinfo），引導(dǎo)關(guān)注者打開如下頁面

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

需要用戶授權(quán)請參考

第二步：通過code換取網(wǎng)頁授權(quán)access_token

首先請注意，這里通過code換取的是一個特殊的網(wǎng)頁授權(quán)access_token,與基礎(chǔ)支持中的access_token（該access_token用于調(diào)用其他接口）不同。公眾號可通過下述接口來獲取網(wǎng)頁授權(quán)access_token。如果網(wǎng)頁授權(quán)的作用域為snsapi_base，則本步驟中獲取到網(wǎng)頁授權(quán)access_token的同時，也獲取到了openid，snsapi_base式的網(wǎng)頁授權(quán)流程即到此為止。

尤其注意：由于公眾號的secret和獲取到的access_token安全級別都非常高，必須只保存在服務(wù)器，不允許傳給客戶端。后續(xù)刷新access_token、通過access_token獲取用戶信息等步驟，也必須從服務(wù)器發(fā)起。

請求方法

獲取code后，請求以下鏈接獲取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

業(yè)務(wù)中的邏輯

router接入路由如下，這里給微信一個可以握手的接口，有穩(wěn)定返回，告知主體文件及token可用

router.get('/', WechatController.signature)util公用方法

生成https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 這種微信重定向所需要的鏈接。

controller

用戶訪問時便重定向到指定頁面。同時可以帶上用戶的openid與state信息到重定向地址。這里我們使用cookie存儲openid。

最終通過

router.get('/wxAuth', WechatController.wxAuth)接口獲取微信授權(quán)后的用戶信息及重定向地址

應(yīng)用

公眾號的接?并開發(fā)一款公眾號管理系統(tǒng)：

1. 進?有道蓋亞系統(tǒng)，點擊右上?的新增公眾號按鈕。

2. 若你?權(quán)限則?法看到新增按鈕。那么新增操作請聯(lián)系管理員/技術(shù)支持開權(quán)限

3. 新增操作需要蓋亞和公眾號后臺同時進?，?先進?測試公眾號后臺（https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index），打開開發(fā)欄?的基本配置看到如下

點擊修改配置，看到如下

生產(chǎn)環(huán)境下配置條件微信公眾平臺同樣是掃碼登錄

在基本配置中設(shè)置可訪問集群的白名單，新增rancher中對應(yīng)的ip即可

4. 打開蓋亞操作系統(tǒng)的新增公眾號按鈕，如下（網(wǎng)易有道應(yīng)用場景，可不看）

5. 你需要提供的填?蓋亞的信息如下，到時候請復(fù)制粘貼該模板修改對應(yīng)

內(nèi)容提供給運維人員

• 接?公眾號或?程序的名稱
• 產(chǎn)品代號：約定代號為你公眾號的拼??字?，如測試公眾號，代號為csgzh
• AppId：即你公眾號后臺看到的開發(fā)者ID（AppId）
• 密鑰：開發(fā)者密碼，應(yīng)該永久保存，不要隨便重置
• 原始Id：在賬號詳情的底部，以gh開頭
• 接?token：約定與你的產(chǎn)品代號?致
• nonce_str：修改配置??，隨機?成的EncodingAESKey
• 公眾號對應(yīng)的學(xué)段：你的公眾號對應(yīng)的學(xué)段
• 負責(zé)?的Corp郵箱：負責(zé)該公眾號的?的?作郵箱
• 負責(zé)?精品課賬號：負責(zé)該公眾號的?的精品課賬號
• 接?的是?程序還是公眾號：是或否

6 你需要填?公眾號中的信息有如下

• URL：https://backend.youdao.com/
• token：約定與你的產(chǎn)品代號?致
• EncodingAESKey：隨機?成，復(fù)制粘貼提供給蓋亞信息錄?模板
• 選擇明?模式

7. 先將條?5的內(nèi)容提供給蓋亞，新增信息完成后，在再微信后臺配置??點擊保存，此時會提示保存成功，點擊啟?。

8. ?動刷新Token，將以下IP地址添加到微信公眾號后臺的IP?名單后，重新刷新鏈接: https://host/getAccessToken?prod=？？？,

prod需要換成??的產(chǎn)品代號

9. 接???授權(quán)，進?微信公眾號后臺，進?設(shè)置，公眾號配置，功能設(shè)置，??授權(quán)域名

a. 將??授權(quán)域名設(shè)置為：https://backend.youdao.com/b. 下載下圖?件放入可以讀取到的地址，使用nginx重定向或者路由可訪問即可，然后填寫和上??樣的域名

蓋亞系統(tǒng)的使?蓋亞系統(tǒng)的主要作?是統(tǒng)?處理公眾號?些消息的推送，和?些?戶信息的沉淀與其他平臺進?聯(lián)動。主要包括：48?時push、定時客服消息推送、定時模板、消息推送、關(guān)鍵字回復(fù)、微信客服消息推送等。以及菜單管理、標(biāo)簽管理、?戶打標(biāo)簽等。

接?蓋亞系統(tǒng)的公眾號，在設(shè)置學(xué)段后，教務(wù)系統(tǒng)中建課時，選擇對應(yīng)公眾號，?戶購課成功后，掃描關(guān)注購買成功?的公眾號關(guān)注后，蓋亞系統(tǒng)內(nèi)部會?動綁定該?戶精品課與公眾號的關(guān)系，該關(guān)系?便后?相關(guān)?戶在對應(yīng)公眾號的信息

推送

1. 客服消息 & 模版消息

• 客服消息：即普通的?字，圖?，?頻，視頻，分享鏈接等，只有活躍?戶才能收到消息，這?需要注意，如果在消息中設(shè)置a標(biāo)簽，請在使?href屬性的時候使?單引號
• 模版消息：特定格式的消息，可以觸達所有?戶（活躍/?活躍），但是推送過于頻繁，可能存在被封的情況

2. 活躍?戶定義

?官?定義：48?時內(nèi)，點擊菜單，模版消息，推?，或者給微信公號發(fā)送消息的?戶PUSH活動預(yù)想?戶掃描帶參?維碼關(guān)注或?然關(guān)注公眾號后，公眾號能主動的推送?些預(yù)設(shè)的消息，此類消息為，客服消息。

填寫對應(yīng)的內(nèi)容：

活動名稱：即你本次想推?該公眾號投放?維碼時參與的活動名。

參與的課程ID：此字段填寫的?的是為了?便后期查看活動相關(guān)的課程，但若與課程不想?，可以隨意填寫內(nèi)容（后期開發(fā)可以改為?必填）活動開始與結(jié)束的時間，字?意思。

?然關(guān)注or帶參?維碼：若選擇?然關(guān)注，則?戶在?然情況下關(guān)注該公眾號時，會被推送你這次設(shè)置的消息。若選擇?成帶參?維碼，則會?成?個?維碼，掃描該?維碼產(chǎn)?的關(guān)注，會被推送你這次設(shè)置的消息。

帶參?維碼有效期：字?意思，過期?維碼被掃碼會被微信警告該?維碼已經(jīng)過期，

選擇標(biāo)簽：該標(biāo)簽列表是你預(yù)設(shè)的標(biāo)簽，選擇后，?你這設(shè)置的這條路徑下產(chǎn)?的關(guān)注的?戶會被劃分到你選擇的標(biāo)簽下。

消息內(nèi)容： 可以設(shè)置多條，也可以設(shè)置?條。設(shè)置?條時，即就?戶掃碼進來?刻收到的內(nèi)容。

客服列表：是你在微信公眾號后臺開啟客服插件后，獲取到的你預(yù)設(shè)的客服，這?的客服含義請查閱?檔或者百度。

設(shè)置多條消息時，你可以設(shè)置延遲時間，若你想階段性的推送消息，則可以設(shè)置較?時間，若你想?瞬間推送?量消息，則可以將間隔設(shè)置為很短。

3、關(guān)鍵字管理

顧名思義，可以設(shè)置關(guān)鍵字，?戶可以通過關(guān)鍵字來觸發(fā)消息的推送～

回復(fù)類型可以?持：?本、圖?、鏈接

可以??選擇延遲多久回復(fù)內(nèi)容，回復(fù)什么內(nèi)容

菜單管理可以在蓋亞系統(tǒng)中設(shè)置公眾號的菜單，菜單官?限制，?菜單不多于5個，?菜單不多于3個

若之前在公眾號設(shè)置過菜單，則在蓋亞中可能有不兼容?持的類型，微信官??持多種類型的菜單，但只給開發(fā)者提供了：點擊、鏈接、?程序、?菜單

若你想設(shè)置點擊后推送相關(guān)消息，那么可以設(shè)置點擊類型，并且在關(guān)鍵字管理中，設(shè)置關(guān)鍵字?動回復(fù)，在蓋亞的點擊類型中填?關(guān)鍵字，即可實現(xiàn)點擊菜單推送消息