基於微信開發框架進行業務開發的處理過程

在咱們開發微信應用的時候，包括公衆號、企業微信、小程序等，都須要基於必定的框架基礎上開發，才能事半功倍，通常狀況下，咱們須要處理好微信菜單和微信事件的對接，以及後臺數據管理系統和權限管理的有效整合，或者是基於業務流程的相關流轉等，本篇隨筆介紹如何基於微信開發框架進行業務開發的處理過程。

一、微信帳號配置

 在咱們開發任何微信基礎應用以前，都須要先錄入微信帳號的相關信息，包括appId，AppSecret等基礎信息，這個是用來獲取token，和微信服務器進行交互的基礎，咱們的微信框架提供了多種類型和多個帳號的管理。

其中在新增或者編輯界面中錄入咱們公衆號或者企業微信的信息，若是涉及微信支付的，錄入微信支付相關祕鑰和證書位置。

 若是是企業微信，咱們選擇帳號類型爲企業微信，而後根據提示錄入相關企業微信信息便可。

其中主要是CorpID和CorpSecret和企業的AgentId信息，以及加密token和祕鑰，保持和微信後臺信息一致便可。

 咱們微信開發框架，提供了標準的微信帳號信息填寫界面，錄入對應的信息，完成微信後臺的對接，便可開啓開發微信應用之旅了。

帳號登陸公衆號後臺或者企業微信後臺，咱們根據和帳號配置一致對應的信息，完成系統對接便可，如下是微信公衆號的配置對接界面。

 企業微信的對接相似，不在贅述。

 

二、微信菜單配置

爲了開發微信應用，咱們仍是須要準備好微信應用的菜單，菜單是咱們全部前端微信功能的入口，咱們通常須要先在微信開發框架 基礎上進行菜單的錄入維護，而後在提交到微信服務器上，實現應用菜單的提交。

在微信開發框架上維護菜單，能夠根據須要禁用、啓用某個菜單，而後再經過微信SDK接口提交更新到服務器進行菜單的更新，咱們能夠對多個帳號的微信菜單進行維護。

1）醫療設備維修的微信應用菜單

例如我在開發一個醫療設備維修的微信應用的時候，菜單定義多是這樣子。

這樣咱們提交菜單後，在公衆號上就能夠對相關的功能進行操做了。

  

相關的菜單對應功能以下所示。

2）藥店處方管理的微信應用菜單

咱們再來看看，另外一個微信公衆號應用的菜單管理

 提交到服務器後，在應用入口的菜單以下所示。

3）企業微信應用菜單配置

 因爲微信開發框架也支持企業微信接入，所以咱們也能夠同時開發企業微信應用的對接，首先也是同樣，定義好對應的企業微信菜單。

如下是咱們開發的一個資產管理的企業微信應用，配置了相關的菜單以下所示。

 提交成功後，咱們就能夠在企業微信的工做臺上看到對應企業微信的菜單了。

 

三、機構、角色、用戶的權限管理

微信應用，除了提供相應的菜單功能外，通常應用前端的H5頁面或者後臺頁面均可能須要結合機構、角色、用戶和其權限信息進行系統權限的判斷和數據的處理。

例如咱們針對醫療設備微信的應用，在微信後臺系統裏面定義了相關的機構、用戶、角色等信息。

組織機構以下所示。

用戶角色以下所示：

系統根據角色對菜單進行不一樣的顯示設置。

而咱們若是應用不一樣，在系統後臺調整這些機構、角色、用戶信息便可，以下面則是藥店處方定義的機構信息。

用戶角色定義以下所示。

 

 根據不一樣的業務須要，定義本身的組織機構層次，角色列表和人員信息便可，有了這些信息，咱們能夠同時對用戶系統的操做功能和H5前端的權限進行控制管理。

 

四、H5頁面的開發

開發微信公衆號或者企業應用，不少時候工做的時間須要花費在H5頁面的開發上，H5頁面的規範咱們能夠參考微信的Weui（公衆號） 或者WeUI for work (企業微信），以及借用一些漂亮的圖表，以及現成的一些H5案例界面。WeUI還能夠參考另外一款 基於JQuery的 jQuery WeUI， 提供更多的案例和插件。

WeUI : https://github.com/Tencent/weui

WeUI for work：WeUI for Work (企業微信版)

 jQuery WeUI：http://jqweui.com/ 

WeUI+ 演示 https://weui.shanliwawa.top/

常規狀況下，咱們能夠根據上面的一些案例，構建咱們的一些輸入或者顯示元素，如日期輸入、選擇輸入、字典綁定、圖片展現、文件上傳等等。

通常來講，H5頁面開發，須要準備一些漂亮一點的圖標，可讓程序增色很多，圖片能夠在網站下載或者淘寶購買一些設計圖標，根據相應場景進行使用便可。如下是我本身收集的一些圖表，在須要的時候，找一些匹配的使用便可。

 

 H5頁面若是有一些標準的案例來參考，作起來可能更加駕輕就熟，以下是我本身收集的一些H5案例，根據實際項目的須要，在找一些對應的頁面來模仿修改便可。

  

 

   

 

根據一些界面的樣式，咱們設計了一些相似的界面效果。

醫療設備維修的界面設計效果。

 

醫藥處方審覈界面設計效果。

  

   

 

 對於圖片預覽以及一些特殊功能，咱們使用JSSDK實現便可，而表單的數據提交，主要就是POST、GET的JS代碼處理，這樣能夠實現動態的數據綁定和處理，特別是在查詢分頁展現的時候，使用ajax的處理，能夠提升體驗效果。