LinUI学习5 自定义组件的使用

LinUI学习5 自定义组件的使用

LinUI采用的是自定义组件，因此我们需要知道如何使用自定义组件。

1、导入所需要的LinUI组件

因为LinUI组件大小为500kb左右，因此这里采用全部导入的方式

首先需要使用npm下载详情见之前的学习笔记1

或者参考官网链接：https://doc.mini.talelin.com/start/

在所需要的页面json中引入对应的组件，

也可以直接在app.json中直接引入

示例：

  "usingComponents": {
    "l-gird":"/miniprogram_npm/lin-ui/grid/index",
    "l-gird-item":"/miniprogram_npm/lin-ui/grid-item/index"
  },

 

2、获取组件所需要的数据

在model文件夹下新建一个category.js文件用于请求数据（http请求已经封装好，详见前面的笔记）

const { Http } = require("../utils/http");
class Category {
  static async getGridCategory(){
  return await Http.request({
    url:`category/grid/all`
  })
  }
}
export{
  Category
}

3、编写自定义组件（以gird宫格为例）

我们需要在LinUI提供的组件的基础上再自定义生成一个组件

因此我们需要

新建一个components文件夹用于存放自定义的组件

在文件夹内新建一个category-grid文件夹 并在此文件夹下新建component（一般命名为index）

并在对应的文件夹下修改，这里css没有定义

js：

// components/category-grid/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  grid:Array
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

wxml：

<view class="container">
  <l-grid>　　　　
    <block wx:for="{{grid}}">
      <l-grid-item>
        <view>
          <image src="{{item.img}}">
          </image>
          <text>
            {{item.title}}
          </text>
        </view>
      </l-grid-item>
    </block>
  </l-grid>
</view>

 4、使用自定义组件

我们在第三步的时候已经自定义了一个category-grid组件

示例：我们需要在home.wxml调用到我们第三步骤定义的组件

因为只有该页面使用到category-grid组件所以只需要在home.json中定义

  "usingComponents": {
    "s-category-grid":"/components/category-grid/index"
  }

在js中使用封装好的http请求

 data: {

    grid:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    this.initAllData()

  },
  async initAllData() {

    const grid = await Category.getGridCategory()
      
    this.setData({

      grid:grid
    })
  },

在wxml中直接调用即可使用该组件

  <s-category-grid grid="{{grid}}">
  </s-category-grid>