微信應(yīng)用如火如荼，很多公司都希望搭上信息快車，這個(gè)是一個(gè)非常重要的商機(jī)。用微信進(jìn)行營銷，一方面可以提高企業(yè)產(chǎn)品的宣傳效果，另一方面，也能提高我們企業(yè)的競爭力，縮短和直接客戶之間的距離。該微信門戶應(yīng)用開發(fā)框架，就是為了協(xié)助企業(yè)快速搭建微信應(yīng)用以及管理的平臺(tái)，使我們快速融入微信的市場化浪潮中，在市場激烈的競爭中占據(jù)有利條件，獲得更多的市場回報(bào)。
微信開發(fā)包括公眾號、企業(yè)微信、微信小程序等方面的開發(fā)內(nèi)容，需要對騰信的微信API接口進(jìn)行封裝：包括事件、菜單、訂閱用戶、多媒體文件、圖文消息、消息群發(fā)、微信支付和企業(yè)紅包、搖一搖設(shè)備、語義理解、微信小店、微信卡劵等相關(guān)接口處理，另外還包括掃一掃、圖庫和照片管理、地理位置、H5頁面開發(fā)等內(nèi)容，以及企業(yè)微信通訊錄接口、成員消息相互發(fā)送等方面接口。
微信門戶應(yīng)用管理系統(tǒng)，采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術(shù)路線，界面層采用Boostrap + Metronic組合的前端框架，數(shù)據(jù)訪問層支持Oracle、SQLServer、MySQL、PostgreSQL等數(shù)據(jù)庫。在微信門戶系統(tǒng)里面，實(shí)現(xiàn)下面這些功能操作：
1）實(shí)現(xiàn)菜單的動(dòng)態(tài)配置及更新到服務(wù)器上；
2）動(dòng)態(tài)定義事件和響應(yīng)消息，實(shí)現(xiàn)對不同行業(yè)，不同需求的菜單動(dòng)作響應(yīng)；
3）動(dòng)態(tài)的應(yīng)答指令配置處理，實(shí)現(xiàn)整套應(yīng)答鏈的消息處理；
4）獲取訂閱用戶和用戶分組信息，并可以實(shí)現(xiàn)用戶分組信息的維護(hù)等操作；
5）管理并更新多媒體文件、圖文消息等內(nèi)容，方便為客戶推送消息做準(zhǔn)備。
6）使用向選定訂閱用戶或者分組進(jìn)行消息的群發(fā)功能。
7）提供對用戶語音的識(shí)別，并將識(shí)別結(jié)果和事件處理進(jìn)行對接，實(shí)現(xiàn)語音內(nèi)容的處理。
8）提供對地理位置的記錄和擴(kuò)展應(yīng)用，實(shí)現(xiàn)對百度天氣、熱映影片、影院、旅游、交通消息等方面的第三方應(yīng)用的對接。
9）記錄用戶輸入的會(huì)話記錄，并可以根據(jù)會(huì)話記錄向客戶進(jìn)行消息的發(fā)送。
10）集成微信掃一掃的功能，實(shí)現(xiàn)條碼和二維碼掃碼的功能整合，可以在后臺(tái)整合自身應(yīng)處理；。
11）集成微信其他最新功能，包括拍照和圖庫選擇、快速發(fā)送地理位置等功能；
12）集成獲取關(guān)注成員的唯一ID，更新用戶備注，獲取客服聊天記錄等功能。
13）集成微信支付和企業(yè)紅包、搖一搖設(shè)備、語義理解、微信小店、微信卡劵等相關(guān)接口處理。
14）實(shí)現(xiàn)企業(yè)通訊錄的管理，包括部門管理、成員管理、標(biāo)簽管理，使得我們可以更方便同步企業(yè)微信信息；
15）實(shí)現(xiàn)企業(yè)微信無限制的消息發(fā)送，可以使企業(yè)和關(guān)注成員之間溝通更順暢；
16）集成企業(yè)微信文本消息、圖片消息、文件消息、語音消息、視頻消息、圖文消息等內(nèi)容的發(fā)送整合，統(tǒng)一處理接口；
17）實(shí)現(xiàn)企業(yè)微信菜單的動(dòng)態(tài)配置及更新到服務(wù)器上，動(dòng)態(tài)定義菜單事件和響應(yīng)消息，實(shí)現(xiàn)不同的菜單動(dòng)作響應(yīng)；
18）管理并更新企業(yè)微信的多媒體文件，方便同步到自己文件服務(wù)器進(jìn)行存儲(chǔ)和處理；
19）使用重定向功能獲訂閱用戶信息，實(shí)現(xiàn)企業(yè)成員身份的認(rèn)證和處理。
20）平臺(tái)和微信開放平臺(tái)整合掃描二維碼登錄，通過掃碼綁定并直接登陸系統(tǒng)。
……
在系統(tǒng)登錄界面輸入賬號和密碼后（默認(rèn)賬號admin，密碼為空），即可以超級管理員身份進(jìn)入管理系統(tǒng)的主界面。
系統(tǒng)登錄后，通過水平菜單進(jìn)行后臺(tái)功能管理。
系統(tǒng)支持多微信賬號的接入管理和使用，同時(shí)支持訂閱號、公眾號、企業(yè)微信、小程序的賬號配置。
可以在系統(tǒng)右上角進(jìn)行賬號的切換管理。
在系統(tǒng)中管理菜單，并通過把菜單提交到服務(wù)器上，實(shí)現(xiàn)菜單的動(dòng)態(tài)配置和生成，能夠?yàn)槲覀兿到y(tǒng)適應(yīng)各種的需要，實(shí)現(xiàn)靈活的處理。
微信菜單的添加界面如下所示。
微信菜單的修改界面如下所示
微信菜單定義是存儲(chǔ)在數(shù)據(jù)庫里面，如果需要提交到微信服務(wù)器上并生效，則需要調(diào)用微信API接口進(jìn)行處理，我在頁面的Controller控制器里增加一個(gè)提交到服務(wù)器的處理方法。
在微信服務(wù)賬號的門戶上，菜單的表現(xiàn)效果如下所示。
我們知道，微信的服務(wù)器架起了客戶手機(jī)和開發(fā)者服務(wù)器的一個(gè)橋梁。當(dāng)我們在微信服務(wù)器上的公眾賬號創(chuàng)建了相應(yīng)的菜單，通過消息的傳遞和響應(yīng)，就能實(shí)現(xiàn)了與用戶的交互操作，下面是它的消息流程圖。
對于動(dòng)態(tài)生成的菜單，大多數(shù)情況下是用作Click的方式，也就是需要定義每個(gè)菜單的事件響應(yīng)操作，我們使用微信的話，可以了解到，微信的處理事件，一般可以響應(yīng)用戶文本消息、圖片消息、圖文消息等內(nèi)容，常規(guī)下，一般使用文本消息或者圖文消息居多。
為了進(jìn)一步實(shí)現(xiàn)響應(yīng)內(nèi)容的重用，我們把菜單的事件定義和內(nèi)容定義進(jìn)行分開管理，事件定義可以使用多個(gè)文本消息，也可以使用多個(gè)圖文消息進(jìn)行組合，這樣可以實(shí)現(xiàn)更加靈活的使用環(huán)境。
添加事件定義如下所示
事件的響應(yīng)內(nèi)容編碼，可以選擇輸入或者從“編輯”按鈕中選擇，當(dāng)選擇“編輯”按鈕進(jìn)行選擇的時(shí)候，系統(tǒng)彈出一個(gè)對話框供用戶對事件的響應(yīng)內(nèi)容編碼選擇。
完成選擇后，回到原來的新增界面，將會(huì)看到返回的記錄就是我們選擇的記錄。
微信事件的編輯界面如下所示，類似新增界面的內(nèi)容。
上面說到，菜單的事件通過關(guān)聯(lián)事件編碼進(jìn)行處理，而事件本身可以組合多個(gè)消息內(nèi)容，因此消息內(nèi)容是響應(yīng)客戶操作的最小單元，它們可以是一條文本消息、圖文消息，也可以是多條消息的組合（同類型的話）。
為了方便管理，我把消息分為了圖文、指令、文本類型，如果需要，還可以根據(jù)需要把它細(xì)化為其他類型的消息。
消息內(nèi)容的添加界面如下所示。
文本消息的手機(jī)上界面效果如下所示。
這里不管是文本消息還是圖文消息，我們統(tǒng)一以圖文消息的定義來定義消息，如果是文本消息，我們只需要獲取描述內(nèi)容作為消息的主體即可。
圖文消息的編輯界面如下所示，主要就是填寫完整的內(nèi)容和圖片，以及頁面詳細(xì)的鏈接即可。
上面的這個(gè)客戶關(guān)系管理系統(tǒng)的消息，在手機(jī)上顯示的界面效果如下所示，單擊鏈接，可以切換到消息跳轉(zhuǎn)鏈接地址的。
應(yīng)答指令的維護(hù)，有點(diǎn)類似于事件的管理，主要就是定義一些用到的指令，方便構(gòu)建應(yīng)答系統(tǒng)的響應(yīng)鏈，從而實(shí)現(xiàn)一步步的操作指令。
在后臺(tái)設(shè)置好應(yīng)答指令后，系統(tǒng)就能根據(jù)應(yīng)答指令鏈進(jìn)行處理了。首先我們需要提供一個(gè)進(jìn)入應(yīng)答鏈的提示界面，如下所示。
但我們在菜單選擇應(yīng)答系統(tǒng)后，系統(tǒng)返回一個(gè)文本提示界面，如下所示。
這個(gè)界面里面提示了一些按鍵，包括幾個(gè)固定的按鍵和一些業(yè)務(wù)按鍵，輸入簡單的1~6可以對選擇進(jìn)行響應(yīng)。
我們看到上面的界面，輸入指令1后，系統(tǒng)進(jìn)入下一層的應(yīng)答指令，然后又列出幾個(gè)可供輸入的按鍵和內(nèi)容提示。
當(dāng)我們繼續(xù)輸入業(yè)務(wù)按鍵1后，響應(yīng)的是一個(gè)圖文消息，也是關(guān)于按鍵的詳細(xì)說明。
這個(gè)時(shí)候，我們也還可以輸入*號按鍵，返回上一級菜單的。
輸入0則轉(zhuǎn)入了客服對話模式，后續(xù)您發(fā)的任何消息，將會(huì)轉(zhuǎn)發(fā)到多客服系統(tǒng)里面了。
當(dāng)用戶發(fā)送消息后，客服助手就能及時(shí)收到消息并處理和客戶的應(yīng)答了。
通過使用多客服的客戶端，這樣處理消息交互起來非常方便，能獲得客戶的對話信息了，在電腦客戶端上，看到的界面如下所示。
手機(jī)上的談話截圖如下所示。
這樣就能夠通過多途徑，及時(shí)響應(yīng)客戶的信息了。
為了更有效管理訂閱用戶以及分組信息，我們可以從微信服務(wù)器上獲取相關(guān)的信息，供我們了解關(guān)注的用戶信息，也可以為后續(xù)的群發(fā)消息做準(zhǔn)備。
訂閱用戶的管理如下所示，默認(rèn)可以通過用戶的地區(qū)進(jìn)行查看，地區(qū)根據(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ì)信息界面如下所示。
微信公眾號，仿照企業(yè)微信的思路，增加了標(biāo)簽管理的功能，對關(guān)注的粉絲可以設(shè)置標(biāo)簽管理，實(shí)現(xiàn)更加方便的分組管理功能。開發(fā)者可以使用用戶標(biāo)簽管理的相關(guān)接口，實(shí)現(xiàn)對公眾號的標(biāo)簽進(jìn)行創(chuàng)建、查詢、修改、刪除等操作，也可以對用戶進(jìn)行打標(biāo)簽、取消標(biāo)簽等操作。
標(biāo)簽管理是替代用戶組管理的一種標(biāo)簽，可以很好管理訂閱的用戶，我們可以通過封裝好的微信接口很容易的獲取騰訊服務(wù)器上用戶標(biāo)簽列表，然后進(jìn)行管理，如下圖所示。
同時(shí)前面提到了，可以在訂閱用戶按標(biāo)簽進(jìn)行維護(hù)的，如下所示。
編輯標(biāo)簽信息界面如下所示。
多媒體管理是指把本地文件上傳到微信服務(wù)器上進(jìn)行保存，方便信息的發(fā)送等操作。微信要求，某些信息，必須是先上傳到服務(wù)器上，然后才能使用它的媒體ID進(jìn)行發(fā)送的。
文件成功上傳到服務(wù)器后，在列表里面的“文件上傳標(biāo)識(shí)，就是一串BASE64的編碼數(shù)據(jù)，同時(shí)有一個(gè)上傳的時(shí)間戳（因?yàn)槲⑿欧⻊?wù)器只保留了3天的媒體數(shù)據(jù)，超過期限的數(shù)據(jù)會(huì)被自動(dòng)刪除。
同時(shí)，在列表的上面，有兩個(gè)重要的功能：上傳選定的記錄，重新上傳過期的記錄。方便我們對自己多媒體文件的重新更新操作。
添加界面操作如下所示，其中引入了附件上傳的控件進(jìn)行文件的操作，非常方便。同時(shí)上傳成功的文件，會(huì)在列表中列出。
多媒體文件可以是下面幾種方式：圖片、語音、視頻、縮略圖。
保存后的數(shù)據(jù)記錄，文件上傳標(biāo)識(shí)和時(shí)間戳都是空的，我們?nèi)绻褂茫仨毎阉麄兩蟼鞯轿⑿诺姆⻊?wù)器上，然后根據(jù)它的MediaId進(jìn)行信息的發(fā)送，上傳選定的記錄操作界面如下所示。
多媒體文件順利上傳后，記錄的信息如下所示。
圖文消息分為單圖文消息和多圖文消息兩種，單圖文消息如下所示。
多圖文消息如下所示：
和多媒體數(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ò)誤。
為了方便記錄客戶的輸入和發(fā)送信息，我們在微信門戶管理平臺(tái)里面記錄用戶的輸入數(shù)據(jù)，具體會(huì)話消息管理界面如下所示。
我們可以雙擊最近48小時(shí)內(nèi)的任何一條記錄，可以給關(guān)注的客戶進(jìn)行消息的發(fā)送操作，如果消息發(fā)送成功，用戶在手機(jī)的微信賬號里面就能收到相關(guān)的發(fā)送消息了。
為了對客戶進(jìn)行相應(yīng)的營銷操作，有時(shí)候我們需要對指定的群主或者人員進(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)里面選擇對應(yīng)的分組即可；一種是根據(jù)用戶的OpenID進(jìn)行發(fā)送，提供給用戶輸入。主要的操作界面如下所示。
我們知道，微信最開始就是做語音聊天而使得其更加流行的，因此語音的識(shí)別處理自然也就成為微信交流的一個(gè)重要途徑，微信的開發(fā)接口，也提供了對語音的消息請求處理。這里主要介紹如何利用語音的識(shí)別，對C#開發(fā)的微信門戶應(yīng)用的整個(gè)事件鏈的處理操作，使得在我們的微信賬號里面，更加方便和多元化對用戶的輸入進(jìn)行處理。
在系統(tǒng)后臺(tái)里面，會(huì)檢查是否獲得了微信的語音識(shí)別結(jié)果，如果獲得，那么這個(gè)時(shí)候，就是和處理用戶文本輸入的操作差不多了，語音輸入的處理邏輯如下所示。
首先我根據(jù)識(shí)別結(jié)果，尋找是否用戶讀出了微信門戶的菜單名稱，如果根據(jù)語音結(jié)果找到對應(yīng)的菜單記錄，那么我們執(zhí)行菜單事件（如果是URL的View類型菜單，我們沒辦法重定向到指定的鏈接，因此給出一個(gè)鏈接文本提示，給用戶單擊進(jìn)入；如果沒有找到菜單記錄，那么我們就把語音識(shí)別結(jié)果作為一般的事件進(jìn)行處理，如果事件邏輯沒有處理，那么我們最后給出一個(gè)默認(rèn)的語音應(yīng)答提示結(jié)果就可以了。
微信門戶測試界面效果如下所示。
為了方便對客戶會(huì)話的記錄，我的微信門戶后臺(tái)，會(huì)記錄用戶的語音輸入內(nèi)容，如下所示。
我們知道，地理位置信息可以用來做很多相關(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è)是接收用戶的地理位置請求，一個(gè)是用戶允許上報(bào)地理位置操作，定時(shí)發(fā)送的地理位置信息。
地理位置的上報(bào)操作，就是在輸入的地方，選擇+號進(jìn)行添加地理位置，然后選擇當(dāng)前或者指定的地理位置地圖，具體操作如下所示。
首先對用戶地理位置的請求，我根據(jù)數(shù)據(jù)庫配置給出了一個(gè)用戶選擇的指令提示，如下所示。
為了對地理位置請求的處理，我定義了一個(gè)用于處理這個(gè)操作的指令操作
這樣整個(gè)地理位置的指令操作，就在應(yīng)答鏈里面進(jìn)行很好的跳轉(zhuǎn)管理了。幾個(gè)應(yīng)用擴(kuò)展的界面效果如下所示。
在現(xiàn)今很多網(wǎng)站里面，都使用了微信開放平臺(tái)的掃碼登錄認(rèn)證處理，這樣做相當(dāng)于把身份認(rèn)證交給較為權(quán)威的第三方進(jìn)行認(rèn)證，在應(yīng)用網(wǎng)站里面可以不需要存儲(chǔ)用戶的密碼了。
在用戶列表的二維碼連接上，單擊可以對用戶進(jìn)行微信掃碼綁定，這樣用戶可以在掃碼登錄處直接掃碼登錄，不需要輸入賬號密碼。
一旦成功綁定用戶微信，在微信端會(huì)定位到一個(gè)綁定成功的頁面（自定義的H5頁面），如下所示。
如果用戶已經(jīng)進(jìn)行了二維碼綁定，則可以在管理界面進(jìn)行取消綁定，這樣可以解綁用戶賬號和微信之間的關(guān)聯(lián)。
搖一搖周邊紅包接口是為線下商戶提供的發(fā)紅包功能。用戶可以在商家門店等線下場所通過搖一搖周邊領(lǐng)取商家發(fā)放的紅包，在線上轉(zhuǎn)發(fā)分享無效。
開發(fā)者可通過接口開發(fā)搖一搖紅包功能，特點(diǎn)包括：
用戶側(cè)交互流程
常規(guī)的搖一搖紅包的流程如下所示，這里沒有使用用戶自定義的模板，也就是使用系統(tǒng)內(nèi)置的（努力加載中。。。）的頁面，紅包需要自己拆開。
紅包組件接口調(diào)用流程
搖一搖紅包的處理過程可以先的流程說明，申請權(quán)限后，需要在搖一搖后臺(tái)配置相關(guān)的紅包處理頁面，然后通過紅包接口處理提交紅包數(shù)據(jù)，最后通過搖一搖的設(shè)備搖出界面，使用JSAPI實(shí)現(xiàn)抽取紅包的操作，具體過程如下所示。
其中紅包接口處理，是調(diào)用一系列的紅包接口實(shí)現(xiàn)的，包括紅包預(yù)下單、創(chuàng)建紅包活動(dòng)、錄入紅包信息等操作，如下所示。
其中微信支付的相關(guān)配置信息在賬號的信息里面
利用搖一搖以及微信紅包接口，使用手機(jī)搖一搖獲得紅包的過程界面效果如下所示。
對封裝好的微信接口，接口成功調(diào)用后，我們可以在公眾號的對話里面看到紅包的信息結(jié)果，如下是整個(gè)紅包發(fā)送及拆開的過程。
另外我們也對裂變紅包進(jìn)行了接口的封裝，如果我們需要發(fā)送裂變紅包的時(shí)候，直接調(diào)用裂變紅包的接口即可實(shí)現(xiàn)紅包發(fā)送的操作。
在我們開發(fā)微信頁面的時(shí)候，需要大量用到了各種呈現(xiàn)的效果，一般可以使用Boostrap的效果來設(shè)計(jì)不同的頁面，不過微信團(tuán)隊(duì)也提供很多這方面的資源，包括JSSDK的接口，以及Weui的頁面樣式和相關(guān)功能頁面，給我們提供了很大的便利。
1) JSSDK
微信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)。
目前JSSDK支持的接口分類包括下面幾類：基礎(chǔ)接口、分享接口、圖像接口、音頻接口、智能接口、設(shè)備信息、地理位置、搖一搖周邊、界面操作、微信掃一掃、微信小店、微信卡券、微信支付，隨著微信功能的全部整合，估計(jì)更多的接口會(huì)陸續(xù)開放出來。
2）WeUI和Jquery 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)勢：
該樣式庫目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已經(jīng)在 GitHub上開源。訪問 http://weui.github.io/weui/ 或微信掃碼即可預(yù)覽。
jQuery WeUI 中使用的是官方 WeUI 的 CSS 代碼，并提供了 jQuery/Zepto 版本的 API 實(shí)現(xiàn)。JQuery WeUI相對于在官方WeUI的基礎(chǔ)上做了一些功能擴(kuò)展，已豐富界面設(shè)計(jì)和相關(guān)功能，因此我們可以考慮直接基于JQuery 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é)，上面提到了利用JSSDK和WeUI來對微信應(yīng)用的H5頁面進(jìn)行開發(fā)，因此下面的相關(guān)效果也就是利用這些技術(shù)進(jìn)行處理的。
字典數(shù)據(jù)的綁定：
和常規(guī)網(wǎng)頁功能一樣，我們在設(shè)計(jì)微信頁面應(yīng)用的時(shí)候，很多數(shù)據(jù)也是來源字典數(shù)據(jù)的，而且需要把它們動(dòng)態(tài)綁定在頁面上，微信頁面的JQuery WeUI提供了一些列表字典數(shù)據(jù)的展示效果如下所示。我們在微信框架里面也使用了這些頁面組件，實(shí)現(xiàn)字典的綁定處理，如下所示。
同時(shí)，我們則可以在微信后臺(tái)對數(shù)據(jù)字典進(jìn)行維護(hù)即可進(jìn)行實(shí)時(shí)的數(shù)據(jù)更新。
本節(jié)介紹的是設(shè)備維修案例的微信應(yīng)用場景，該需求主要圍繞固定資產(chǎn)（如醫(yī)療設(shè)備）的微信應(yīng)用展開，包括錄入及查詢資產(chǎn)信息、資產(chǎn)盤點(diǎn)、設(shè)備的維修保養(yǎng)、日常巡檢、維修、計(jì)量檢測等事務(wù)。
整個(gè)案例微信端應(yīng)用采用的是H5頁面以及微信的JSDK進(jìn)行相關(guān)的接口開發(fā)，符合微信的界面風(fēng)格。后端管理就是本后臺(tái)管理系統(tǒng)。
在系統(tǒng)中，根據(jù)系統(tǒng)應(yīng)用，建立了相關(guān)的組織機(jī)構(gòu)，以及對應(yīng)的用戶分類（即用戶角色），根據(jù)不同的角色可以授權(quán)不同的功能管理界面。
組織機(jī)構(gòu)如下所示。
用戶角色如下所示：
系統(tǒng)根據(jù)角色對菜單進(jìn)行不同的顯示設(shè)置。
以超級管理員（賬號admin，密碼為空）登陸系統(tǒng)，可以對整體微信功能進(jìn)行設(shè)置管理。
以普通管理員（賬號gl，密碼為12345678）登錄系統(tǒng)，可以對相關(guān)的設(shè)備信息進(jìn)行維護(hù)管理，如下所示。
在微信端，我們需要根據(jù)我們的應(yīng)用，設(shè)置一些功能菜單，我們可以通過后臺(tái)進(jìn)行菜單的設(shè)置，然后通過接口提交到微信服務(wù)器即可。
這樣我們提交菜單后，在公眾號上就可以對相關(guān)的功能進(jìn)行操作了。
在我們應(yīng)用系統(tǒng)中，一般都為每個(gè)設(shè)備指定一個(gè)設(shè)備編碼，我們通過生成二維碼后，可以通過微信掃碼進(jìn)行設(shè)備信息的添加或者完善，以及相關(guān)的操作。 設(shè)備二維碼采用連接+設(shè)備編碼的方式生成，如下所示：
設(shè)備二維碼的生成測試頁面地址是：/h5/Test，測試生成二維碼的界面效果如下所示。
有了這些帶有鏈接地址的二維碼，當(dāng)用戶使用微信掃碼操作的時(shí)候，會(huì)指定調(diào)整到對應(yīng)的連接，實(shí)現(xiàn)相應(yīng)的設(shè)備添加、維修保養(yǎng)、日常巡檢、維修、計(jì)量檢測等事務(wù)。
在微信端使用對應(yīng)的功能菜單掃碼（如使用【設(shè)備管理】=>【設(shè)備信息錄入】掃碼上面的設(shè)備二維碼），那么就可以進(jìn)行設(shè)備信息的添加操作了。
如果是設(shè)備信息查看，那么在微信端列出主要的設(shè)備信息；
也可以單擊進(jìn)入查看詳細(xì)設(shè)備明細(xì)信息。
設(shè)備盤點(diǎn)和設(shè)備計(jì)量如下所示：
預(yù)防性維護(hù)和設(shè)備計(jì)量界面如下所示。
設(shè)備相關(guān)信息可以在微信后臺(tái)進(jìn)行詳細(xì)查看，如下界面是所有設(shè)備的信息列表，可以進(jìn)行相關(guān)的查詢、修改、刪除、查看明細(xì)等操作。
設(shè)備詳細(xì)信息查看，在后臺(tái)管理界面效果如下所示。
以及設(shè)備相關(guān)的維修信息：
以上所有在后臺(tái)管理的功能，都是通過對微信API的封裝管理實(shí)現(xiàn)的，我們在開發(fā)頂層的應(yīng)用前，已經(jīng)把所有的微信提供的接口進(jìn)行了有效的封裝。微信的相關(guān)接口的管理。
公眾號接口的分類圖如下所示。
企業(yè)微信接口的分類圖如下所示：
在各種程序模塊里面，我們所有處理的數(shù)據(jù)，基本上都是通過自定義實(shí)體類的方式進(jìn)行傳遞（注意：實(shí)體類是我根據(jù)程序開發(fā)需要自己定義的，非微信本身的實(shí)體類），這樣非常方便我們處理操作，否則每次需要解析不同的消息內(nèi)容，很容易出現(xiàn)問題，這樣強(qiáng)類型的數(shù)據(jù)類型，提高了我們開發(fā)微信應(yīng)用的強(qiáng)壯型和高效性。這些實(shí)體類的對象有一定的繼承關(guān)系的，他們的繼承關(guān)系如下所示。
微信的回復(fù)消息處理，它也是繼承自BaseMessage實(shí)體類的（同樣，下圖的實(shí)體類及其繼承關(guān)系也是自定義的，方便程序開發(fā)），它的關(guān)系如下所示
我們在開發(fā)微信相關(guān)的應(yīng)用的時(shí)候，一般需要完善的基礎(chǔ)模塊支持，包括微信公眾號，微信企業(yè)微信，微信小程序等，以及一些業(yè)務(wù)模塊的支持，一般隨著功能的增多，我們需要非常清晰的界定他們的關(guān)系。模塊的分拆以及合并往往需要考慮的代碼的重用，而且盡量做到簡單而不重復(fù)。
1）公眾號模塊封裝
微信開發(fā)，我們首先需要利用我們的語言（這里是利用C#語言），為所有用到的API接口實(shí)現(xiàn)進(jìn)一步的封裝，方便使用，微信API模塊包含的內(nèi)容很多，大概可以分為下面的項(xiàng)目。
有了這些接口功能的封裝類，只是萬里長征的第一步，我們還需要圍繞這些接口，以及我們的業(yè)務(wù)模塊實(shí)現(xiàn)更多交互功能的。
我們在WHC.Weixin.Data模塊里面，定義了包含公眾號的消息分派處理接口，這個(gè)分派接口是對接收來自微信服務(wù)器的各種消息事件進(jìn)行響應(yīng)；另外該模塊還包含一些常規(guī)的數(shù)據(jù)存儲(chǔ)，如關(guān)注用戶、菜單、文章內(nèi)容等方面數(shù)據(jù)的存儲(chǔ)，如下所示。
當(dāng)然，這個(gè)WHC.Weixin.Data是集大成者，它需要使用WHC.Weixin.API的項(xiàng)目內(nèi)容來做數(shù)據(jù)提交，同時(shí)也是需要使用內(nèi)部的數(shù)據(jù)存儲(chǔ)處理模塊。
2）企業(yè)微信模塊封裝
企業(yè)微信的做法和公眾號類似，也是需要對微信提供的各種API進(jìn)行封裝，方便我們后面的接口調(diào)用，不過企業(yè)微信目前支持的功能相對公眾號少一些，大概包括有基礎(chǔ)接口、企業(yè)微信應(yīng)用接口、菜單管理、通訊錄管理、消息管理、搖一搖周邊等模塊。隨著企業(yè)微信功能的逐步完善和加入，可能騰訊會(huì)加入更多的一些功能模塊。
同樣我們參考微信公眾號的做法，也是建立一個(gè)數(shù)據(jù)存儲(chǔ)管理的項(xiàng)目，作為微信消息事件的處理入口，同時(shí)也管理存儲(chǔ)一些必須的數(shù)據(jù)，包括需要同步的用戶、標(biāo)簽、部門等數(shù)據(jù)。
隨著微信公眾號和企業(yè)微信的功能逐漸統(tǒng)一，很多接口的交互數(shù)據(jù)幾乎是一樣的，因此我們可以把公用的實(shí)體類部分作為一個(gè)獨(dú)立的項(xiàng)目，方便公眾號和企業(yè)微信兩個(gè)項(xiàng)目的共同使用，這個(gè)項(xiàng)目命名為WHC.Common.Entity。
它們幾個(gè)項(xiàng)目關(guān)系如下所示。
項(xiàng)目目錄如下所示，包括了基礎(chǔ)模塊、搖一搖紅包、菜單及多媒體管理模塊、消息請求模塊、消息應(yīng)答模塊、搖一搖周邊、微信支付等。
由于微信支付的接口實(shí)現(xiàn)，是在企業(yè)微信和公眾號相對比較獨(dú)立的一個(gè)API接口群，因此我們可以微信支付部分獨(dú)立作為一個(gè)接口實(shí)現(xiàn)來處理，公眾號或者企業(yè)微信需要的時(shí)候，包含進(jìn)去使用即可。
我們把它命名為WHC.Common.API項(xiàng)目。
整個(gè)插件業(yè)務(wù)接口包括：百度的地理位置解析接口、電影院信息查詢、天氣信息查詢、交通信息查詢、旅游信息查詢等，還有短信、郵件發(fā)送等常規(guī)接口，都可以使用這種方式進(jìn)行處理。接口的效果展示如下所示。
因此上面這些以WHC.Common命名的項(xiàng)目，基本上就是可以通用在公眾號和企業(yè)微信兩邊的項(xiàng)目模塊了，它們包含前面介紹過的幾個(gè)模塊，如下所示。
當(dāng)然，除了這些之外，我們做項(xiàng)目，一般還涉及到一些基礎(chǔ)功能模塊，如公用類庫，以及附件管理、通訊錄管理、權(quán)限管理模塊等內(nèi)容，我們可以把后者幾個(gè)模塊放在一起，組成基礎(chǔ)模塊。
3）微信界面項(xiàng)目
微信界面部分是前面模塊組件的綜合使用，在微信應(yīng)用里面，一般需要使用80端口和微信服務(wù)器做交互，而這個(gè)同時(shí)往往也是我們項(xiàng)目的端口地址。
