WeChat applets can be used in combination with background data management to achieve dynamic display and maintenance of commodity data and mini-Program Data Management

Small programs use background data management to achieve dynamic display and maintenance of commodity data, and small program data management

The applet provides us with a good development platform that can be used to display various data and implement rich functions, this article introduces how to use applets to dynamically display and maintain commodity data in conjunction with background data management, and how to maintain and manage commodity data in the background management system, the applet requests the Web API platform to obtain JSON data for dynamic display on the applet interface.

1. Overall Architecture Design

Our overall architecture design includes a Web management backend, a unified Web API interface layer, and of course what is the database, and a small program client. The entire architecture system is based on the architecture design of the Web API interface layer for integrating applets introduced at a time.

The whole system provides services based on Web APIs, and the background management system maintains basic management work such as data addition, deletion, and modification through various interfaces.

The layer of Web APIs allows us to understand the specific layer structure.

Web API is a unified egress. Therefore, many Web API controllers are integrated to provide interfaces for all services. Therefore, it is very important to manage Web API controllers, we recommend that you introduce the Area to manage the Controller class. This type of modules can be well managed in different categories.

As shown in, the Controller Area of our Web API project is classified into different parts, including public accounts, enterprise accounts, applets, basic frameworks, third-party interfaces, and CRM.

In the background management system, we use the following to understand the overall functions. The whole background management system uses the Bootstrap framework for front-end processing.

The maintenance of various accounts is as follows.

2. Data Maintenance of the Background Management System

As described above, the backend management and Web API layers are separated, and their data is eventually concentrated in a database to achieve centralized management of the dataset we want.

Let's get down to the question and introduce how to implement background management of product data. There are several types of data to facilitate display on the front-end interface.

The product editing interface includes the modification of basic information, the maintenance of cover and Banner images, the maintenance of multiple product display images, and the maintenance of product details, as shown in the following interface.

In addition to the cover pictures and Banne pictures of products, we need to display multiple scrolling images on the top of the commodity detail interface of the mini program. Therefore, we need to maintain the pictures of products, the following page is displayed.

Of course, the product details need a Rich Text Editor to edit the image text, as shown in the following interface.

For HTML text editing, we use the SummerNote plug-in for processing. This control is very convenient to use. In addition, by modifying the onImageUpload callback function, you can upload images at any time.

Function initEditor () {$ ('# note '). summernote ({lang: 'zh-cn', // default: 'en-us' height: 600, // set editor height minHeight: null, // set minimum height of editor maxHeight: null, // set maximum height of editor focus: true, // set focus to editable area after initializing summe callbacks: {onImageUpload: function (files) {// the onImageUpload API img = sendFile (files [0]) ;}}) ;}// submit the file to the server for processing function sendFile (file) {data = new FormData (); data. append ("file", file); // Add additional parameter data. append ("folder", 'item information'); data. append ("guid", $ ("# ID "). val (); $. ajax ({data: data, type: "POST", url: "/FileUpload/Upload", cache: false, contentType: false, processData: false, success: function (json) {var data = $. parseJSON (json); var url = data. urls [0]; $ ("# Note "). summernote ('insertimage', url, 'image name'); // the insertImage API }});}

 

3. Integrate Web APIs with applets to display data

The data maintenance in the management backend is introduced above. Based on the above data model, we can display product data in small programs.

Is the first diagram of the mini-program product display, which includes the top Banner column, the middle of the product category, and the bottom of the product information display.

The Banner column is a swiper interface component. The product type is displayed using scroll-view, while the product information is processed using a common View.

The code for the view part of the interface is as follows.

<! -- Pages/product/index. wxml --> <! -- 1px = 750/320 = 2.34rpx; --> <view class = "container"> <view class = "swiper-container"> <swiper class = "swiper_box" autoplay = "{autoplay}" interval = "{ {interval }}" duration = "{duration}" bindchange = "swiperchange"> <block wx: for = "{banners }}"> <swiper-item> <image bindtap =" tapBanner "data-id =" {item. ID }}" src = "{item. banner }}" class = "slide-image" width = "750rpx" height = "562.5rpx"/> </swiper-item> </blo Ck> </swiper> <view class = "dots"> <block wx: for = "{banners}" wx: key = "unique"> <view class = "dot {index = swiperCurrent? 'Active ': ''}}"> </view> </block> </view> <view class =" type-container "> <scroll-view class =" type -navbar "scroll-x =" true "style =" width: 100% "> <view class =" type-box "wx: for-items =" {categories }}"> <view id = "{item. id} "class =" type-navbar-item {activeCategoryId = item. id? 'Type-item-on': ''}" bindtap = "tabClick" >{{ item. name }}</view> </scroll-view> </view> <view class = "goods-container"> <view class = "goods-box" wx: for-items = "{goods}" wx: key = "{index}" bindtap = "toDetailsTap" data-id = "{item. ID }}"> <view class = "img-box"> <image src = "{item. picture }}" class = "image"/> </view> <view class = "goods-title"> {item. productName }}</view> <view hidden = "{LoadingMoreHidden? True: false }}" class = "no-more-goods"> no more </view>

The data of small programs is loaded and bound through the JS files in the background.

/*** Lifecycle function -- listen to page loading */onLoad: function (options) {var that = this; this. getCategorys (); this. getTopBanners (); this. getGoodsList (0 );},

The preceding functions obtain the corresponding JSON data through the Web API. The function code is as follows.

// Get the data of the Top Banner getTopBanners: function () {// get the product list var url = config. product_api ;//' http://localhost:27206/api/Framework/Product/list 'Var data = {status: 1, // We recommend pageindex: 1, pagesize: 10} app. utils. get (url, data ). then (res => {this. setData ({banners: res. list}) ;}, // get the product type getCategorys: function () {var url = config. category_api ;//' http://localhost:27206/api/Framework/Product/GetProductType 'App. utils. get (url ,{}). then (res => {var that = this; var categories = [{id: 0, name: "All"}]; for (var I = 0; I <res. length; I ++) {categories. push (res [I]);} that. setData ({categories: categories, activeCategoryId: 0});}) ;}, // get the product list getGoodsList: function (categoryId) {if (categoryId = 0) {categoryId = "";} this. setData ({goods: [], loadingMoreHidden: true}); // obtain the product list var url = config. product_api ;//' http://localhost:27206/api/Framework/Product/list 'Var data = {type: categoryId, status: '', // All status pageindex: 1, pagesize: 50} app. utils. get (url, data ). then (res => {this. setData ({goods: res. list, loadingMoreHidden: false ,})});},

If you use the code for the above request data

    app.utils.get(url, data).then(res=> {      this.setData({        banners : res.list      })    });

If you have any questions, you can refer to my essay "using Promise to optimize function processing in the JS script of a small program" to learn how to use the Promise plug-in, by introducing Promise and JS modularization methods, you can directly reuse these general JS functions,

 

The detailed content is to display multiple images of the product in a scroll manner. In addition, the detailed HTML content needs to be displayed. The HTML content can be displayed using the Rich Text conversion plug-in wxParse, this section describes how to use the Rich Text conversion plug-in wxParse in a small program.

The view code of the product details is as follows.

<Import src = ".. /.. /utils/wxParse. wxml "/> <view class =" container "> <view class =" swiper-container "> <swiper class =" swiper_box "autoplay =" {autoplay} "interval = "{interval }}" duration =" {duration} "bindchange =" swiperchange "> <block wx: for = "{goodsDetail. pics }}"> <swiper-item> <image src = "{item. pic }}" class = "slide-image" width = "355" height = "150"/> </swiper-item> </block> </swiper> <view clas S = "dots"> <block wx: for = "{goodsDetail. pics }}" wx: key = "unique"> <view class = "dot {index = swiperCurrent? 'Active ': ''}}"> </view> </block> </view> <view class =" goods-info "> <view class =" goods-title ">{{ goodsDetail. productName }}</view> <view class = "goods-price" hidden = "true"> ¥ {goodsDetail. price }}</view> <view class = "goods-text" >{{ goodsDetail. description }}</view> <view class = "goods-des-info"> <view class = "label-title"> product introduction </view> <view class = "goods-text"> <template is = "wxParse" data = "{wxParseData: article. nodes }}"/> </view>

Among them, the backend JS is mainly responsible for obtaining and binding detailed information.

OnLoad: function (e) {var that = this; // obtain the product details var url = config. product_detail_api; // 'HTTP: /localhost: 27206/api/Framework/Product/getdetail '; var data = {id: e. id}; app. utils. get (url, data ). then (res => {console. log (res); that. data. goodsDetail = res; that. setData ({goodsDetail: res}); WxParse. wxParse ('Article', 'html', res. note, that, 5 );});},

 

Finally, let's take a look at the overall function display in the video segment.