记录下uni-ui项目中引入ColorUI的方法

引言

在uni-app开发中，很多开发者都会选择使用uni-ui组件库，这个组件库提供了丰富的UI组件，不仅能极大的提高开发效率，而且还可以保证UI的一致性。然而，虽然uni-ui组件库已经包含了很多UI组件，但是开发者有时还需要加入其他的UI框架，比如ColorUI。在这篇文章中，我们将介绍如何将ColorUI集成到uni-ui项目中。

下载ColorUI资源

首先，我们需要下载ColorUI的资源。我们可以在Github上找到ColorUI的源代码，打开Github页面（https://github.com/weilanwl/ColorUI），然后将资源下载到本地。我们可以将资源解压缩到项目的根目录下的static目录中。

/static/colorui/
├── css
│   ├── colorui.css
│   └── icon.css
├── font
│   ├── iconfont.eot
│   ├── iconfont.svg
│   ├── iconfont.ttf
│   └── iconfont.woff
└── js
    ├── colorui.js
    └── jquery.js

引入ColorUI样式

了解了ColorUI的资源之后，我们要将ColorUI的样式表引入到uni-ui项目中。我们可以在项目的App.vue文件中做这件事情。打开App.vue文件，然后在style标签中添加以下代码。

<style lang="scss">
@import "static/colorui/css/icon.css";
@import "static/colorui/css/colorui.css";
</style>

引入ColorUI脚本

给页面加上样式表之后，紧接着我们要加入ColorUI的脚本。我们同样可以在App.vue文件中加入脚本。打开App.vue文件，然后在script标签中添加以下代码。

<script>
import Vue from 'vue'
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom', cuCustom)
import './static/colorui/js/jquery.js'
import './static/colorui/js/colorui.js'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
</script>

引用ColorUI组件

最后，我们要在uni-ui项目中使用ColorUI的组件。使用方法和uni-ui的组件类似。我们可以在页面的vue文件中引入ColorUI的组件，然后使用它。

以下代码举例说明如何在页面中使用colorui-panel组件。

<template>
  <view class="content">
    <cu-custom bgColor="bg-gradual-orange"></cu-custom>
    <view class="cu-bar bg-white shadow">
      <view class="action" @click="onBack">
        <text class="cuIcon-back"></text>
      </view>
      <view class="content">{{title}}</view>
      <view class="action"></view>
    </view>
    <colorui-panel title="panel标题" :isView="true">
      <view>panel内容。。。</view>
    </colorui-panel>
  </view>
</template>
<script>
  import cuCustom from '@/colorui/components/cu-custom.vue'
  import coloruiPanel from '@/colorui/components/colorui-panel.vue'
  export default {
    components: {cuCustom, coloruiPanel},
    data() {
      return {
        title: 'ColorUI组件'
      }
    },
    methods: {
      onBack() {
        uni.navigateBack()
      }
    }
  }
</script>

代码解析

以上代码中，我们首先引入了colorui-panel组件并命名为coloruiPanel。

import coloruiPanel from '@/colorui/components/colorui-panel.vue'

组件中的title属性用来设置panel的标题，isView属性用来设置panel是否作为一个view来使用。在组件中可以根据isView属性来判断是否需要使用view包裹panel。isView属性默认值为false，即需要使用view包裹。

  <colorui-panel title="panel标题" :isView="true">
    <view>panel内容。。。</view>
  </colorui-panel>

除了colorui-panel组件，在uni-ui项目中我们可以引入ColorUI的任何组件。在引用组件时，只需要将import语句替换成需要的组件即可。

总结

通过本文，我们了解到了在uni-ui项目中集成ColorUI的步骤。首先我们需要下载ColorUI的资源，然后在App.vue文件中引入样式表和脚本，在页面中使用ColorUI的组件。希望这篇文章能帮助到uni-app开发者在项目中使用ColorUI。