# uni-app组件库学习
安装HBX的时候，安装三个插件：
内置浏览器
sass 一些组件库里的css时使用的sass写法
prettier 格式化代码 组件标签中有很多属性 一行显示不了可以折行显示
# uni-app组件库
uni-app式DCloud提供的一个跨段ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
uni-app理论上可以使用基于vue开发的组件库。但是如果是跨端应用，其他UI组件可能存在兼容性问题。
uni-ui毕竟是官方出的，兼容性好些，使用第三方的组件库 需要使用npm安装 并引入注册使用
uni-ui生成的uni-module遵循easycom机制，无需手动导入使用
# 徽章
小脚表 提示数字的
<view style="margin-top: 20rpx;">
<!-- :is-dot="true" 缩写is-dot -->
<uni-badge is-dot text="25" type="error" size="normal" absolute="rightTop">
<button type="primary" size="mini">收件信息</button>
</uni-badge>
</view>
组件参数的数据类型不对报错
解决方案：在组件传参的时候，注意如果是非字符串类型的值，需要通过：号绑定。绑定后js代码会解析处理。只有JS里才有数据类型的概念
# 卡片组件
<template>
<view>
<!-- ucard -->
<uni-card>
<!-- text文本样式的容器 -->
<text>这是一个基础卡片样式</text>
</uni-card>
<!-- 标题和额外信息的 -->
<uni-card :isFull="true" title="标题文字" extra="额外信息" sub-title="副标题" thumbnail="/static/uni.png">
<!-- text文本样式的容器 -->
<text>这是一个基础卡片样式</text>
</uni-card>
<!-- 图片覆盖 插槽 -->
<!-- <uni-card cover="/static/uni.png"> -->
<uni-card cover="/static/uni.png">
<image slot="cover" style="width: 100%;" src="/static/uni.png" mode=""></image>
<text>这是一个带封面图片和底部操作栏的样例,这里使用了插槽的写法</text>
<view slot="actions" class="card-actions">
<view class="card-actions-item" @click="actionsClick('分享')">
<uni-icons type="pyq" size="20" color="#999"></uni-icons>
<text class="card-actions-item-text">分享</text>
</view>
<view class="card-actions-item" @click="actionsClick('点赞')">
<uni-icons type="pyq" size="20" color="#999"></uni-icons>
<text class="card-actions-item-text">点赞</text>
</view>
<view class="card-actions-item" @click="actionsClick('收藏')">
<uni-icons type="heart" size="20" color="#999"></uni-icons>
<text class="card-actions-item-text">收藏</text>
</view>
<view class="card-actions-item" @click="actionsClick('投币')">
<uni-icons type="chatbubble" size="20" color="#999"></uni-icons>
<text class="card-actions-item-text">投币</text>
</view>
</view>
</uni-card>
</view>
</template>
<script>
export default {
// 方法
methods:{
actions(){
console.log(a)
}
}
};
</script>
<style scoped>
.card-actions{
display: flex;
flex-direction: row;
justify-content: space-around;
.card-actions-item-text{
font-size: 18px;
}
}
</style>
# uni-app的网络请求
客户端发送网络请求 通过JS代码发送请求.底层是xmlHttpRequest对象.
原生:
xmlHttpRequestXHRjQuery: $.get $.post $.ajax
Vue:axios微信小程序:
wx.request
uni-app:uni.request
# 案例:通过card布局站视新闻信息
接口地址:
https://api.apiopen.top/getWangYiNews
发送数据 查看返回数据 存数据到本地 站视数据到页面上
发请求=>拿数据=>村本地=>做展示
<template>
<view>
<!--4.做展示-->
<!-- v-for循环遍历标签 -->
<!-- :属性动态绑定 绑定后的值会进行JS的处理 解析变量 -->
<uni-card v-for="(item,index) in data" :key = "index" :cover="item.image">
<view style="color: #000000;font-size: 1.2em; font-weight: bold;">{{item.title}}</view>
<view style="color: #000000;font-size: 1.1em;">{{item.passtime}}</view>
</uni-card>
</view>
</template>
<script>
export default {
// 组件 状态 数据
data() {
// 页面模板中展示的数据 需要在这里存储
return {
// 初始化数据为空
data: null
}
},
// 组件挂在时
mounted() {
// 调用请求方法
this.getData()
},
methods:{
// 1.发请求
getData(){
// ureq
uni.request({
// 接口地址
url:'https://api.apiopen.top/getWangYiNews',
// 请求方法
method:'GET',
// 请求携带参数
data:{},
// 请求成功后的回调
success:res=>{
// 2.拿数据
console.log(res)
// 3.存本地 根据需要的数据结构存
this.data = res.data.result
},
// 请求失败的回调
fail:(err)=>{
console.log(err)
},
// 执行完成的回调
complete:()=>{}
})
}
}
}
</script>
<style scoped>
</style>
# 折叠栏
菜单打开和关闭的效果
<template>
<view>
<!-- 折叠栏ucoll -->
<!-- :accordion='true' 缩写写法accordion -->
<uni-collapse accordion>
<uni-collapse-item :open="true" title="服务器端技术" thumb="/static/logo.png">
<view>数据库MySQL</view>
<view>Node.js</view>
</uni-collapse-item>
<uni-collapse-item title="客户端技术" thumb="/static/c1.png">
<view>HTML</view>
<view>CSS</view>
<view>JavaScipt</view>
</uni-collapse-item>
<uni-collapse-item title="框架" thumb="/static/c2.png">
<view>Vue</view>
<view>React</view>
<view>Angular</view>
</uni-collapse-item>
</uni-collapse>
</view>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
# 案例 英雄列表 使用collapse折叠栏
接口地址
https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?v=25
接口地址：现在浏览器测试是否可以打开 如果打不开，咨询网络管理员，或者换个网络试试 或者去英雄联盟观官网重新获取到对应的接口
<template>
<view v-if="data">
<uni-collapse :accordion="true">
<uni-collapse-item v-for="(item,index) in data" :key="index" :title="item.title" :thumb="`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`">
<view>英文名字：{{item.alias}}</view>
<view>昵称：{{item.keywords.split(',')[0]}}</view>
<button type="primary" size="mini" @click="playAudio(item.banAudio)">ban</button>
<button type="warn" size="mini" @click="playAudio(item.selectAudio)">pick</button>
</uni-collapse-item>
</uni-collapse>
</view>
</template>
<script>
export default {
data() {
return {
data: null,
// 播放对象 只存在一个
audio:uni.createInnerAudioContext()
}
},
mounted() {
this.getDate()
},
methods: {
playAudio(url){
console.log(url);
// 创建播放音频的对象
// 音频的地址
this.audio.src = url;
// 停止
this.audio.stop();
// 播放
this.audio.play();
},
getDate() {
uni.request({
// 接口地址 alt+鼠标左键点击 查看浏览器是否可以正常访问
url: 'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?v=25',
method: 'GET',
data: {},
success: res => {
console.log(res)
this.data = res.data.hero
},
fail: (err) => {console.log(err)},
complete: () => {}
});
}
},
}
</script>
<style scoped>
</style>
# 日期格式化
在接口返回数据中，时间格式是时间戳[unix时间戳1970年开始]，JS时间戳ms
<template>
<view>
<!-- udate 日期格式化 -->
<!-- :动态解析变量 -->
<uni-dateformat :date="time" />
<!-- 自定义格式 -->
<br>
<uni-dateformat :date="time" format="yyyy年MM月dd日 hh:mm"/>
</view>
</template>
<script>
export default {
data() {
return {
// 获取时间戳
time: new Date().getTime()
}
},
}
</script>
<style scoped>
</style>
# 通告栏
一般在应用顶部，会通知用户相关信息。uni-ui将此封装称为一个组件。通过参数传递的方式。就可以实现一些效果
<template>
<view>
<!-- unotice 通告栏 -->
<uni-notice-bar single text="学子商城uni-app版本正在开发中,还在学习中..." scrollable showIcon showClose :speed="50" background-color="#ed95e6" color="#000"></uni-notice-bar>
</view>
</template>
<script>
export default {
}
</script>
<style scoped>
/* /deep/ 传递css属性 穿透 */
/deep/.uni-noticebar__content-text{
/* css 优先使用 */
font-size: 38rpx;
}
/deep/.uni-noticebar{
height: 60px;
}
</style>
# 列表
列表是页面布局中常用一种方式。展示多个相同的条目，多条数据结构
<template>
<view>
<!-- ulist 列表 -->
<uni-list>
<!-- click 点击效果 showArrow -->
<uni-list-item title="账号和安全" click showArrow></uni-list-item>
<!-- rightText 右侧文字 -->
<uni-list-item title="青少年模式" rightText="未开启"></uni-list-item>
<!-- note 描述 第二行文字 -->
<uni-list-item title="微信安全中心" note="如果遇到微信被盗,无法登录的情况,可以去安全中心申诉"></uni-list-item>
<uni-list-item title="扫一扫" thumb="/static/logo.png" showArrow clickable></uni-list-item>
<uni-list-item title="雷达添加好友" thumb="/static/logo.png" thumbSize="lg" showArrow clickable></uni-list-item>
<!-- 扩展图标 -->
<uni-list-item title="10000" showExtraIcon :extraIcon="{ color: '#00aaff', size: '24', type: 'qq' }"></uni-list-item>
<uni-list-item title="10000" showExtraIcon :extraIcon="{ color: '#24da6f', size: '24', type: 'weixin' }"></uni-list-item>
<uni-list-item title="10000" showExtraIcon :extraIcon="{ color: '#dd4f43', size: '24', type: 'weibo' }"></uni-list-item>
<uni-list-item title="请点击下载" showExtraIcon :extraIcon="{ color: '#e6ab26', size: '24', type: 'cloud-download' }"></uni-list-item>
<!-- 如果默认的没有满足需要 可以通过插槽的方式 把item里的结构进行更加详细的划分使用 -->
<!-- 提供了三个插槽 header body footer -->
<!-- 默认是横向排列 -->
<uni-list-item direction="column">
<!-- template没有实际意义 只做为容器包裹使用 -->
<template slot="header">
<view style="background-color: #007AFF;"><text>头部范围头部范围</text></view>
</template>
<template slot="body">
<view style="background-color: #3A3A3A;"><text>身体范围身体范围</text></view>
</template>
<template slot="footer">
<view style="background-color: #18BC37;"><text>尾部范围尾部范围</text></view>
</template>
</uni-list-item>
<!-- switch 开关 -->
<uni-list-item title="蓝牙" :rightText="bluetooth_text" :showSwitch="true" @switchChange="bluetoothChange"></uni-list-item>
</uni-list>
</view>
</template>
<script>
export default {
data() {
return {
bluetooth_text: '关闭'
}
},
methods: {
bluetoothChange(e) {
// 点击切换开关后 会触发传递参数
console.log(e);
this.bluetooth_text = e.value?'开启':'关闭 '
}
},
};
</script>
<style scoped></style>
# 案例：商品列表
功能点：
- 请求接口加载数据 列表形式展示
- 触底加载 翻页
- 下拉刷新 更新最新数据 请求第一页数据
- 回到顶部 当数据列表较长时，从底部快速回到顶部的方式
接口地址：http://www.codeboy.com:9999/data/product/list.php
<template>
<view>
<!-- 做展示 -->
<uni-list v-if="data">
<uni-list-item v-for="(item, index) in data.data" :key="index" title="" note="" clickable showArrow>
<!-- 自定义插槽 将对应的结构插入插槽 -->
<template slot="body">
<view class="cell">
<image :src="`http://www.codeboy.com:9999/${item.pic}`" mode=""></image>
<view>
<view>{{ item.title }}</view>
<view>{{ item.price }}</view>
</view>
</view>
</template>
</uni-list-item>
</uni-list>
</view>
</template>
<script>
export default {
data() {
return {
data: null
};
},
mounted() {
this.getData();
},
methods: {
getData() {
// 发送请求 ureq
uni.request({
url: 'http://www.codeboy.com:9999/data/product/list.php',
method: 'GET',
data: {},
success: res => {
// 拿数据
console.log(res);
// 存本地
this.data = res.data;
},
fail: err => {
console.warn(err);
},
complete: () => {}
});
}
}
};
</script>
<style scoped lang="scss">
.cell {
display: flex;
> image {
// rpx 屏幕宽度分为750份 1px就是一份
width: 180rpx;
height: 180rpx;
// 弹性压缩了图片的大小 如何使其不压缩
// 方法一 设置最小宽度
// min-width: 180rpx;
// 方法二 flex none 不压缩
flex: none;
}
> view {
display: flex;
flex-direction: column;
justify-content: space-between;
> view:first-of-type {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
> view:last-of-type {
color: red;
font-size: 1.1em;
}
}
}
</style>
作业：
1.复习flex弹性布局
2.vue基础语法的复习
3.课堂例子要自己实现
文档必须看一遍