本周主要内容如下
- 如何对文件进行分层
- http请求的完美封装
- Lin-ui的安装使用
- sale、banner、宫格模块
js文件分层
- 页面级别js: 视图层和业务层中间的桥梁,即中间层
- MAC 中的 C层。C层不应该写业务。Model层写业务
- Model => 下面找业务对象
- theme
- banner
- spu
- sku
- address
- 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"
}
设计和使用自定义组件的原则
- 灵活性和易用性找到平衡点
- 确认组件的意义
- 避免重复样式
- 避免重复骨架
- 业务逻辑和行为的封装
- 灵活性
- 外部样式类(小程序)
- slot插槽
- 业务逻辑改造=>behavior
- 做组件的时候能不用固定的高和宽就不要用高和宽
使用lin-ui宫格实现6宫格效果
- 自定义组件category-grid, 引入lin-ui的宫格
- 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>
//