微信門戶開發框架-使用指導說明書(2)--基於框架的開發過程

在上篇隨筆《微信門戶開發框架-使用指導說明書》中主要介紹了微信公衆號和企業微信的模塊說明以及各個模塊之間的關係、帳號配置以及如何和微信開發框架結合起來使用的內容，因爲篇幅侷限，所以本篇隨筆繼續這個方面拓展介紹，介紹基於微信框架的開發過程，包括微信帳號菜單的管理，H5頁面的開發知識，以及如何整合框架實現公衆號應用和企業微信應用的快速開發過程。

微信公衆號和企業微信，主要就是利用微信後臺管理系統的入口，建立對應應用H5頁面。本章節主要介紹基於微信框架的基礎上，開發對應的H5頁面過程，從而實現微信公衆號或者企業應用的菜單對接或者事件對接處理。

一、微信開發者工具

微信公衆號或者企業微信開發，通常須要進行相關的網頁頁面調試，請下載微信提供的《微信開發者工具》，下載地址爲：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。

軟件啓動後便可掃碼進入，例如咱們對其中一個頁面進行調試，界面以下所示。

通常狀況下，咱們的H5頁面須要進行重定向獲取用戶的信息，所以也須要在公衆號後臺容許該工具重定向獲取對應的用戶信息，所以須要在後臺綁定帳號。

 

 而後在下面界面中綁定開發者帳號便可。

 

二、微信H5頁面及JSDK開發

在咱們開發微信頁面的時候，須要大量用到了各類呈現的效果，通常可使用Boostrap的效果來設計不一樣的頁面，不過微信團隊也提供不少這方面的資源，包括JSSDK的接口，以及Weui的頁面樣式和相關功能頁面，給咱們提供了很大的便利。

1) JSSDK

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。

目前JSSDK支持的接口分類包括下面幾類：基礎接口、分享接口、圖像接口、音頻接口、智能接口、設備信息、地理位置、搖一搖周邊、界面操做、微信掃一掃、微信小店、微信卡券、微信支付，隨着微信功能的所有整合，估計更多的接口會陸續開放出來。

2）WeUI和Jquery WeUI

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁開發量身設計，能夠令用戶的使用感知更加統一。在微信網頁開發中使用 WeUI，有以下優點：

• 同微信客戶端一致的視覺效果，令全部微信用戶都能更容易地使用你的網站
• 便捷獲取快速使用，下降開發和設計成本
• 微信設計團隊精心打造，清晰明確，簡潔大方

該樣式庫目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已經在 GitHub上開源。訪問 http://weui.github.io/weui/ 或微信掃碼便可預覽。

jQuery WeUI 中使用的是官方 WeUI 的 CSS 代碼，並提供了 jQuery/Zepto 版本的 API 實現。JQuery WeUI相對於在官方WeUI的基礎上作了一些功能擴展，已豐富界面設計和相關功能，所以咱們能夠考慮直接基於JQuery  WeUI的基礎上進行頁面開發便可。下載地址：http://jqweui.com/ 。

在微信框架裏面的一些案例中，都利用了We UI樣式來進行不少微信H5頁面的功能設計，咱們主要利用JQuery WeUI庫來實現相對應的一些控件處理功能。

 

三、微信框架中H5控制器關係

 咱們知道，H5頁面也是基於Asp.net的開發模式，所以H5頁面的入口也是MVC的控制器。爲了實現簡單、高效的原則，咱們通常採用了必定層次的控制器繼承關係，所以MVC的控制器繼承關係須要瞭解一下。

在解決方案控制器目錄以下所示。

這些控制器的繼承關係以下所示，繼承可以極大程度利用基類的公用函數，減小子類的代碼臃腫。

 

 經過上面的繼承關係，咱們能夠看到公衆號和企業微信部分，有一個基類控制器是實現二者共同的功能的。而後再次分支，分爲公衆號控制器其或者企業微信控制器，這兩個對於用戶來講也是一個基類，咱們通常在這個基礎上建立本身的子類控制器，以便實現差別化的功能。針對公衆號和企業號的處理，它們的接口對象不一樣，所以處理代碼也是不一樣的，這個即便他們分開的緣由。

       例如，基於上面的繼承關係，若是咱們須要建立一個新的公衆號模塊「ABC」，那麼咱們只須要繼承自BaseJSSDKController，建立一個ABCController控制器，在裏面實現本身的業務控制器接口便可；對於企業微信也同樣，若是咱們要建立一個新的企業應用「XYZ」，那麼咱們只須要繼承自BaseQySDKController，建立一個XYZController控制器便可。

^{四、帳號微信菜單管理}

 而後啓動微信管理後臺系統（通常啓動，本地地址爲http://localhost:32973/Login/Index），若是部署在服務器後，請經過域名進行訪問便可。

進入對應的【微信菜單】模塊功能，以下所示。

 因爲不一樣帳號的菜單不同，所以注意從右上角選擇以前建立好的公衆號帳號.

默認框架提供了咱們標準的一些菜單，若是選擇您新建的帳號，可能菜單欄是空白的。

注意：爲了方便，咱們通常容許多個菜單分組存在，但只有一個是啓用的（黑色），其餘分組是禁用的（紅色），提交菜單到微信，也只是提交當前啓用的菜單分組內的菜單列表。

若是是空白的，請先建立一個菜單分組，而後須要單擊【進入菜單維護】進行菜單的建立操做。

菜單能夠新增，而後指定對應的類型便可，如是Click類型，必須指定事件；若是是View類型，必須指定URL。菜單是樹形列表，你能夠在某個菜單下面建立子菜單。菜單的文字大小、菜單項目等都有限制，必須遵循微信指定的規則建立。若是菜單設置爲不可見，那麼該項菜單及其下面的菜單列表都不會提交到微信服務器。菜單排序是用於肯定菜單列表的順序位置的。

 

 常見的一些菜單列表以下所示。

 菜單的URL咱們要注意填寫，例如對於http://www.iqidi.com/h5/Myinfo，這個地址前面部分是域名，h5表明是H5Controller，MyInfo表明H5Controller控制器或其基類裏面的一個方法入口。這個地址也能夠在方法裏面進行重定向，從而能夠獲取用戶的openid等身份信息。

 菜單維護好後，咱們能夠經過【提交菜單到微信】功能，發佈咱們編輯好的菜單列表。

 若是發佈成功，那麼咱們公衆號的菜單就會及時更新；若是有錯誤信息，請檢查菜單文字的大小、URL格式和大小、菜單項目的數量、事件代碼是否填寫等是否符合微信的要求。

 

五、微信公衆號開發

公衆號功能的開發，除了前面咱們在後臺建立帳號，並錄入帳號的帳號名、AppID、AppSecret、Token、URL、EncodingAESKey並在公衆號配置成功後，咱們只是完成了第一步和微信服務器的對接工做。接下來須要基於這個帳號下面建立對應的菜單，以及實現菜單對應的H5頁面控制器和視圖代碼的處理。這兩個步驟都作好了，咱們就能夠着手對應公帳號H5頁面的功能開發了。

每開發一個應用功能，咱們都須要根據咱們的業務場景，設計好對應的數據庫表，而後根據業務表刪除對應的框架代碼BLL/DAL/IDAL/Entity等這些，增量複製到框架對應位置便可，這個和咱們開發其餘應用的模式同樣。下面咱們以處方審覈項目爲例進行介紹。

1）  數據庫設計

咱們根據業務須要，建立對應的業務表便可。這裏涉及一個藥品表和一個處方記錄表便可，以下截圖所示是基於PowerDesigner工具進行的設計視圖。表的設計，通常來講須要有一個ID字段，並做爲主鍵，其餘根據狀況處理便可。

 設計好數據庫表後，利用工具提供的SQL生成腳本，獲取腳本，在數據庫上執行便可建立對應的表。

 

2）  生成框架代碼

確保生成對應的數據庫表後，咱們就能夠利用代碼生成工具Database2Sharp(代碼生成工具下載地址：http://www.iqidi.com/database2sharp.htm)進行代碼的生成了。

咱們這裏生成代碼，只須要選擇「【代碼生成】【EnterpriseLibrary代碼生成】」便可。

 

 代碼生成後把生成的文件複製到VS項目中，而後編譯測試是否有錯誤，有錯誤則修正便可。

 

3）  H5後臺代碼處理

接下來咱們就須要建立一個對應業務的H5控制器了，若是咱們業務爲ABC，那麼你能夠定義一個ABCController，繼承自公衆號控制器 BaseJSSDKController便可。

我處方管理頁面則是定義H5Controller控制器名稱。

 

 它的控制器定義代碼以下所示。

 在H5頁面裏面，若是須要獲取用戶的OpenID，則須要重定向才能獲取，框架裏面封裝了一個方法AuthOpenId能夠實現重定向獲取，咱們使用以下代碼便可。

一旦有了用戶的OpenID，就能夠經過後臺接口獲取對應的訂閱用戶或者系統用戶信息（用戶關注的時候，訂閱用戶記錄就會寫入數據庫裏面；或者系統用戶表綁定對應的OpenID，能夠和系統用戶關聯），以下代碼所示是根據OpenID獲取綁定的用戶記錄。

 若是咱們須要在後臺管理系統中綁定用戶，那麼咱們能夠在系統用戶管理中進行處理，以下界面所示。

 

 在H5頁面數據保存的時候，後臺須要接受來自頁面的數據集合，而後逐一取出進行處理便可，常規的數據能夠經過FormCollection進行處理，以下代碼所示。

 對於記錄的保存，通常新增和編輯保存處理都是一個方法，須要咱們根據它傳過來的ID是否爲空判斷是新增仍是編輯的，以下代碼所示。

 對於前端須要列表數據，通常經過MVC返回對應的JSON對象給前端使用便可，以下是分頁列表展現數據的函數。

 

5）  H5頁面代碼處理

H5頁面通常是基於某個MVC控制器下進行的視圖頁面處理，一旦咱們建立某個MVC控制器，VS就會建立一個對應的視圖目錄，以下是H5Controller控制器下的視圖頁面。

 頁面模塊說明以下所示。

//通用模塊的內容 BindFail.cshtml --- 微信公衆號綁定失敗處理 BindSuccess.cshtml --- 微信公衆號綁定成功處理 Info.cshtml --- 顯示通常信息的頁面 JSLogin.cshtml --- 使用微信公衆號掃碼登錄頁面 LoginError.cshtml --- 公衆號掃碼登錄錯誤頁面 Test.cshtml --- 測試頁面 Report.cshtml --- 報表測試展現   //醫療設備維修項目頁面 DeviceAdd.cshtml --- 設備添加頁面 DeviceCheck.cshtml --- 設備檢查頁面 DeviceInfo.cshtml --- 設備信息頁面 DeviceInventory.cshtml --- 設備盤點頁面 DeviceList.cshtml --- 設備列表頁面 DeviceMaintain.cshtml --- 設備預防性維護頁面 Measure.cshtml --- 設備度量頁面 Repair.cshtml --- 設備維修工單頁面 RepairDeal.cshtml --- 設備微信工單詳細頁面   //醫療處方審覈項目頁面 DrugInfo.cshtml --- 藥品信息頁面 DrugInquiry.cshtml --- 問診信息頁面 DrugInquiry2.cshtml --- 問診信息頁面（使用另外一種上傳方式的處理） DrugList.cshtml --- 藥品列表頁面 DrugShop.cshtml --- 藥店信息頁面 Prescription.cshtml --- 處方信息 PrescriptionDetail.cshtml --- 處方詳細信息 PrescriptionMy.cshtml --- 本店處方頁面   MyInfo.cshtml --- 個人信息 PersonalInfo.cshtml --- 我的信息

通常的H5頁面文件頭部以下所示，沒有母版，指定對應的JQueryWeui樣式等。

而其餘頁面所需的CSS樣式，咱們根據狀況參考對應頁面Style建立便可。

 H5頁面底部須要引入對應的JS文件以及編寫對應的JS腳本代碼函數。

 H5頁面的表單，參考Jquery WeUI的表單錄入處理樣式便可，以下所示。

最後能夠一個相似下面的表單頁面內容。

 如對於一些彈出框的選擇頁面，如選擇藥品的頁面，那麼能夠經過一個鏈接進行打開，以下效果所示。

 

 

 頁面代碼以下所示。

 對於輸入框裏面即時從服務端獲取數據的操做，咱們通常經過綁定文本控件的「input propertychange」事件進行響應的，經過獲取服務端的JSON數據，而後組裝層對應的界面HTML代碼後，把它賦值給某個控件就能夠實現內容的動態展現了，以下是藥品查詢並顯示在界面上的代碼。

上面代碼經過綁定input的propertychange事件，根據URL地址獲取對應的JSON數據，而後遍歷集合進行構建HTML內容，最後賦值HTML給對應控件，實現界面內容的實時變化。

 

六、 企業微信開發

企業微信的H5頁面開發和公衆號的開發相似，都須要先在後臺管理系統中建立對應帳號（注意一個企業微信下不一樣的應用須要建立不一樣的帳號），而後在對應帳號下面建立好對應的菜單資源，並同步到微信上便可更新應用的菜單。具體的帳號配置參考前面小節關於【企業微信配置】說明。

一樣，每開發一個應用功能，咱們都須要根據咱們的業務場景，設計好對應的數據庫表，而後根據業務表刪除對應的框架代碼BLL/DAL/IDAL/Entity等這些，增量複製到框架對應位置便可，這個和咱們開發其餘應用的模式同樣。

1）  數據庫設計

步驟和公衆號相似，此處忽略。

2）  生成框架代碼

步驟和公衆號相似，此處忽略。

3）  H5後臺代碼處理

前面咱們介紹過H5控制器類的繼承關係，以下所示。這裏咱們以資產管理項目的企業微信控制器爲例介紹。

 QyH5Controller的定義代碼只須要繼承自BaseQySDKController便可。

 和公衆號有些不同，企業微信的用戶身份得到的是user_id的內容，這個是對應企業微信的標識的。咱們也能夠經過重定向頁面得到用戶身份user_id的內容，以下代碼所示。

一旦有了用戶的user_id，就能夠經過後臺接口獲取對應的系統用戶信息(系統用戶表綁定對應的user_id，能夠和系統用戶關聯），以下代碼所示是根據user_id獲取綁定的用戶記錄。

BLLFactory<User>.Instance.FindByCorpUserId(userId);

若是咱們須要在後臺管理系統中綁定用戶，那麼咱們能夠在系統用戶管理中進行處理，以下界面所示。

通常狀況下面，對於多個參數的狀況，咱們也是能夠經過FormCollection的集合獲取，以下函數定義所示。

對於前端須要列表數據，通常經過MVC返回對應的JSON對象給前端使用便可，以下是分頁列表展現數據的函數。

 

 

4）  H5頁面代碼處理

和公衆號相似，建立對應企業應用H5控制器後，也一樣會建立對應的視圖目錄，如咱們建立了QyH5Controller控制器，那麼對應有QyH5的視圖目錄，咱們建立一些咱們須要的視圖文件頁面，配合QyH5控制器裏面的對應入口，以下所示。

 企業微信的應用和公衆號的H5頁面應用本質上沒有差別，只須要本身指定對應的樣式，建立好對應的HTML代碼便可。

 一樣在H5頁面底部引入對應的JS文件，編寫對應的JS處理函數來處理頁面邏輯。