微信门户开发框架-使用指导说明书(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处理函数来处理页面逻辑。