C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统、微信应用、微信小程序、APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API、微信后台管理及前端微信小程序的应用方案。

1、基于Web API的微信开发框架

首先我们各个业务模块,都应该围绕着Web API进行展开,如果是都部署在同一个服务器或者局域网内的系统,考虑到开发的复杂性,退而求其次,也可以基于同一个数据库进行开发。

总体而言,我们是以Web API为核心进行的应用框架构建的,如下图所示。

 在项目场景中,我们这里的微信后台管理系统,是一个独立维护微信后台数据的管理系统,对于操作微信相关API所需要的接口调用凭证(token),我们可以通过Web API接口获得,这样保证各个平台(如Winform界面、其他Web界面),操作的接口token都保持一致

而后台管理系统,我们通过下面的来了解整体功能,整个后台管理系统使用了Bootstrap的框架进行前端处理。

2、整合Web API、微信后台管理及前端微信小程序应用

首先我们在Web API平台上,创建一个AccountController的MVC控制器来提供对应的API接口,实现对账号相关的信息查询,接口访问凭证的获取等业务。

    /// <summary>
    /// 微信公众号、小程序、企业号的账号配置
    /// </summary>
    public class AccountController : BusinessController<Account, AccountInfo>

然后增加获取token的方法

        /// <summary>
        /// 获取公众号/企业号/小程序操作的访问令牌AccessToken
        /// </summary>
        /// <param name="accountId">账号ID</param>
        /// <returns></returns>
        [HttpGet]
        public string GetAccessTokenByAccount(string accountId)
        {
            var result = MyMemoryCache.GetAccessTokenByAccount(accountId);
            return result;
        }

这个token的生成,是存储在内存缓存里面的,定期刷新的,这样我们可以避免频繁的请求接口凭证token,可以统一生成给各个业务系统使用 。

        /// <summary>
        /// 获取公众号(或企业号)操作的访问令牌AccessToken
        /// </summary>
        /// <param name="accountId">账号ID</param>
        /// <returns></returns>
        public static string GetAccessTokenByAccount(string accountId)
        {
            var key = string.Format("{0}_{1}", System.Reflection.MethodBase.GetCurrentMethod().Name, accountId);
            var token = MemoryCacheHelper.GetCacheItem<string>(key, delegate()
            {
                string result = "";
                AccountInfo info = MyMemoryCache.GetAccountByID(accountId);
                if (info != null)
                {
                    if (info.AccountType == AccountType.企业号.ToString())
                    {
                        // 获取微信企业号操作的访问令牌AccessToken
                        ICorpBasicApi baseBLL = new CorpBasicApi();
                        result = baseBLL.GetAccessToken(info.CorpID, info.CorpSecret);
                    }
                    else
                    {
                        //小程序、订阅号、服务器号共享一个逻辑
                        // 获取微信操作的访问令牌AccessToken
                        WHC.Weixin.Interface.IBasicApi baseBLL = new WHC.Weixin.API.BasicApi();
                        result = baseBLL.GetAccessToken(info.AppID, info.AppSecret);
                    }
                }
                return result;
            },
               new TimeSpan(0, 5, 0)//5分钟过期
           );

            return token;
        }

解决了token的统一生成和存储外,我们就可以在各个不同的系统中使用这个token 接口获取并使用来操作微信对应接口了。

                //客户端调试和服务端应用统一采用一个AccessToken的方式
                //避免客户端测试的时候,替换更新了服务端的AccessToken,从而导致服务端的AccessToken无效。
                HttpHelper helper = new HttpHelper();
                var tokenWebSiteUrl = string.Format("https://www.youdomain.com/api/Framework/Account/GetAccessTokenByAccount?accountId={0}", accountId);
                var result = helper.GetHtml(tokenWebSiteUrl);
                if(!string.IsNullOrEmpty(result))
                {
                    result = result.Trim('"');
                }
                Console.WriteLine("通过Web API 获取到的Token为:" + result);
                this.token = result;

关于微信后台管理系统,这个是对微信相关数据,如账号配置、菜单、事件、权限控制、业务数据定义等方面的综合管理,通过基于Bootstrap的MVC的技术进行Web端的数据维护,如下界面所示。

系统登录后,通过水平菜单进行后台功能管理。

系统支持多微信账号的接入管理和使用,同时支持订阅号、公众号、企业号、小程序的账号配置。

 

在系统中管理菜单,并通过把菜单提交到服务器上,实现菜单的动态配置和生成,能够为我们系统适应各种的需要,实现灵活的处理。

在微信服务账号的门户上,菜单的表现效果如下所示。

为了更有效管理订阅用户以及分组信息,我们可以从微信服务器上获取相关的信息,供我们了解关注的用户信息,也可以为后续的群发消息做准备。 

 

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

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

     

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

 

 

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

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

  

  

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

 

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

 

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

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

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

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

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

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

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

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

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

本文转自博客园伍华聪的博客,原文链接:C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案,如需转载请自行联系原博主。

时间: 2024-09-09 12:23:00

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案的相关文章

整合微信小程序的Web API接口层的架构设计

在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介绍了相关模块的划分,在<基于微信小程序的系统开发准备工作>介绍了Web API的架构设计思路.本篇随笔对之前介绍的架构内容进行统一的调整更新,以便更加方便实际项目的应用开发,以期达到统一.重用.清晰的目的. 1.公众号.企业号.小程序模块的划分 我们知道,目前微信企业应用,分为公众号.企业号(企业

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分   一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:   1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, on

《微信小程序:开发入门及案例详解》—— 2.4 框架页面文件

2.4 框架页面文件 小程序中一个框架页面包含4个文件,同一框架页面的这4个文件必须具有相同的路径与文件名,进入小程序时或页面跳转时,小程序会根据app.json配置的路径找到对应的资源进行渲染. ◇ .js文件:页面逻辑文件,必要项. ◇ .wxml文件:页面结构文件,必要项. ◇ .wxss文件:页面样式文件. ◇ .json文件:页面配置文件. 与框架主体文件相比框架页面文件多了一种页面结构文件,其余3个文件和框架主体文件的功能类同,下面我们一一讲解每个文件作用. 2.4.1 页面配置文件

《微信小程序开发入门精要》——第1章,第1.3节注册小程序账号

1.3 注册小程序账号在开发小程序之前,需要注册一个小程序账号,并用与账号绑定的手机微信扫描开发工具的二维码才能登录开发小程序的IDE(将在1.4节介绍).首先进入如下地址的页面.https://mp.weixin.qq.com 如果已经用微信公众号登录,请注销.然后单击右上角"立即注册"链接,进入注册页面.该页面有如图1-1所示的4个注册选项,分别是订阅号.服务号.小程序和企业号. ▲图1-1 注册类型 也就是说,这4个注册类型需要使用4个不同的账号,如果读者已经有了订阅号或其他账号

微信公众号可快速创建“门店小程序” 不用开发

"门店小程序"是啥?"门店小程序"是小程序的一项新能力.无需开发,商户就可在微信公众号后台快速创建"门店小程序".这个小程序类似一张"店铺名片",可以展示线下门店名称.简介.营业时间.联系方式.地理位置和图片等门店信息,并支持在公众号自定义菜单.图文消息和模板消息等场景中使用. 它长这样: (左侧为"门店小程序"示意图,将来商户可根据需要为门店小程序快速配置卡券.支付功能) "门店小程序"

微信小程序开发基础知识总结

微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力.它提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上. 1.小程序的目录结构 小程序的目录结构如下所示. 其中项目级别的的文件包括 app.js.ap

微信小程序又曝哪 5 个新能力?新能力会带来什么样的变化?

继 27 号晚小程序释放了 6 大新能力后,28号晚微信又释放出 5 个新能力.它们分别是:一.小程序可以通过蓝牙连接硬件:二.小程序和微信卡券能力结合:三.开放获取用户地址:四.开放访问场景能力:五.兼容 ECMAScript 6 API.新能力会带来什么样的变化?我们一起来看看(2017 年 3 月底,微信小程序接连放了几个大招:第一招:发布小程序 6 大新能力.第二招:再曝小程序 5 大新能力.第三招:微信小程序第三方平台和附近的小程序.) 一.小程序可以通过蓝牙连接硬件蓝牙接口开放后,小

微信小程序结合后台数据管理实现商品数据的动态展示、维护

微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通过小程序的请求Web API 平台获取JSON数据在小程序界面上进行动态展示. 1.整体性的架构设计 我们整体性的架构设计,包含一个Web管理后台.一个Web API统一接口层.当然还有数据库什么,另外还有一个小程序客户端.整个架构体系还是以我之前随笔介绍的<整合微信小程序的Web API接口层的架

微信小程序的Web API接口设计及常见接口实现

微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们设计和编写Web API平台是非常重要的,通过这个我们可以实现数据的集中控制和管理,本篇随笔介绍基于Asp.NET MVC的Web API接口层的设计和常见接口代码的展示,以便展示我们常规Web API接口层的接口代码设计.参数的处理等内容. 1.Web API整体性的架构设计 我们整体性的架构设计