javaweb全栈课第一周

265 阅读2分钟

本周主要内容如下

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