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


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

1、微信賬號配置

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

其中在新增或者編輯界面中錄入我們公眾號或者企業微信的信息,如果涉及微信支付的,錄入微信支付相關秘鑰和證書位置。

 如果是企業微信,我們選擇賬號類型為企業微信,然后根據提示錄入相關企業微信信息即可。

其中主要是CorpID和CorpSecret和企業的AgentId信息,以及加密token和秘鑰,保持和微信后台信息一致即可。

 我們微信開發框架,提供了標准的微信賬號信息填寫界面,錄入對應的信息,完成微信后台的對接,即可開啟開發微信應用之旅了。

賬號登錄公眾號后台或者企業微信后台,我們根據和賬號配置一致對應的信息,完成系統對接即可,以下是微信公眾號的配置對接界面。

 企業微信的對接類似,不在贅述。

 

2、微信菜單配置

為了開發微信應用,我們還是需要准備好微信應用的菜單,菜單是我們所有前端微信功能的入口,我們一般需要先在微信開發框架 基礎上進行菜單的錄入維護,然后在提交到微信服務器上,實現應用菜單的提交。

在微信開發框架上維護菜單,可以根據需要禁用、啟用某個菜單,然后再通過微信SDK接口提交更新到服務器進行菜單的更新,我們可以對多個賬號的微信菜單進行維護。

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

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

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

  

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

2)葯店處方管理的微信應用菜單

我們再來看看,另一個微信公眾號應用的菜單管理

 提交到服務器后,在應用入口的菜單如下所示。

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

 由於微信開發框架也支持企業微信接入,因此我們也可以同時開發企業微信應用的對接,首先也是一樣,定義好對應的企業微信菜單。

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

 提交成功后,我們就可以在企業微信的工作台上看到對應企業微信的菜單了。

 

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

微信應用,除了提供相應的菜單功能外,一般應用前端的H5頁面或者后台頁面都可能需要結合機構、角色、用戶和其權限信息進行系統權限的判斷和數據的處理。

例如我們針對醫療設備微信的應用,在微信后台系統里面定義了相關的機構、用戶、角色等信息。

組織機構如下所示。

用戶角色如下所示:

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

而我們如果應用不同,在系統后台調整這些機構、角色、用戶信息即可,如下面則是葯店處方定義的機構信息。

用戶角色定義如下所示。

 

 根據不同的業務需要,定義自己的組織機構層次,角色列表和人員信息即可,有了這些信息,我們可以同時對用戶系統的操作功能和H5前端的權限進行控制管理。

 

4、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的處理,可以提高體驗效果。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM