javaweb全棧課第一週

本週主要內容以下

1. 如何對文件進行分層
2. http請求的完美封裝
3. Lin-ui的安裝使用
4. sale、banner、宮格模塊

js文件分層

1. 頁面級別js： 視圖層和業務層中間的橋樑，即中間層
2. MAC 中的 C層。C層不該該寫業務。Model層寫業務
3. Model => 下面找業務對象
   1. theme
   2. banner
   3. spu
   4. sku
   5. address
   6. user

小程序中Http請求的完美封裝

這裏會涉及到的文件以下

• promisic 文件，把小程序的接口所有封裝成async、await

// utils -> util.js
const promisic = function (func) {
    return function (params = {}) {
        return new Promise((resolve, reject) => {
            const args = Object.assign(params, {
                success: (res) => {
                    resolve(res);
                },
                fail: (error) => {
                    reject(error);
                }
            });
            func(args);
        });
    };
};

export {
    promisic
}
複製代碼

• Http層，調用promisic層，對wx的http請求進行封裝

import {config} from "../config/config";
import {promisic} from "./util";

class Http {
    static async request({url, data, method='GET'}) {
        const res = await promisic(wx.request)({
            url:`${config.apiBaseUrl}${url}`,
            data,
            method,
            header: {
                appkey: config.appkey
            }
        })
        return res.data
    }
}

export {
    Http
}
複製代碼

• Model層，處理業務模塊的邏輯,這裏以Banner接口調用爲例：

import {Http} from "../utils/http";

class Banner {
    static locationB = 'b-1'
    static async getHomeLocationB() {
        return await Http.request({
            url: `banner/name/${Banner.locationB}`
        })
    }
}

export {
    Banner
}
複製代碼

• View層調用Model層，獲取數據。使用方法以下：

onLoad: async function (options) {
  this.initAllData();
},

 async initAllData() {
   const bannerB = await Banner.getHomeLocationB();
   this.setData({
     bannerB
   })
 },
複製代碼

Lin-ui的安裝、主題色、按需加載

npm i Lin-ui

Octotree: Chrome 插件

主題色更改&按需加載

全局組件的使用

// app.json
"usingComponents": {
    "l-gird": "/miniprogram_npm/lin-ui/grid/index"
 }
複製代碼

設計和使用自定義組件的原則

1. 靈活性和易用性找到平衡點
2. 確認組件的意義
   1. 避免重複樣式
   2. 避免重複骨架
   3. 業務邏輯和行爲的封裝
3. 靈活性
   1. 外部樣式類（小程序）
   2. slot插槽
   3. 業務邏輯改造=>behavior
4. 作組件的時候能不用固定的高和寬就不要用高和寬

使用lin-ui宮格實現6宮格效果

1. 自定義組件category-grid, 引入lin-ui的宮格
2. home頁面調用category組件

說明：lin-ui的宮格保留靈活性，而自定義的組件增強了宮格的方便性。

代碼：

// app.js 全局引入組件
"usingComponents": {
    "l-grid": "/miniprogram_npm/lin-ui/grid/index",
    "l-grid-item": "/miniprogram_npm/lin-ui/grid-item/index"
  }
複製代碼

// category-grid 目錄
// index.js
// components/category-grid/index.js
Component({
  // 從父組件接受grid數據
  properties: {
    grid: Array
  }
})
複製代碼

/** components/category-grid/index.wxml **/
<view class="grid-container">
    <l-grid l-class="inner-grid-container">
        <block wx:for="{{grid}}">
            <l-grid-item key="{{index}}" slot="{{index}}">
                <view class="grid-item">
                    <image class="img" src="{{item.img}}"></image>
                    <text class="text">{{item.title}}</text>
                </view>
            </l-grid-item>
        </block>
    </l-grid>
</view>

css略...
複製代碼

// home 調用
<view>
    <l-grid grid="{{grid}}"></l-grid>
</view>
// 
複製代碼