uview的安装和功能

组件-内置样式

组件-下载方式安装

1. 下载 uview-ui 目录
2. 引入

// main.js
import uView from "uview-ui";
Vue.use(uView);

/* uni.scss */
@import 'uview-ui/theme.scss';

/* App.vue */
<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>
1
2
3
4
5
6
7
8
9
10
11
12

3. 配置 easycom 组件模式

// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},

	// 此为本身已有的内容
	"pages": [
		// ......
	]
}
1
2
3
4
5
6
7
8
9
10
11

4. vue.config

module.exports = {
	// 配置路径别名
	configureWebpack: {
		devServer: {
			disableHostCheck: true
		}
	}
}

1
2
3
4
5
6
7
8
9

组件-内置样式

• 文字省略
• 重置按钮样式
• 断点形式
• 边框(具有 ios 兼容)
  u-border

组件-注意事项

• 背景色问题

• 赋值设备信息的陷阱
  设备高度问题

• 小程序主包太大无法预览和发布

• ::v-deep 写法问题

Uview js 工具

• toast() 提示工具
• os() 返回平台信息 andriod or ios
• sys() 设备信息
• http 请求封装教程
• api 集中管理
• button 节流效果
• 对象深度克隆
• 对象深度合并
• 时间格式化
• 路由封装
• 数组乱序
• 生成全局唯一标识
• 颜色转换
• 颜色值
• 对象转 url 参数
• 规则校验
• MD5 加密
• 随机数值
• 去除空格
• 获取 dom 节点,改变滚动条位置
• 小程序分享

丰富的模板

指南

• 扩展图标 iconfont
• 自定义主题
• 全局变量
  globalData
  vuex