微信小程序給我們提供了一個(gè)很好的開發(fā)平臺(tái)贸桶，可以用于展現(xiàn)各種數(shù)據(jù)和實(shí)現(xiàn)豐富的功能，本篇隨筆介紹微信小程序結(jié)合后臺(tái)數(shù)據(jù)管理實(shí)現(xiàn)商品數(shù)據(jù)的動(dòng)態(tài)展示桌肴、維護(hù)皇筛，介紹如何實(shí)現(xiàn)商品數(shù)據(jù)在后臺(tái)管理系統(tǒng)中的維護(hù)管理，并通過小程序的請(qǐng)求Web API 平臺(tái)獲取JSON數(shù)據(jù)在小程序界面上進(jìn)行動(dòng)態(tài)展示坠七。
1水醋、整體性的架構(gòu)設(shè)計(jì)
我們整體性的架構(gòu)設(shè)計(jì)，包含一個(gè)Web管理后臺(tái)彪置、一個(gè)Web API統(tǒng)一接口層拄踪、當(dāng)然還有數(shù)據(jù)庫什么，另外還有一個(gè)小程序客戶端拳魁。整個(gè)架構(gòu)體系還是以我之前隨筆介紹的《整合微信小程序的Web API接口層的架構(gòu)設(shè)計(jì)》內(nèi)容為藍(lán)本
整個(gè)體系以Web API為主提供服務(wù)惶桐，同時(shí)后臺(tái)管理系統(tǒng)通過各種界面維護(hù)著數(shù)據(jù)的增刪改等基礎(chǔ)管理工作。
Web API的分層潘懊，我們可以通過下圖來了解具體的分層結(jié)構(gòu)姚糊。
Web API 是一個(gè)統(tǒng)一的出口，因此會(huì)整合很多Web API控制器授舟，以提供所有業(yè)務(wù)的接口救恨，因此對(duì)Web API 控制器的管理就顯得很重要，這里建議引入Area區(qū)域進(jìn)行管理控制器類释树，這種各個(gè)模塊就能夠很好分門別類的進(jìn)行管理了忿薇。
如下圖所示是我們的Web API項(xiàng)目的控制器Area區(qū)域分類裙椭，把微信公眾號(hào)、企業(yè)號(hào)署浩、小程序揉燃、基礎(chǔ)框架、第三方接口筋栋、CRM等內(nèi)容進(jìn)行不同的劃分炊汤。
而后臺(tái)管理系統(tǒng)，我們通過下面的來了解整體功能弊攘，整個(gè)后臺(tái)管理系統(tǒng)使用了Bootstrap的框架進(jìn)行前端處理抢腐。
各種賬號(hào)的維護(hù)如下所示。
2襟交、后臺(tái)管理系統(tǒng)的數(shù)據(jù)維護(hù)
前面介紹了迈倍，后臺(tái)管理和Web API層是分開的，它們的數(shù)據(jù)最終都是集中在一個(gè)數(shù)據(jù)庫上捣域，實(shí)現(xiàn)我們所要的數(shù)據(jù)集中化管理啼染。
我們言歸正題，介紹如何實(shí)現(xiàn)商品數(shù)據(jù)的后臺(tái)管理焕梅，數(shù)據(jù)數(shù)據(jù)我們分為幾種類型迹鹅，方便在前端界面展示。
商品編輯界面包括對(duì)基礎(chǔ)信息的修改贞言、封面和Banner圖片的維護(hù)斜棚、以及商品多個(gè)展示圖片、商品詳細(xì)介紹的內(nèi)容維護(hù)该窗，如下界面所示弟蚀。
除了商品的封面圖片以及Banne圖片外，我們?cè)谛〕绦虻纳唐吩敿?xì)界面里面酗失，需要在頂端展示多個(gè)可以滾動(dòng)的圖片效果粗梭，那么我們需要維護(hù)商品的圖片，如下界面所示级零。
當(dāng)然商品的詳細(xì)信息需要一個(gè)富文本的編輯器來進(jìn)行圖片文字的編輯處理断医，如下界面所示。
HTML圖文的編輯奏纪，我們這里是用SummerNote插件來進(jìn)行處理鉴嗤，這個(gè)控件的使用非常方便，另外通過修改onImageUpload回調(diào)函數(shù)序调，可以實(shí)現(xiàn)圖片的隨時(shí)上傳處理醉锅。
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]);
}
}
});
}
//提交文件到服務(wù)器處理
function sendFile(file) {
data = new FormData();
data.append("file", file);
//增加額外的參數(shù)
data.append("folder", '商品信息');
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、小程序整合Web API接口實(shí)現(xiàn)數(shù)據(jù)展示
上面介紹了管理后臺(tái)的數(shù)據(jù)維護(hù)发绢，我們就是基于上面的數(shù)據(jù)模型硬耍，在小程序上實(shí)現(xiàn)商品數(shù)據(jù)的展示的垄琐。
下圖是小程序的商品展示首圖，其中包括了頂部Banner欄目经柴、中間的商品分類狸窘、底部的商品信息展示幾部分。
其中Banner欄目的是一個(gè)swiper界面組件坯认，商品類型使用了scroll-view來展示翻擒，而商品信息則是使用普通的View處理即可。
整個(gè)界面的視圖部分代碼如下所示牛哺。
<!--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>
</block>
</swiper>
<view class="dots">
<block wx:for="{{banners}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</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>
</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>
</view>
<view hidden="{{loadingMoreHidden ? true : false}}" class="no-more-goods">沒有更多啦</view>
</view>
其中小程序的數(shù)據(jù)是通過后臺(tái)的JS文件實(shí)現(xiàn)數(shù)據(jù)的加載綁定的陋气。
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var that = this;
this.getCategorys();
this.getTopBanners();
this.getGoodsList(0);
},
其中上面的幾個(gè)函數(shù)就是分別通過Web API來獲取對(duì)應(yīng)的JSON數(shù)據(jù)的，函數(shù)代碼如下所示引润。
//獲取頂部Banner的數(shù)據(jù)
getTopBanners : function() {
//獲取產(chǎn)品列表
var url = config.product_api;//'http://localhost:27206/api/Framework/Product/list'
var data ={
status : 1, //推薦
pageindex : 1,
pagesize: 10
}
app.utils.get(url, data).then(res=> {
this.setData({
banners : res.list
})
});
},
//獲取商品類型
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:"全部"}];
for(var i=0;i<res.length;i++){
categories.push(res[i]);
}
that.setData({
categories:categories,
activeCategoryId:0
});
});
},
//獲取商品列表
getGoodsList: function (categoryId) {
if (categoryId == 0) {
categoryId = "";
}
this.setData({
goods: [],
loadingMoreHidden: true
});
//獲取產(chǎn)品列表
var url = config.product_api;//'http://localhost:27206/api/Framework/Product/list'
var data = {
type: categoryId,
status: '', //所有狀態(tài)
pageindex: 1,
pagesize: 50
}
app.utils.get(url, data).then(res => {
this.setData({
goods: res.list,
loadingMoreHidden: false,
})
});
},
如果你對(duì)上面請(qǐng)求數(shù)據(jù)的代碼'
app.utils.get(url, data).then(res=> {
this.setData({
banners : res.list
})
});
有疑問巩趁，你可以參考我的隨筆《在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理》了解Promise插件的使用過程，這里通過引入Promise以及JS的模塊化方式淳附，可以直接重用這些通用的JS函數(shù)议慰，
而詳細(xì)部分內(nèi)容，則是需要滾動(dòng)展示商品的多個(gè)圖片燃观，另外還需要展示詳細(xì)的HTML內(nèi)容褒脯，HTML內(nèi)容的展示使用富文本轉(zhuǎn)化插件wxParse即可實(shí)現(xiàn)便瑟，這部分在隨筆《在微信小程序中使用富文本轉(zhuǎn)化插件wxParse》有詳細(xì)的使用介紹缆毁。
商品詳細(xì)內(nèi)容的視圖代碼如下所示。
<import src="../../utils/wxParse/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 class="dots">
<block wx:for="{{goodsDetail.pics}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</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>
<view class="goods-des-info">
<view class="label-title">商品介紹</view>
<view class="goods-text">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
</view>
</view>
其中后臺(tái)的JS主要負(fù)責(zé)詳細(xì)信息的獲取和綁定工作到涂。
onLoad: function (e) {
var that = this;
//獲取商品詳細(xì)信息
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);
});
},
最后來段視頻了解下整體性的功能展示脊框。
