热门搜索:宝马娱乐平台 www.g22.com
公司简介产品展示新闻资讯视频展示招聘精英销售网络客户中心联系我们
文章搜索:
首页 > 视频展示
 
微信小程序结合后台数据管理实现商品数据的动态展示、维护
作者: 发布时间:2019-01-05 23:26:46 来源:本站

  微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示、维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通过小程序的请求Web API平台获取JSON数据在小程序界面上进行动态展示。

  我们整体性的架构设计,包含一个Web管理后台、一个WebAPI统一接口层、当然还有数据库什么,另外还有一个小程序客户端。整个架构体系还是以我之前随笔介绍的《整合微信小程序的Web API接口层的架构设计》内容为蓝本

  整个体系以WebAPI为主提供服务,同时后台管理系统通过各种界面维护着数据的增删改等基础管理工作。

  WebAPI是一个统一的出口,因此会整合很多WebAPI控制器,以提供所有业务的接口,因此对WebAPI控制器的管理就显得很重要,这里建议引入Area区域进行管理控制器类,这种各个模块就能够很好分门别类的进行管理了。

  如下图所示是我们的Web API项目的控制器Area区域分类,把微信公众号、企业号、小程序、基础框架、第三方接口、CRM等内容进行不同的划分。

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

  前面介绍了,后台管理和WebAPI层是分开的,它们的数据最终都是集中在一个数据库上,实现我们所要的数据集中化管理。

  我们言归正题,介绍如何实现商品数据的后台管理,数据数据我们分为几种类型,方便在前端界面展示。

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

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

  HTML图文的编辑,我们这里是用SummerNote插件来进行处理,这个控件的使用非常方便,另外通过修改onImageUpload回调函数,可以实现图片的随时上传处理。

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

  其中Banner栏目的是一个swiper界面组件,商品类型使用了scroll-view来展示,而商品信息则是使用普通的View处理即可。

  有疑问,你可以参考我的随笔《在微信小程序的JS脚本中使用Promise来优化函数处理》了解Promise插件的使用过程,这里通过引入Promise以及JS的模块化方式,可以直接重用这些通用的JS函数,

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

  
评论】【加入收藏夹】【 】【打印】【关闭
※ 相关信息
无相关信息

发表评论
用户名: 密码:
验证码: 匿名发表
 
 搜索新闻
 最新新闻
·教你使用微信小程序的产品展
·微信小程序结合后台数据管理
·文案培训班控心文案精英班课
·BMW推出网上儿童交通安全游
·瀹濋┈娓镐箰鍦
·以客户为中心演讲稿
·大客户部的定义
·呼叫中心客服系统在企业中的
·鑱旂郴鎴戜滑鐨勫浘鏍囧崱閫
·联系我们小图标手绘矢量图
 热点新闻 
·贵州商学院教务管理软件采购
·苏州吴中区临湖镇网站注册商
·捷信分期付款买手机清晰的步
·砖托板生产厂家徐州联系我们
·捷信分期买手机向消费者提供
·长盛基金新官网盛装上线 盛
·打破二次元壁垒 高科技打造
·2018广发银行股份有限公司信
·虚拟歌手洛天依奔驰文化中心
·饿了么新乡客服中心创造上千
关于我们 | 在线反馈 | 广告服务 | 友情链接 | 联系我们 | 免责声明
Copyright © 2007-2028 /, Some Rights Reserved