微信小程序結合後臺數據管理實現商品數據的動態展現、維護

時間 2019-11-19

原文原文鏈接

微信小程序給咱們提供了一個很好的開發平臺，能夠用於展示各類數據和實現豐富的功能，本篇隨筆介紹微信小程序結合後臺數據管理實現商品數據的動態展現、維護，介紹如何實現商品數據在後臺管理系統中的維護管理，並經過小程序的請求Web API 平臺獲取JSON數據在小程序界面上進行動態展現。html

一、總體性的架構設計

咱們總體性的架構設計，包含一個Web管理後臺、一個Web API統一接口層、固然還有數據庫什麼，另外還有一個小程序客戶端。整個架構體系仍是以我以前隨筆介紹的《整合微信小程序的Web API接口層的架構設計》內容爲藍本前端

整個體系以Web API爲主提供服務，同時後臺管理系統經過各類界面維護着數據的增刪改等基礎管理工做。node

Web API的分層，咱們能夠經過下圖來了解具體的分層結構。ajax

Web API 是一個統一的出口，所以會整合不少Web API控制器，以提供全部業務的接口，所以對Web API 控制器的管理就顯得很重要，這裏建議引入Area區域進行管理控制器類，這種各個模塊就可以很好分門別類的進行管理了。數據庫

以下圖所示是咱們的Web API項目的控制器Area區域分類，把微信公衆號、企業號、小程序、基礎框架、第三方接口、CRM等內容進行不一樣的劃分。json

然後臺管理系統，咱們經過下面的來了解總體功能，整個後臺管理系統使用了Bootstrap的框架進行前端處理。小程序

各類帳號的維護以下所示。微信小程序

二、後臺管理系統的數據維護

前面介紹了，後臺管理和Web API層是分開的，它們的數據最終都是集中在一個數據庫上，實現咱們所要的數據集中化管理。api

咱們言歸正題，介紹如何實現商品數據的後臺管理，數據數據咱們分爲幾種類型，方便在前端界面展現。服務器

商品編輯界面包括對基礎信息的修改、封面和Banner圖片的維護、以及商品多個展現圖片、商品詳細介紹的內容維護，以下界面所示。

除了商品的封面圖片以及Banne圖片外，咱們在小程序的商品詳細界面裏面，須要在頂端展現多個能夠滾動的圖片效果，那麼咱們須要維護商品的圖片，以下界面所示。

固然商品的詳細信息須要一個富文本的編輯器來進行圖片文字的編輯處理，以下界面所示。

HTML圖文的編輯，咱們這裏是用SummerNote插件來進行處理，這個控件的使用很是方便，另外經過修改onImageUpload回調函數，能夠實現圖片的隨時上傳處理。

        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]);
                    }
                }
            });
        }
        //提交文件到服務器處理
        function sendFile(file) {
            data = new FormData();
            data.append("file", file);
            //增長額外的參數
            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  
                }
            });
        }

三、小程序整合Web API接口實現數據展現

上面介紹了管理後臺的數據維護，咱們就是基於上面的數據模型，在小程序上實現商品數據的展現的。

下圖是小程序的商品展現首圖，其中包括了頂部Banner欄目、中間的商品分類、底部的商品信息展現幾部分。

其中Banner欄目的是一個swiper界面組件，商品類型使用了scroll-view來展現，而商品信息則是使用普通的View處理便可。

整個界面的視圖部分代碼以下所示。

<!--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>

其中小程序的數據是經過後臺的JS文件實現數據的加載綁定的。

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {    
    var that = this;

    this.getCategorys();
    this.getTopBanners();
    this.getGoodsList(0);
  },

其中上面的幾個函數就是分別經過Web API來獲取對應的JSON數據的，函數代碼以下所示。

 //獲取頂部Banner的數據
  getTopBanners : function() {
    //獲取產品列表
    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
    });
    //獲取產品列表
    var url = config.product_api;//'http://localhost:27206/api/Framework/Product/list'
    var data = {
      type: categoryId,
      status: '', //全部狀態
      pageindex: 1,
      pagesize: 50
    }
    app.utils.get(url, data).then(res => {
      this.setData({
        goods: res.list,
        loadingMoreHidden: false,
      })
    });
  },

若是你對上面請求數據的代碼

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

有疑問，你能夠參考個人隨筆《在微信小程序的JS腳本中使用Promise來優化函數處理》瞭解Promise插件的使用過程，這裏經過引入Promise以及JS的模塊化方式，能夠直接重用這些通用的JS函數，

而詳細部份內容，則是須要滾動展現商品的多個圖片，另外還須要展現詳細的HTML內容，HTML內容的展現使用富文本轉化插件wxParse便可實現，這部分在隨筆《在微信小程序中使用富文本轉化插件wxParse》有詳細的使用介紹。

商品詳細內容的視圖代碼以下所示。

<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>

其中後臺的JS主要負責詳細信息的獲取和綁定工做。

  onLoad: function (e) {
    var that = this;

    //獲取商品詳細信息
    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);
    });
  },