上编文章讲到小程序如何通过npm的方式引入lin-ui
下面将开始讲解，通过lin-ui的方式快速创建自定义组件，以下是自定义组件的创建流程
- 创建自定义组件的目录
- 在自定义组件中引入lin-ui组件【局部引用/全局引用】
- 编写组件的index.wxml/index.wxss，把框架搭建出来
- 调用组件页的js文件请求数据，并setData调用组件页的数据
- 组件页index.js定义数据
- 调用组件页添加组件
- 调用组件页wxml追加组件代码
组件的命令规格：
如果是引用lin-ui的组件，则以”l-“开头
如果是自定义的组件，则以”m-“开头
废话不多说，正式进入自定义组件教程。
菜单
1、创建自定义组件目录
先在项目中创建“components”文件夹，创建自定义“category-gird”文件夹，创建 page 并命名为index”
2、组件引用lin-ui的组件
因为组件使用的是lin-ui,所以命令”l-grid”和”l-grid-item”
2.1 局部引用
在自定义组件的index.json中添加如下代码【components/category-gird】
{
"usingComponents": {
"l-grid":"../../miniprogram_npm/lin-ui/grid/index",
"l-grid-item":"../../miniprogram_npm/lin-ui/grid-item/index"
}
}
2.2 全局引用
在项目的app.json中追加以下代码
"usingComponents": {
"l-grid":"/miniprogram_npm/lin-ui/grid/index",
"l-grid-item":"/miniprogram_npm/lin-ui/grid-item/index"
}
3、编写自定义组件的index.wxml
设置自定义组件的骨架，此处定义是自定义组件的变量grid,则需要在组件的index.js中的properties设置变量。下文将提及。
<view class="container">
<l-grid row-num="3" l-class="inner-container">
<block wx:for="{{grid}}">
<l-grid-item key="{{index}}" slot="{{index}}">
<view>
<image class="img" src="{{item.img}}"></image>
<text class="text">{{item.title}}</text>
</view>
</l-grid-item>
</block>
</l-grid>
</view>
追加index.wxss
/* components/category-gird/index.wxss */
.container{
height:320rpx;
widows: 100%;
display:flex;
flex-direction: row;
}
.inner-container{
width:730rpx;
height:300rpx;
border:1px dashed #DCEBE6;
align-items:center;
justify-content: center;
}
.gird-item{
/* height:200rpx; */
width:200rpx;
display:flex;
flex-direction: column;
align-items:center;
}
.img{
width:60rpx;
height:60rpx;
}4、数据请求及数据绑定
我们创建一个model文件，把数据请求的方法都写在里面，统一规范化
4.1、创建model文件夹，并创建category.js
因为该方式使用到之前封装好的request,所以我们需要先引入http.js（import { Http } from “../../utils/http.js”）才可以使用之前封装的方式。
记得最后把类export
// import { Http } from "../../utils/http";
import { Http } from "../../utils/http.js"
class category{
static locationB='b-1';
static async getGridCategory(){
return await Http.request({
url:`/category/grid/all`
})
}
}
export{
category
}
4.2在home.js中调用category.js中的getGridCategory()，然后绑定数据
思路：
- 引入category.js
- 实力化category:new
- 在data中声明grid这个数组变量，然后调用实例化的getGridCategory方法，最后setData赋值
// pages/home/home.js
import { Banner } from "../model/banner.js";
import { category } from "../model/category.js";
import { Theme } from "../model/theme.js"
Page({
/**
* 页面的初始数据
*/
data: {
WebTitle:"Fox_Test",
topTheme: null,
bannerB:null,
grid:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad : async function(){
this.initAllDate();
},
initAllDate: async function(){
const themeA = await Theme.getHomelocationA();
const bannerB = await Banner.getHomeLocationB();
const grid = await category.getGridCategory();
this.setData({
topTheme:themeA[0],
bannerB:bannerB,
grid:grid
})
}
})
4.3、component的index.js绑定数据
properties: {
grid:{
type:Array,
value:[]
}
},
4.4、在调用组件页的home.json 添加引入此组件
此处建议：因为这个是自定义组件，命名用”m-category-grid”更优。
{
"usingComponents": {
"s-category-grid":"/components/category-gird/index"
}
}
4.5、在home.wxml追加s-category-grid
如果上面home.json引入组件时，命名为” s-category-grid”,则下方home.xml代码需要修改。
<!--pages/home/home.wxml-->
<span>{{WebTitle}}</span>
<view>
<image class="top-theme" src="{{topTheme.entrance_img}}" ></image>
<swiper class="swiper"
indicator-dots="{{true}}"
indicator-active-color="#157658"
autoplay="{{true}}"
circular="{{true}}"
>
<block wx:for="{{bannerB.items}}">
<swiper-item>
<image class="swiper" src="{{item.img}}"></image>>
</swiper-item>
</block>
</swiper>
<s-category-grid grid="{{grid}}"></s-category-grid>
</view>
扩展学习：
如何修改小程序的背景色？
如果想要全局设置背景颜色：在app.wxss中添加以下代码。如果只是某个页面设置背景色，则在对应页面的wxss添加以下代码
下面我们将讲解第四部分，在小程序开发过程中，需要善于利用js的原生方法处理数据问题