微信應(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ā)送等方面接口。

1、系統(tǒng)的重要特性總結(jié)

微信門戶應(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)。

    ……

2、系統(tǒng)功能介紹

2.1)系統(tǒng)登錄

 

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

系統(tǒng)登錄后,通過水平菜單進(jìn)行后臺(tái)功能管理。

2.2)微信賬號管理

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

 

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

2.3)菜單管理

 在系統(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)了與用戶的交互操作,下面是它的消息流程圖。

 

2.4)菜單事件的處理

對于動(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)容。

 

2.5)微信消息內(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)鏈接地址的。

 

2.6)應(yīng)答指令的維護(hù)

應(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í)候,我們也還可以輸入*號按鍵,返回上一級菜單的。

 

2.7)客服管理功能

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

 

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

 

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

手機(jī)上的談話截圖如下所示。

這樣就能夠通過多途徑,及時(shí)響應(yīng)客戶的信息了。

2.8)訂閱用戶管理

為了更有效管理訂閱用戶以及分組信息,我們可以從微信服務(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ì)信息界面如下所示。

 

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

微信公眾號,仿照企業(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)簽信息界面如下所示。

 

2.10)多媒體管理

多媒體管理是指把本地文件上傳到微信服務(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ā)送,上傳選定的記錄操作界面如下所示。

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

 

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ā)送信息,我們在微信門戶管理平臺(tái)里面記錄用戶的輸入數(shù)據(jù),具體會(huì)話消息管理界面如下所示。

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

 

2.13)群發(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ā)送,提供給用戶輸入。主要的操作界面如下所示。

2.14)使用語音處理

我們知道,微信最開始就是做語音聊天而使得其更加流行的,因此語音的識(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)容,如下所示。

 

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è)是接收用戶的地理位置請求,一個(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ò)展的界面效果如下所示。

   

 

 

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ǔ)用戶的密碼了。

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

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

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

 

2.17)微信搖一搖紅包功能

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

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

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

用戶側(cè)交互流程

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

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

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

搖一搖紅包的處理過程可以先的流程說明,申請權(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ā)送的操作。

 

2.18)微信H5頁面及JSDK開發(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ù)更新。

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

本節(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)。

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

在系統(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ù)管理,如下所示。

 

3.2 微信菜單

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

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

 

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

在我們應(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ì)信息。

3.4設(shè)備其他管理

設(shè)備盤點(diǎn)和設(shè)備計(jì)量如下所示: 

 

預(yù)防性維護(hù)和設(shè)備計(jì)量界面如下所示。

 

3.5 設(shè)備管理

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

設(shè)備詳細(xì)信息查看,在后臺(tái)管理界面效果如下所示。

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

 

4、微信接口封裝介紹

4.1)微信API封裝管理

以上所有在后臺(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)系如下所示

 

 4.2)微信框架項(xiàng)目模塊

我們在開發(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)目的端口地址。