微信應用如火如荼,很多公司都希望搭上信息快車(chē),這個(gè)是一個(gè)非常重要的商機。用微信進(jìn)行營(yíng)銷(xiāo),一方面可以提高企業(yè)產(chǎn)品的宣傳效果,另一方面,也能提高我們企業(yè)的競爭力,縮短和直接客戶(hù)之間的距離。該微信門(mén)戶(hù)應用開(kāi)發(fā)框架,就是為了協(xié)助企業(yè)快速搭建微信應用以及管理的平臺,使我們快速融入微信的市場(chǎng)化浪潮中,在市場(chǎng)激烈的競爭中占據有利條件,獲得更多的市場(chǎng)回報。

微信開(kāi)發(fā)包括公眾號、企業(yè)微信、微信小程序等方面的開(kāi)發(fā)內容,需要對騰信的微信API接口進(jìn)行封裝:包括事件、菜單、訂閱用戶(hù)、多媒體文件、圖文消息、消息群發(fā)、微信支付和企業(yè)紅包、搖一搖設備、語(yǔ)義理解、微信小店、微信卡劵等相關(guān)接口處理,另外還包括掃一掃、圖庫和照片管理、地理位置、H5頁(yè)面開(kāi)發(fā)等內容,以及企業(yè)微信通訊錄接口、成員消息相互發(fā)送等方面接口。

1、系統的重要特性總結

微信門(mén)戶(hù)應用管理系統,采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術(shù)路線(xiàn),界面層采用Boostrap + Metronic組合的前端框架,數據訪(fǎng)問(wèn)層支持Oracle、SQLServer、MySQL、PostgreSQL等數據庫。在微信門(mén)戶(hù)系統里面,實(shí)現下面這些功能操作:

    1)實(shí)現菜單的動(dòng)態(tài)配置及更新到服務(wù)器上;

    2)動(dòng)態(tài)定義事件和響應消息,實(shí)現對不同行業(yè),不同需求的菜單動(dòng)作響應;

    3)動(dòng)態(tài)的應答指令配置處理,實(shí)現整套應答鏈的消息處理;

    4)獲取訂閱用戶(hù)和用戶(hù)分組信息,并可以實(shí)現用戶(hù)分組信息的維護等操作;

    5)管理并更新多媒體文件、圖文消息等內容,方便為客戶(hù)推送消息做準備。

    6)使用向選定訂閱用戶(hù)或者分組進(jìn)行消息的群發(fā)功能。

    7)提供對用戶(hù)語(yǔ)音的識別,并將識別結果和事件處理進(jìn)行對接,實(shí)現語(yǔ)音內容的處理。

    8)提供對地理位置的記錄和擴展應用,實(shí)現對百度天氣、熱映影片、影院、旅游、交通消息等方面的第三方應用的對接。

    9)記錄用戶(hù)輸入的會(huì )話(huà)記錄,并可以根據會(huì )話(huà)記錄向客戶(hù)進(jìn)行消息的發(fā)送。

    10)集成微信掃一掃的功能,實(shí)現條碼和二維碼掃碼的功能整合,可以在后臺整合自身應處理;。

    11)集成微信其他最新功能,包括拍照和圖庫選擇、快速發(fā)送地理位置等功能;

    12)集成獲取關(guān)注成員的唯一ID,更新用戶(hù)備注,獲取客服聊天記錄等功能。

    13)集成微信支付和企業(yè)紅包、搖一搖設備、語(yǔ)義理解、微信小店、微信卡劵等相關(guān)接口處理。

    14)實(shí)現企業(yè)通訊錄的管理,包括部門(mén)管理、成員管理、標簽管理,使得我們可以更方便同步企業(yè)微信信息;

    15)實(shí)現企業(yè)微信無(wú)限制的消息發(fā)送,可以使企業(yè)和關(guān)注成員之間溝通更順暢;

    16)集成企業(yè)微信文本消息、圖片消息、文件消息、語(yǔ)音消息、視頻消息、圖文消息等內容的發(fā)送整合,統一處理接口;

    17)實(shí)現企業(yè)微信菜單的動(dòng)態(tài)配置及更新到服務(wù)器上,動(dòng)態(tài)定義菜單事件和響應消息,實(shí)現不同的菜單動(dòng)作響應;

    18)管理并更新企業(yè)微信的多媒體文件,方便同步到自己文件服務(wù)器進(jìn)行存儲和處理;

    19)使用重定向功能獲訂閱用戶(hù)信息,實(shí)現企業(yè)成員身份的認證和處理。

    20)平臺和微信開(kāi)放平臺整合掃描二維碼登錄,通過(guò)掃碼綁定并直接登陸系統。

    ……

2、系統功能介紹

2.1)系統登錄

 

在系統登錄界面輸入賬號和密碼后(默認賬號admin,密碼為空),即可以超級管理員身份進(jìn)入管理系統的主界面。

系統登錄后,通過(guò)水平菜單進(jìn)行后臺功能管理。

2.2)微信賬號管理

 系統支持多微信賬號的接入管理和使用,同時(shí)支持訂閱號、公眾號、企業(yè)微信、小程序的賬號配置。

 

可以在系統右上角進(jìn)行賬號的切換管理。

2.3)菜單管理

 在系統中管理菜單,并通過(guò)把菜單提交到服務(wù)器上,實(shí)現菜單的動(dòng)態(tài)配置和生成,能夠為我們系統適應各種的需要,實(shí)現靈活的處理。

微信菜單的添加界面如下所示。

 微信菜單的修改界面如下所示

 微信菜單定義是存儲在數據庫里面,如果需要提交到微信服務(wù)器上并生效,則需要調用微信API接口進(jìn)行處理,我在頁(yè)面的Controller控制器里增加一個(gè)提交到服務(wù)器的處理方法。

在微信服務(wù)賬號的門(mén)戶(hù)上,菜單的表現效果如下所示。

我們知道,微信的服務(wù)器架起了客戶(hù)手機和開(kāi)發(fā)者服務(wù)器的一個(gè)橋梁。當我們在微信服務(wù)器上的公眾賬號創(chuàng )建了相應的菜單,通過(guò)消息的傳遞和響應,就能實(shí)現了與用戶(hù)的交互操作,下面是它的消息流程圖。

 

2.4)菜單事件的處理

對于動(dòng)態(tài)生成的菜單,大多數情況下是用作Click的方式,也就是需要定義每個(gè)菜單的事件響應操作,我們使用微信的話(huà),可以了解到,微信的處理事件,一般可以響應用戶(hù)文本消息、圖片消息、圖文消息等內容,常規下,一般使用文本消息或者圖文消息居多。

為了進(jìn)一步實(shí)現響應內容的重用,我們把菜單的事件定義和內容定義進(jìn)行分開(kāi)管理,事件定義可以使用多個(gè)文本消息,也可以使用多個(gè)圖文消息進(jìn)行組合,這樣可以實(shí)現更加靈活的使用環(huán)境。

添加事件定義如下所示

事件的響應內容編碼,可以選擇輸入或者從“編輯”按鈕中選擇,當選擇“編輯”按鈕進(jìn)行選擇的時(shí)候,系統彈出一個(gè)對話(huà)框供用戶(hù)對事件的響應內容編碼選擇。

完成選擇后,回到原來(lái)的新增界面,將會(huì )看到返回的記錄就是我們選擇的記錄。

微信事件的編輯界面如下所示,類(lèi)似新增界面的內容。

 

2.5)微信消息內容管理

上面說(shuō)到,菜單的事件通過(guò)關(guān)聯(lián)事件編碼進(jìn)行處理,而事件本身可以組合多個(gè)消息內容,因此消息內容是響應客戶(hù)操作的最小單元,它們可以是一條文本消息、圖文消息,也可以是多條消息的組合(同類(lèi)型的話(huà))。

為了方便管理,我把消息分為了圖文、指令、文本類(lèi)型,如果需要,還可以根據需要把它細化為其他類(lèi)型的消息。

消息內容的添加界面如下所示。

文本消息的手機上界面效果如下所示。

這里不管是文本消息還是圖文消息,我們統一以圖文消息的定義來(lái)定義消息,如果是文本消息,我們只需要獲取描述內容作為消息的主體即可。

圖文消息的編輯界面如下所示,主要就是填寫(xiě)完整的內容和圖片,以及頁(yè)面詳細的鏈接即可。

上面的這個(gè)客戶(hù)關(guān)系管理系統的消息,在手機上顯示的界面效果如下所示,單擊鏈接,可以切換到消息跳轉鏈接地址的。

 

2.6)應答指令的維護

應答指令的維護,有點(diǎn)類(lèi)似于事件的管理,主要就是定義一些用到的指令,方便構建應答系統的響應鏈,從而實(shí)現一步步的操作指令。

在后臺設置好應答指令后,系統就能根據應答指令鏈進(jìn)行處理了。首先我們需要提供一個(gè)進(jìn)入應答鏈的提示界面,如下所示。

但我們在菜單選擇應答系統后,系統返回一個(gè)文本提示界面,如下所示。

這個(gè)界面里面提示了一些按鍵,包括幾個(gè)固定的按鍵和一些業(yè)務(wù)按鍵,輸入簡(jiǎn)單的1~6可以對選擇進(jìn)行響應。

我們看到上面的界面,輸入指令1后,系統進(jìn)入下一層的應答指令,然后又列出幾個(gè)可供輸入的按鍵和內容提示。

當我們繼續輸入業(yè)務(wù)按鍵1后,響應的是一個(gè)圖文消息,也是關(guān)于按鍵的詳細說(shuō)明。

這個(gè)時(shí)候,我們也還可以輸入*號按鍵,返回上一級菜單的。

 

2.7)客服管理功能

輸入0則轉入了客服對話(huà)模式,后續您發(fā)的任何消息,將會(huì )轉發(fā)到多客服系統里面了。

 

當用戶(hù)發(fā)送消息后,客服助手就能及時(shí)收到消息并處理和客戶(hù)的應答了。

 

通過(guò)使用多客服的客戶(hù)端,這樣處理消息交互起來(lái)非常方便,能獲得客戶(hù)的對話(huà)信息了,在電腦客戶(hù)端上,看到的界面如下所示。

手機上的談話(huà)截圖如下所示。

這樣就能夠通過(guò)多途徑,及時(shí)響應客戶(hù)的信息了。

2.8)訂閱用戶(hù)管理

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

訂閱用戶(hù)的管理如下所示,默認可以通過(guò)用戶(hù)的地區進(jìn)行查看,地區根據:國家-省份-城市這樣的級別進(jìn)行展開(kāi)。

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

以及可以根據分組查看,如下所示。

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

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

 

2.9)用戶(hù)標簽管理

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

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

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

編輯標簽信息界面如下所示。

 

2.10)多媒體管理

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

文件成功上傳到服務(wù)器后,在列表里面的“文件上傳標識,就是一串BASE64的編碼數據,同時(shí)有一個(gè)上傳的時(shí)間戳(因為微信服務(wù)器只保留了3天的媒體數據,超過(guò)期限的數據會(huì )被自動(dòng)刪除。

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

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

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

保存后的數據記錄,文件上傳標識和時(shí)間戳都是空的,我們如果要使用,必須把他們上傳到微信的服務(wù)器上,然后根據它的MediaId進(jìn)行信息的發(fā)送,上傳選定的記錄操作界面如下所示。

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

 

2.11)圖文消息處理

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

多圖文消息如下所示:

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

添加圖文消息界面如下所示,保存后,可以在編輯界面中的“其他圖文列表”里面,繼續添加多圖文的消息內容。

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

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

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

 

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

為了方便記錄客戶(hù)的輸入和發(fā)送信息,我們在微信門(mén)戶(hù)管理平臺里面記錄用戶(hù)的輸入數據,具體會(huì )話(huà)消息管理界面如下所示。

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

 

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

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

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

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

添加圖文消息,可以選擇文本消息、圖文消息、圖片消息等內容,根據不同的內容,界面提供不同的選擇操作。

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

2.14)使用語(yǔ)音處理

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

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

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

微信門(mén)戶(hù)測試界面效果如下所示。

   

 為了方便對客戶(hù)會(huì )話(huà)的記錄,我的微信門(mén)戶(hù)后臺,會(huì )記錄用戶(hù)的語(yǔ)音輸入內容,如下所示。

 

2.15)使用地理位置擴展相關(guān)應用

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

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

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

                 

首先對用戶(hù)地理位置的請求,我根據數據庫配置給出了一個(gè)用戶(hù)選擇的指令提示,如下所示。

為了對地理位置請求的處理,我定義了一個(gè)用于處理這個(gè)操作的指令操作

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

   

 

 

2.16)微信掃碼登錄

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

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

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

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

 

2.17)微信搖一搖紅包功能

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

開(kāi)發(fā)者可通過(guò)接口開(kāi)發(fā)搖一搖紅包功能,特點(diǎn)包括:

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

用戶(hù)側交互流程

常規的搖一搖紅包的流程如下所示,這里沒(méi)有使用用戶(hù)自定義的模板,也就是使用系統內置的(努力加載中。。。)的頁(yè)面,紅包需要自己拆開(kāi)。

紅包組件接口調用流程

  1. 申請紅包接口權限:登錄搖一搖周邊商戶(hù)后臺https://zb.weixin.qq.com ,進(jìn)入開(kāi)發(fā)者支持,申請開(kāi)通搖一搖紅包組件接口;
  2. 紅包預下單:調用微信支付的api進(jìn)行紅包預下單,告知需要發(fā)放的紅包金額,人數,生成紅包ticket;
  3. 創(chuàng )建活動(dòng)并錄入紅包信息:調用搖周邊平臺的api錄入創(chuàng )建紅包活動(dòng)并錄入信息,傳入預下單時(shí)生成的紅包ticket;
  4. 調用jsapi抽紅包:在搖出的頁(yè)面中通過(guò)調用jsapi抽紅包,抽中紅包的用戶(hù)可以拆紅包;
  5. 調用以上接口時(shí),紅包提供商戶(hù)和紅包發(fā)放商戶(hù)公眾號要求一致。

搖一搖紅包的處理過(guò)程可以先的流程說(shuō)明,申請權限后,需要在搖一搖后臺配置相關(guān)的紅包處理頁(yè)面,然后通過(guò)紅包接口處理提交紅包數據,最后通過(guò)搖一搖的設備搖出界面,使用JSAPI實(shí)現抽取紅包的操作,具體過(guò)程如下所示。

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

 

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

 

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

對封裝好的微信接口,接口成功調用后,我們可以在公眾號的對話(huà)里面看到紅包的信息結果,如下是整個(gè)紅包發(fā)送及拆開(kāi)的過(guò)程。

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

 

2.18)微信H5頁(yè)面及JSDK開(kāi)發(fā)

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

1) JSSDK

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

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

2)WeUI和Jquery WeUI

WeUI 是一套同微信原生視覺(jué)體驗一致的基礎樣式庫,由微信官方設計團隊為微信內網(wǎng)頁(yè)開(kāi)發(fā)量身設計,可以令用戶(hù)的使用感知更加統一。在微信網(wǎng)頁(yè)開(kāi)發(fā)中使用 WeUI,有如下優(yōu)勢:

該樣式庫目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素,已經(jīng)在 GitHub上開(kāi)源。訪(fǎng)問(wèn) http://weui.github.io/weui/ 或微信掃碼即可預覽。

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

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

如微信支付頁(yè)面如下所示:

     

以及簽到頁(yè)面效果如下所示。

 

當然我們可以根據業(yè)務(wù)需要,增加很多這樣和微信色調樣式一致的頁(yè)面,這個(gè)就是利用WeUI樣式帶來(lái)的界面體驗一致性的好處。

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

 

字典數據的綁定:

和常規網(wǎng)頁(yè)功能一樣,我們在設計微信頁(yè)面應用的時(shí)候,很多數據也是來(lái)源字典數據的,而且需要把它們動(dòng)態(tài)綁定在頁(yè)面上,微信頁(yè)面的JQuery WeUI提供了一些列表字典數據的展示效果如下所示。我們在微信框架里面也使用了這些頁(yè)面組件,實(shí)現字典的綁定處理,如下所示。

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

3、設備維修案例功能介紹 

本節介紹的是設備維修案例的微信應用場(chǎng)景,該需求主要圍繞固定資產(chǎn)(如醫療設備)的微信應用展開(kāi),包括錄入及查詢(xún)資產(chǎn)信息、資產(chǎn)盤(pán)點(diǎn)、設備的維修保養、日常巡檢、維修、計量檢測等事務(wù)。

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

3.1 組織機構及用戶(hù)分類(lèi)(角色)

在系統中,根據系統應用,建立了相關(guān)的組織機構,以及對應的用戶(hù)分類(lèi)(即用戶(hù)角色),根據不同的角色可以授權不同的功能管理界面。

組織機構如下所示。

用戶(hù)角色如下所示:

系統根據角色對菜單進(jìn)行不同的顯示設置。

超級管理員(賬號admin,密碼為空)登陸系統,可以對整體微信功能進(jìn)行設置管理。

普通管理員(賬號gl,密碼為12345678)登錄系統,可以對相關(guān)的設備信息進(jìn)行維護管理,如下所示。

 

3.2 微信菜單

 在微信端,我們需要根據我們的應用,設置一些功能菜單,我們可以通過(guò)后臺進(jìn)行菜單的設置,然后通過(guò)接口提交到微信服務(wù)器即可。

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

 

3.3 設備添加及查看

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

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

有了這些帶有鏈接地址的二維碼,當用戶(hù)使用微信掃碼操作的時(shí)候,會(huì )指定調整到對應的連接,實(shí)現相應的設備添加、維修保養、日常巡檢、維修、計量檢測等事務(wù)。

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

 

如果是設備信息查看,那么在微信端列出主要的設備信息;

也可以單擊進(jìn)入查看詳細設備明細信息。

3.4設備其他管理

設備盤(pán)點(diǎn)和設備計量如下所示: 

 

預防性維護和設備計量界面如下所示。

 

3.5 設備管理

 設備相關(guān)信息可以在微信后臺進(jìn)行詳細查看,如下界面是所有設備的信息列表,可以進(jìn)行相關(guān)的查詢(xún)、修改、刪除、查看明細等操作。

設備詳細信息查看,在后臺管理界面效果如下所示。

以及設備相關(guān)的維修信息:

 

4、微信接口封裝介紹

4.1)微信API封裝管理

以上所有在后臺管理的功能,都是通過(guò)對微信API的封裝管理實(shí)現的,我們在開(kāi)發(fā)頂層的應用前,已經(jīng)把所有的微信提供的接口進(jìn)行了有效的封裝。微信的相關(guān)接口的管理。

公眾號接口的分類(lèi)圖如下所示。

企業(yè)微信接口的分類(lèi)圖如下所示:

在各種程序模塊里面,我們所有處理的數據,基本上都是通過(guò)自定義實(shí)體類(lèi)的方式進(jìn)行傳遞(注意:實(shí)體類(lèi)是我根據程序開(kāi)發(fā)需要自己定義的,非微信本身的實(shí)體類(lèi)),這樣非常方便我們處理操作,否則每次需要解析不同的消息內容,很容易出現問(wèn)題,這樣強類(lèi)型的數據類(lèi)型,提高了我們開(kāi)發(fā)微信應用的強壯型和高效性。這些實(shí)體類(lèi)的對象有一定的繼承關(guān)系的,他們的繼承關(guān)系如下所示。

 

微信的回復消息處理,它也是繼承自BaseMessage實(shí)體類(lèi)的(同樣,下圖的實(shí)體類(lèi)及其繼承關(guān)系也是自定義的,方便程序開(kāi)發(fā)),它的關(guān)系如下所示

 

 4.2)微信框架項目模塊

我們在開(kāi)發(fā)微信相關(guān)的應用的時(shí)候,一般需要完善的基礎模塊支持,包括微信公眾號,微信企業(yè)微信,微信小程序等,以及一些業(yè)務(wù)模塊的支持,一般隨著(zhù)功能的增多,我們需要非常清晰的界定他們的關(guān)系。模塊的分拆以及合并往往需要考慮的代碼的重用,而且盡量做到簡(jiǎn)單而不重復。

1)公眾號模塊封裝

微信開(kāi)發(fā),我們首先需要利用我們的語(yǔ)言(這里是利用C#語(yǔ)言),為所有用到的API接口實(shí)現進(jìn)一步的封裝,方便使用,微信API模塊包含的內容很多,大概可以分為下面的項目。

有了這些接口功能的封裝類(lèi),只是萬(wàn)里長(cháng)征的第一步,我們還需要圍繞這些接口,以及我們的業(yè)務(wù)模塊實(shí)現更多交互功能的。

我們在WHC.Weixin.Data模塊里面,定義了包含公眾號的消息分派處理接口,這個(gè)分派接口是對接收來(lái)自微信服務(wù)器的各種消息事件進(jìn)行響應;另外該模塊還包含一些常規的數據存儲,如關(guān)注用戶(hù)、菜單、文章內容等方面數據的存儲,如下所示。

當然,這個(gè)WHC.Weixin.Data是集大成者,它需要使用WHC.Weixin.API的項目?jì)热輥?lái)做數據提交,同時(shí)也是需要使用內部的數據存儲處理模塊。

 

2)企業(yè)微信模塊封裝

企業(yè)微信的做法和公眾號類(lèi)似,也是需要對微信提供的各種API進(jìn)行封裝,方便我們后面的接口調用,不過(guò)企業(yè)微信目前支持的功能相對公眾號少一些,大概包括有基礎接口、企業(yè)微信應用接口、菜單管理、通訊錄管理、消息管理、搖一搖周邊等模塊。隨著(zhù)企業(yè)微信功能的逐步完善和加入,可能騰訊會(huì )加入更多的一些功能模塊。

 

同樣我們參考微信公眾號的做法,也是建立一個(gè)數據存儲管理的項目,作為微信消息事件的處理入口,同時(shí)也管理存儲一些必須的數據,包括需要同步的用戶(hù)、標簽、部門(mén)等數據。

隨著(zhù)微信公眾號和企業(yè)微信的功能逐漸統一,很多接口的交互數據幾乎是一樣的,因此我們可以把公用的實(shí)體類(lèi)部分作為一個(gè)獨立的項目,方便公眾號和企業(yè)微信兩個(gè)項目的共同使用,這個(gè)項目命名為WHC.Common.Entity。

它們幾個(gè)項目關(guān)系如下所示。

項目目錄如下所示,包括了基礎模塊、搖一搖紅包、菜單及多媒體管理模塊、消息請求模塊、消息應答模塊、搖一搖周邊、微信支付等。

由于微信支付的接口實(shí)現,是在企業(yè)微信和公眾號相對比較獨立的一個(gè)API接口群,因此我們可以微信支付部分獨立作為一個(gè)接口實(shí)現來(lái)處理,公眾號或者企業(yè)微信需要的時(shí)候,包含進(jìn)去使用即可。

我們把它命名為WHC.Common.API項目。

整個(gè)插件業(yè)務(wù)接口包括:百度的地理位置解析接口、電影院信息查詢(xún)、天氣信息查詢(xún)、交通信息查詢(xún)、旅游信息查詢(xún)等,還有短信、郵件發(fā)送等常規接口,都可以使用這種方式進(jìn)行處理。接口的效果展示如下所示。

因此上面這些以WHC.Common命名的項目,基本上就是可以通用在公眾號和企業(yè)微信兩邊的項目模塊了,它們包含前面介紹過(guò)的幾個(gè)模塊,如下所示。

當然,除了這些之外,我們做項目,一般還涉及到一些基礎功能模塊,如公用類(lèi)庫,以及附件管理、通訊錄管理、權限管理模塊等內容,我們可以把后者幾個(gè)模塊放在一起,組成基礎模塊。

 

3)微信界面項目

微信界面部分是前面模塊組件的綜合使用,在微信應用里面,一般需要使用80端口和微信服務(wù)器做交互,而這個(gè)同時(shí)往往也是我們項目的端口地址。