前言:
对uin-app的资料进行整理,这里说说他支持的框架资料。
官方入口:入口
相关资料:
一、ColorUI-高颜值,高效率的小程序组件库
git源码:点我
相关项目入口 - 一个基于colorui的商城项目:点我
实现步骤:
1、下载项目,找到这个colorui 文件夹,放到项目中
2、App.vue 引入关键Css main.css icon.css
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
....
</style>
3、main.js
引入 cu-custom
组件。
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
4、page.vue
页面可以直接调用了
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
参数 | 作用 | 类型 | 默认值 |
---|---|---|---|
bgColor | 背景颜色类名 | String | '' |
isBack | 是否开启返回 | Boolean | false |
bgImage | 背景图片路径 | String | '' |
slot块 | 作用 |
---|---|
backText | 返回时的文字 |
content | 中间区域 |
right | 右侧区域(小程序端可使用范围很窄!) |
实现效果:点我查看
二、uView2.0 ,uni-app中的框架,跟vue的ivew/element很像
1、安装
Hbuilder X方式
如果您是使用Hbuilder X开发的用户,您可以在uni-app插件市场通过uni_modules的形式进行安装,
此安装方式可以方便您后续在uni_modules对uView进行一键升级。
在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可。
注意: 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。
下载地址:uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场
NPM方式
在项目根目录执行如下命令即可:
// 如果您的根目录没有package.json文件的话,请先执行如下命令:
// npm init -y
npm install uview-ui
// 更新
// npm update uview-ui
注意: 此安装方式必须要按照npm方式安装的配置中的说明配置了才可用,且项目名称不能有中文字符
2、配置
(前提)如果没有scss请安装
// 安装node-sass
npm i node-sass -D
// 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D
安装配置
由于uView支持npm
和下载
的方式安装,二者配置几乎一致,因为某些平台的兼容性,在配置easycom稍有不同,为了不造成混淆,这里将两种 方式分开说明:
#默认单位配置2.0.12
在uView1.x中,组件参数如果为数值的话,默认为rpx
单位,但是rpx
在平板上会导致尺寸超大,为了更高的可用性,所以uView2.x将单位默认改为px
,如果您出于 某些需求,需要将单位改为rpx
,可以在main.js
中进行如下配置即可:
......
// main.js,注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'
......
3、使用
通过npm和下载方式的配置之后,在某个页面可以直接使用组件,无需通过import
引入组件。
<template>
<u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
export default {
data() {
return {
list: [{
text: '点赞',
color: 'blue',
fontSize: 28
}, {
text: '分享'
}, {
text: '评论'
}],
show: true
}
}
}
</script>