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>
// 
复制代码