微信門戶開發(fā)框架相關(guān)文檔

為了更有效管理訂閱用戶以及分組信息，我們可以從微信服務(wù)器上獲取相關(guān)的信息，供我們了解關(guān)注的用戶信息，也可以為后續(xù)的群發(fā)消息做準(zhǔn)備。

訂閱用戶的管理如下所示，默認(rèn)可以通過用戶的地區(qū)進(jìn)行查看，地區(qū)根據(jù)：國家-省份-城市這樣的級(jí)別進(jìn)行展開。

也可以根據(jù)標(biāo)簽查看，標(biāo)簽可以進(jìn)行維護(hù)，以及為標(biāo)簽加入或者移除人員，界面如下圖所示。

以及可以根據(jù)分組查看，如下所示。

訂閱用戶可以從微信服務(wù)器上進(jìn)行同步到本地，單擊同步數(shù)據(jù)，可以把服務(wù)器上的用戶數(shù)據(jù)下載到本地進(jìn)行更新或者寫入。

雙擊可以查看訂閱用戶信息，查看訂閱用戶的詳細(xì)信息界面如下所示。

2.9）用戶標(biāo)簽管理

微信公眾號(hào)，仿照企業(yè)微信的思路，增加了標(biāo)簽管理的功能，對(duì)關(guān)注的粉絲可以設(shè)置標(biāo)簽管理，實(shí)現(xiàn)更加方便的分組管理功能。開發(fā)者可以使用用戶標(biāo)簽管理的相關(guān)接口，實(shí)現(xiàn)對(duì)公眾號(hào)的標(biāo)簽進(jìn)行創(chuàng)建、查詢、修改、刪除等操作，也可以對(duì)用戶進(jìn)行打標(biāo)簽、取消標(biāo)簽等操作。

標(biāo)簽管理是替代用戶組管理的一種標(biāo)簽，可以很好管理訂閱的用戶，我們可以通過封裝好的微信接口很容易的獲取騰訊服務(wù)器上用戶標(biāo)簽列表，然后進(jìn)行管理，如下圖所示。

同時(shí)前面提到了，可以在訂閱用戶按標(biāo)簽進(jìn)行維護(hù)的，如下所示。

編輯標(biāo)簽信息界面如下所示。

2.10）多媒體管理

多媒體管理是指把本地文件上傳到微信服務(wù)器上進(jìn)行保存，方便信息的發(fā)送等操作。微信要求，某些信息，必須是先上傳到服務(wù)器上，然后才能使用它的媒體ID進(jìn)行發(fā)送的。

文件成功上傳到服務(wù)器后，在列表里面的“文件上傳標(biāo)識(shí)，就是一串的編碼數(shù)據(jù)，同時(shí)有一個(gè)上傳的時(shí)間戳（因?yàn)槲⑿欧?wù)器只保留了3天的媒體數(shù)據(jù)，超過期限的數(shù)據(jù)會(huì)被自動(dòng)刪除。

同時(shí)，在列表的上面，有兩個(gè)重要的功能：上傳選定的記錄，重新上傳過期的記錄。方便我們對(duì)自己多媒體文件的重新更新操作。

添加界面操作如下所示，其中引入了附件上傳的控件進(jìn)行文件的操作，非常方便。同時(shí)上傳成功的文件，會(huì)在列表中列出。

多媒體文件可以是下面幾種方式：圖片、語音、視頻、縮略圖。

保存后的數(shù)據(jù)記錄，文件上傳標(biāo)識(shí)和時(shí)間戳都是空的，我們?nèi)绻褂茫仨毎阉麄兩蟼鞯轿⑿诺姆?wù)器上，然后根據(jù)它的進(jìn)行信息的發(fā)送，上傳選定的記錄操作界面如下所示。

多媒體文件順利上傳后，記錄的信息如下所示。

2.11）圖文消息處理

圖文消息分為單圖文消息和多圖文消息兩種，單圖文消息如下所示。

多圖文消息如下所示：

和多媒體數(shù)據(jù)管理一樣，圖文消息也是通過同樣的方式進(jìn)行管理，先上傳到服務(wù)器，然后在進(jìn)行消息的發(fā)送操作，多媒體消息一樣有時(shí)間方面的限制要求，具體在我們的微信門戶平臺(tái)里面管理界面如下所示。

添加圖文消息界面如下所示，保存后，可以在編輯界面中的“其他圖文列表”里面，繼續(xù)添加多圖文的消息內(nèi)容。

在添加界面中，選擇圖文消息的縮略圖，都是通過選定指定的，已經(jīng)上傳到服務(wù)器上圖片或者縮略圖資源才可以的。

添加后的多圖文列表，可以進(jìn)行查看管理。

保存記錄后，然后繼續(xù)上傳，上傳后的記錄界面如下所示，成功后返回一個(gè)上傳后的服務(wù)器標(biāo)識(shí)和時(shí)間戳，否則提示錯(cuò)誤。

2.12）會(huì)話消息管理

為了方便記錄客戶的輸入和發(fā)送信息，我們?cè)谖⑿砰T戶管理平臺(tái)里面記錄用戶的輸入數(shù)據(jù)，具體會(huì)話消息管理界面如下所示。

我們可以雙擊最近48小時(shí)內(nèi)的任何一條記錄，可以給關(guān)注的客戶進(jìn)行消息的發(fā)送操作，如果消息發(fā)送成功，用戶在手機(jī)的微信賬號(hào)里面就能收到相關(guān)的發(fā)送消息了。

2.13）群發(fā)消息管理

為了對(duì)客戶進(jìn)行相應(yīng)的營銷操作，有時(shí)候我們需要對(duì)指定的群主或者人員進(jìn)行消息的群發(fā)，讓客戶經(jīng)常性的了解我們產(chǎn)品的信息和活動(dòng)。

由于群發(fā)消息，除了文本消息，可以直接編輯發(fā)送外，其他數(shù)據(jù)，必須要求是上傳到服務(wù)器的多媒體文件或者圖文消息內(nèi)容，因此前面的多媒體管理和圖文消息管理，就是主要為了群發(fā)消息的目的引入的。有了上面的多媒體和多圖文信息，我們從平臺(tái)里面選擇記錄即可進(jìn)行發(fā)送，從而省卻麻煩的連帶工作，實(shí)現(xiàn)高效的信息群發(fā)操作。

群發(fā)的消息，可以按群發(fā)分組進(jìn)行查看，也可以按照消息類型進(jìn)行查看，使得我們管理起來根據(jù)方便。

添加圖文消息，可以選擇文本消息、圖文消息、圖片消息等內(nèi)容，根據(jù)不同的內(nèi)容，界面提供不同的選擇操作。

消息的群發(fā)類型分為兩種，一種是根據(jù)分組，那么從平臺(tái)里面選擇對(duì)應(yīng)的分組即可；一種是根據(jù)用戶的進(jìn)行發(fā)送，提供給用戶輸入。主要的操作界面如下所示。

2.14）使用語音處理

我們知道，微信最開始就是做語音聊天而使得其更加流行的，因此語音的識(shí)別處理自然也就成為微信交流的一個(gè)重要途徑，微信的開發(fā)接口，也提供了對(duì)語音的消息請(qǐng)求處理。這里主要介紹如何利用語音的識(shí)別，對(duì)C#開發(fā)的微信門戶應(yīng)用的整個(gè)事件鏈的處理操作，使得在我們的微信賬號(hào)里面，更加方便和多元化對(duì)用戶的輸入進(jìn)行處理。

在系統(tǒng)后臺(tái)里面，會(huì)檢查是否獲得了微信的語音識(shí)別結(jié)果，如果獲得，那么這個(gè)時(shí)候，就是和處理用戶文本輸入的操作差不多了，語音輸入的處理邏輯如下所示。

首先我根據(jù)識(shí)別結(jié)果，尋找是否用戶讀出了微信門戶的菜單名稱，如果根據(jù)語音結(jié)果找到對(duì)應(yīng)的菜單記錄，那么我們執(zhí)行菜單事件（如果是URL的View類型菜單，我們沒辦法重定向到指定的鏈接，因此給出一個(gè)鏈接文本提示，給用戶單擊進(jìn)入；如果沒有找到菜單記錄，那么我們就把語音識(shí)別結(jié)果作為一般的事件進(jìn)行處理，如果事件邏輯沒有處理，那么我們最后給出一個(gè)默認(rèn)的語音應(yīng)答提示結(jié)果就可以了。

微信門戶測(cè)試界面效果如下所示。

為了方便對(duì)客戶會(huì)話的記錄，我的微信門戶后臺(tái)，會(huì)記錄用戶的語音輸入內(nèi)容，如下所示。

2.15）使用地理位置擴(kuò)展相關(guān)應(yīng)用

我們知道，地理位置信息可以用來做很多相關(guān)的應(yīng)用，除了我們可以知道用戶所在的位置，還可以關(guān)聯(lián)出一些地理位置的應(yīng)用，如天氣，熱映影片，附近景點(diǎn)，附近影院，交通事件等等，反正所有和地理位置相關(guān)的信息，我們都可以根據(jù)需要做一些擴(kuò)展應(yīng)用。這里主要介紹利用地理位置信息，如何構(gòu)建使用這些應(yīng)用的操作。

1）微信的地理位置信息

在使用前，我們先來看看微信的接口，為我們定義了那些關(guān)于與地理位置的信息。其實(shí)地理位置的信息，微信分為了兩個(gè)方面，一個(gè)是接收用戶的地理位置請(qǐng)求，一個(gè)是用戶允許上報(bào)地理位置操作，定時(shí)發(fā)送的地理位置信息。

地理位置的上報(bào)操作，就是在輸入的地方，選擇+號(hào)進(jìn)行添加地理位置，然后選擇當(dāng)前或者指定的地理位置地圖，具體操作如下所示。

首先對(duì)用戶地理位置的請(qǐng)求，我根據(jù)數(shù)據(jù)庫配置給出了一個(gè)用戶選擇的指令提示，如下所示。

為了對(duì)地理位置請(qǐng)求的處理，我定義了一個(gè)用于處理這個(gè)操作的指令操作

這樣整個(gè)地理位置的指令操作，就在應(yīng)答鏈里面進(jìn)行很好的跳轉(zhuǎn)管理了。幾個(gè)應(yīng)用擴(kuò)展的界面效果如下所示。

2.16）微信掃碼登錄

在現(xiàn)今很多網(wǎng)站里面，都使用了微信開放平臺(tái)的掃碼登錄認(rèn)證處理，這樣做相當(dāng)于把身份認(rèn)證交給較為權(quán)威的第三方進(jìn)行認(rèn)證，在應(yīng)用網(wǎng)站里面可以不需要存儲(chǔ)用戶的密碼了。

在用戶列表的二維碼連接上，單擊可以對(duì)用戶進(jìn)行微信掃碼綁定，這樣用戶可以在掃碼登錄處直接掃碼登錄，不需要輸入賬號(hào)密碼。

一旦成功綁定用戶微信，在微信端會(huì)定位到一個(gè)綁定成功的頁面（自定義的H5頁面），如下所示。

如果用戶已經(jīng)進(jìn)行了二維碼綁定，則可以在管理界面進(jìn)行取消綁定，這樣可以解綁用戶賬號(hào)和微信之間的關(guān)聯(lián)。

2.17）微信搖一搖紅包功能

搖一搖周邊紅包接口是為線下商戶提供的發(fā)紅包功能。用戶可以在商家門店等線下場(chǎng)所通過搖一搖周邊領(lǐng)取商家發(fā)放的紅包，在線上轉(zhuǎn)發(fā)分享無效。

開發(fā)者可通過接口開發(fā)搖一搖紅包功能，特點(diǎn)包括：

可選擇使用模板加載頁或自定義頁面調(diào)起微信原生紅包頁面(詳見創(chuàng)建紅包活動(dòng)中字段，1為使用模板，2為使用自定義頁面)原生紅包頁面拆紅包，無需通過公眾號(hào)消息下發(fā)提供關(guān)注公眾號(hào)能力，用戶可自行選擇是否關(guān)注(裂變紅包分享時(shí)無效)完成頁面可配置跳轉(zhuǎn)鏈接，可跳轉(zhuǎn)商戶的其他自定義頁面同一個(gè)用戶在單個(gè)紅包活動(dòng)中只能領(lǐng)取1次紅包

用戶側(cè)交互流程

常規(guī)的搖一搖紅包的流程如下所示，這里沒有使用用戶自定義的模板，也就是使用系統(tǒng)內(nèi)置的（努力加載中。。。）的頁面，紅包需要自己拆開。

紅包組件接口調(diào)用流程

申請(qǐng)紅包接口權(quán)限：登錄搖一搖周邊商戶后臺(tái),進(jìn)入開發(fā)者支持，申請(qǐng)開通搖一搖紅包組件接口;紅包預(yù)下單：調(diào)用微信支付的api進(jìn)行紅包預(yù)下單，告知需要發(fā)放的紅包金額，人數(shù)，生成紅包；創(chuàng)建活動(dòng)并錄入紅包信息：調(diào)用搖周邊平臺(tái)的api錄入創(chuàng)建紅包活動(dòng)并錄入信息，傳入預(yù)下單時(shí)生成的紅包；調(diào)用抽紅包：在搖出的頁面中通過調(diào)用抽紅包，抽中紅包的用戶可以拆紅包；調(diào)用以上接口時(shí)，紅包提供商戶和紅包發(fā)放商戶公眾號(hào)要求一致。

搖一搖紅包的處理過程可以先的流程說明，申請(qǐng)權(quán)限后，需要在搖一搖后臺(tái)配置相關(guān)的紅包處理頁面，然后通過紅包接口處理提交紅包數(shù)據(jù)，最后通過搖一搖的設(shè)備搖出界面，使用實(shí)現(xiàn)抽取紅包的操作，具體過程如下所示。

其中紅包接口處理，是調(diào)用一系列的紅包接口實(shí)現(xiàn)的，包括紅包預(yù)下單、創(chuàng)建紅包活動(dòng)、錄入紅包信息等操作，如下所示。

其中微信支付的相關(guān)配置信息在賬號(hào)的信息里面

利用搖一搖以及微信紅包接口，使用手機(jī)搖一搖獲得紅包的過程界面效果如下所示。

對(duì)封裝好的微信接口，接口成功調(diào)用后，我們可以在公眾號(hào)的對(duì)話里面看到紅包的信息結(jié)果，如下是整個(gè)紅包發(fā)送及拆開的過程。

另外我們也對(duì)裂變紅包進(jìn)行了接口的封裝，如果我們需要發(fā)送裂變紅包的時(shí)候，直接調(diào)用裂變紅包的接口即可實(shí)現(xiàn)紅包發(fā)送的操作。

2.18）微信H5頁面及JSDK開發(fā)

在我們開發(fā)微信頁面的時(shí)候，需要大量用到了各種呈現(xiàn)的效果，一般可以使用的效果來設(shè)計(jì)不同的頁面，不過微信團(tuán)隊(duì)也提供很多這方面的資源，包括的接口，以及Weui的頁面樣式和相關(guān)功能頁面，給我們提供了很大的便利。

1)

微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)。

目前支持的接口分類包括下面幾類：基礎(chǔ)接口、分享接口、圖像接口、音頻接口、智能接口、設(shè)備信息、地理位置、搖一搖周邊、界面操作、微信掃一掃、微信小店、微信卡券、微信支付，隨著微信功能的全部整合，估計(jì)更多的接口會(huì)陸續(xù)開放出來。

2）WeUI和 WeUI

WeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁開發(fā)量身設(shè)計(jì)，可以令用戶的使用感知更加統(tǒng)一。在微信網(wǎng)頁開發(fā)中使用 WeUI，有如下優(yōu)勢(shì)：

該樣式庫目前包含 、cell、、、、、icon 等各式元素，已經(jīng)在上開源。訪問或微信掃碼即可預(yù)覽。

WeUI中使用的是官方 WeUI 的 CSS 代碼，并提供了 / 版本的 API 實(shí)現(xiàn)。 WeUI相對(duì)于在官方WeUI的基礎(chǔ)上做了一些功能擴(kuò)展，已豐富界面設(shè)計(jì)和相關(guān)功能，因此我們可以考慮直接基于 WeUI的基礎(chǔ)上進(jìn)行頁面開發(fā)即可。

在我前面的一些案例中，都利用了We UI樣式來進(jìn)行很多微信H5頁面的功能設(shè)計(jì)，包括微信支付頁面、簽到頁面等等。

如微信支付頁面如下所示：

以及簽到頁面效果如下所示。

當(dāng)然我們可以根據(jù)業(yè)務(wù)需要，增加很多這樣和微信色調(diào)樣式一致的頁面，這個(gè)就是利用WeUI樣式帶來的界面體驗(yàn)一致性的好處。

本篇主要介紹微信H5頁面開發(fā)的經(jīng)驗(yàn)總結(jié)，上面提到了利用和WeUI來對(duì)微信應(yīng)用的H5頁面進(jìn)行開發(fā)，因此下面的相關(guān)效果也就是利用這些技術(shù)進(jìn)行處理的。

字典數(shù)據(jù)的綁定：

和常規(guī)網(wǎng)頁功能一樣，我們?cè)谠O(shè)計(jì)微信頁面應(yīng)用的時(shí)候，很多數(shù)據(jù)也是來源字典數(shù)據(jù)的，而且需要把它們動(dòng)態(tài)綁定在頁面上，微信頁面的 WeUI提供了一些列表字典數(shù)據(jù)的展示效果如下所示。我們?cè)谖⑿趴蚣芾锩嬉彩褂昧诉@些頁面組件，實(shí)現(xiàn)字典的綁定處理，如下所示。

同時(shí)，我們則可以在微信后臺(tái)對(duì)數(shù)據(jù)字典進(jìn)行維護(hù)即可進(jìn)行實(shí)時(shí)的數(shù)據(jù)更新。

3、設(shè)備維修案例功能介紹

本節(jié)介紹的是設(shè)備維修案例的微信應(yīng)用場(chǎng)景，該需求主要圍繞固定資產(chǎn)（如醫(yī)療設(shè)備）的微信應(yīng)用展開，包括錄入及查詢資產(chǎn)信息、資產(chǎn)盤點(diǎn)、設(shè)備的維修保養(yǎng)、日常巡檢、維修、計(jì)量檢測(cè)等事務(wù)。

整個(gè)案例微信端應(yīng)用采用的是H5頁面以及微信的JSDK進(jìn)行相關(guān)的接口開發(fā)，符合微信的界面風(fēng)格。后端管理就是本后臺(tái)管理系統(tǒng)。

3.1組織機(jī)構(gòu)及用戶分類（角色）

在系統(tǒng)中，根據(jù)系統(tǒng)應(yīng)用，建立了相關(guān)的組織機(jī)構(gòu)，以及對(duì)應(yīng)的用戶分類（即用戶角色），根據(jù)不同的角色可以授權(quán)不同的功能管理界面。

組織機(jī)構(gòu)如下所示。

用戶角色如下所示：

系統(tǒng)根據(jù)角色對(duì)菜單進(jìn)行不同的顯示設(shè)置。

以超級(jí)管理員（賬號(hào)，密碼為空）登陸系統(tǒng)，可以對(duì)整體微信功能進(jìn)行設(shè)置管理。

以普通管理員（賬號(hào)gl，密碼為）登錄系統(tǒng)，可以對(duì)相關(guān)的設(shè)備信息進(jìn)行維護(hù)管理，如下所示。

3.2 微信菜單

在微信端，我們需要根據(jù)我們的應(yīng)用，設(shè)置一些功能菜單，我們可以通過后臺(tái)進(jìn)行菜單的設(shè)置，然后通過接口提交到微信服務(wù)器即可。

這樣我們提交菜單后，在公眾號(hào)上就可以對(duì)相關(guān)的功能進(jìn)行操作了。

3.3設(shè)備添加及查看

在我們應(yīng)用系統(tǒng)中，一般都為每個(gè)設(shè)備指定一個(gè)設(shè)備編碼，我們通過生成二維碼后，可以通過微信掃碼進(jìn)行設(shè)備信息的添加或者完善，以及相關(guān)的操作。 設(shè)備二維碼采用連接+設(shè)備編碼的方式生成，如下所示：

設(shè)備二維碼的生成測(cè)試頁面地址是：/h5/Test，測(cè)試生成二維碼的界面效果如下所示。

有了這些帶有鏈接地址的二維碼，當(dāng)用戶使用微信掃碼操作的時(shí)候，會(huì)指定調(diào)整到對(duì)應(yīng)的連接，實(shí)現(xiàn)相應(yīng)的設(shè)備添加、維修保養(yǎng)、日常巡檢、維修、計(jì)量檢測(cè)等事務(wù)。

在微信端使用對(duì)應(yīng)的功能菜單掃碼（如使用【設(shè)備管理】=>【設(shè)備信息錄入】掃碼上面的設(shè)備二維碼），那么就可以進(jìn)行設(shè)備信息的添加操作了。

如果是設(shè)備信息查看，那么在微信端列出主要的設(shè)備信息；