基于Bootstrap的Web前端，我们处理H5页面起来也是得心应手，非常方便。

在我前面的一些案例中，都利用了We UI样式来进行很多微信H5页面的功能设计，包括微信支付页面、签到页面等等。如微信支付页面如下所示：

以及签到页面效果如下所示。

基于微信的H5页面，我们后台管理系统整合了一个实际的设备维修案例的微信应用场景，该需求主要围绕固定资产（如医疗设备）的微信应用展开，包括录入及查询资产信息、资产盘点、设备的维修保养、日常巡检、维修、计量检测等事务。

整个案例微信端应用采用的是H5页面以及微信的JSDK进行相关的接口开发，符合微信的界面风格。后端管理就是本后台管理系统。

设备盘点和设备计量如下所示： 

预防性维护和设备计量界面如下所示。

3、微信小程序的后台和前端的应用整合

例如对于我们开发的《公司企业展示》小程序，适合展示公司信息，以及公司的产品信息，在这个应用中我们是整合了后台管理系统和微信前端开发实现的。

我们在微信后台管理系统中，实现商品数据的后台管理，数据数据我们分为几种类型，方便在前端界面展示。

商品编辑界面包括对基础信息的修改、封面和Banner图片的维护、以及商品多个展示图片、商品详细介绍的内容维护，如下界面所示。

除了商品的封面图片以及Banne图片外，我们在小程序的商品详细界面里面，需要在顶端展示多个可以滚动的图片效果，那么我们需要维护商品的图片，如下界面所示。

当然商品的详细信息需要一个富文本的编辑器来进行图片文字的编辑处理，如下界面所示。

上面介绍了管理后台的数据维护，我们就是基于上面的数据模型，在小程序上实现商品数据的展示的。

下图是小程序的商品展示首图，其中包括了顶部Banner栏目、中间的商品分类、底部的商品信息展示几部分。

而详细部分内容，则是需要滚动展示商品的多个图片，另外还需要展示详细的HTML内容，HTML内容的展示使用富文本转化插件wxParse即可实现，这部分在随笔《在微信小程序中使用富文本转化插件wxParse》有详细的使用介绍。