利用微信公众号实现商品的展示和支付（1）,微信小程序结合后台数据管理实现商品数据的动态展示、维护...

在较早随笔《微信小程序结合后台数据管理实现商品数据的动态展示、维护》中介绍过使用小程序实现商品的展示，其实基于对应的接口，我们使用H5页面来开发基于公众号的商品展示和支付，也是产不多的原理，不过H5页面和小程序的界面处理代码有一些差异吧了，整体的实现思路倒是差不多的。本篇随笔介绍基于H5页面的开发，参照一些微店的展示页面，实现商品的展示和支付等操作。

1、商品的列表展示

和小程序一样的处理，我们首先需要利用微信开发框架的后台，对商品数据进行统一的录入和管理。并提供对应的接口让我们获取数据，就可以在前端获取进行展示了。我们可以都是基于一个Web API进行数据的处理操作，不管是小程序，还是公众号的H5页面，或者其他Web展示平台，我们都可以以一个统一的Web API接口来处理。

我们先来回顾了解下整体性的功能展示(小程序版本)。

以上界面效果是之前使用小程序开发的，我们这次利用公众号H5页面做，也希望做成类似的布局和界面，可以稍作调整。

我们后台对商品数据进行维护，以便能够在实际应用中通过API来获取对应的商品数据。

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

以上包括商品基础信息，轮播的展示图片，以及明细内容的维护，这些数据我们最终会通过JSON方式返回前端使用。

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

我们使用公众号H5的开发场景的时候，也希望大概做成类似的页面展示效果。

我们公众号处理一般使用一个对应的控制器来处理对应的页面视图或者数据接口，例如我这里使用H5Controller页面控制器。

我们先来定义一些常用到的视图入口页面。

    /// <summary>
    /// H5页面的处理操作控制(产品信息部分)
    /// </summary>
    public partial class H5Controller
    {
        /// <summary>
        /// 产品列表页面
        /// </summary>
        /// <returns></returns>
        public ActionResult ProductList()
        {
            return View("ProductList");
        }

        /// <summary>
        /// 产品详细页面
        /// </summary>
        /// <returns></returns>
        public ActionResult ProductDetail()
        {
            //JSSDK参数
            RefreshTicket();
            return View("ProductDetail");
        }

        /// <summary>
        /// 购物车页面
        /// </summary>
        /// <returns></returns>
        public ActionResult ShopCart()
        {
            //JSSDK参数
            RefreshTicket();
            return View("Shopcart");
        }

从上面的视图控制器代码，我们定义了ProductList.cshtml视图用来展示商品列表大类和商品列表的。

商品列表最终的界面效果如下所示。

顶部的图片轮播，我们也是根据产品的属性来获取推荐产品的列表，然后展示对应的图片。

顶部轮播部分的页面代码如下所示

@{
    Layout = null;