uniapp基本使用
Uni-app
- 介绍项目目录和文件作用
- 全局配置和页面配置
-
- 通过globalStyle进行全局配置
- 配置tabbar
- Condition启动模式配置
- 组件
-
- text文本组件的用法
- view 文本组件的用法
- uni-app中的样式
- 数据绑定
- 点击事件
- uni声明周期
-
- 应用的生命周期
- 页面的生命周期
-
- 下拉刷新
- 点击下拉刷新
- 上拉触底加载
- 网络请求
- 本地缓存
- 图片上传与预览
- 跨端兼容
- 页面跳转
- 组件
- 组件传值
-
- 父->子组件传值
- 子->父组件传值
- 兄弟组件传值
- uni 组件的使用
我要来一波全栈了，哈哈
官网： https://uniapp.dcloud.io/
介绍项目目录和文件作用
pages.json 文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原声的导航栏、地步的原生tarbar等
manifest.json 文件是应用的配置文件。用于指定应用的名称、图标、权限等
App.vue 是我们的根组件。所有的页面都是在App.vue 下进行切换的，是页面入口文件，可以调用应用的生命周期函数
main.js是我们的项目入口文件。主要的作用是初始化vue实例并使用需要的插件
uni.scss 文件的用途是为了方便整体控制应用的风格。比如按钮的颜色、边界风格，uni.css文件里预置里一批scss变量预置
unpackage就是打包目录，在这里有各个平台的大包文件
pages所有的页面存放目录
components组件存放目录
全局配置和页面配置
通过globalStyle进行全局配置
用于设定应用的状态栏、导航条、标题、窗口背景色等
属性，类型，默认值，描述
navigationBarBackgroundColor：HexColor，#F7F7F7 ，导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle：String，white，导航栏标题颜色，仅支持black和white
navigationBarTitleText：String， ， 导航栏标题文字内容
backgroundColor：HexColor，#ffffff，窗口的背景色
backgroundTextStyle：String，dark，下拉loading的样式，只支持dark/light
enablePullDownRefresh： Boolean，false，是否开启下拉
onReachBottomDistance： Number ，50，页面上拉触底事件距离页面底部距离，单位只支持px
配置tabbar
如果应用是一个多tab应用，可以通过tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页
Tips：
- 当设置position为top时，将不会显示icon
- tabBar中的list是一个数组，只能配置最少2个，最多5个tab，tab按数组的顺序排序
属性说明：
属性 类型 必填 默认值 描述 平台差异说明
color，HexColor，是，，tab上的文字默认颜色
selectedColor，HexColor，是，，tab上的文字选中的颜色
backgroundColor，HexColor，是，，tab的背景色
borderStyle，String，否，black，tarbar上边框的颜色，仅支持balck/white
list，Array，是，，tab的列表，至少2个，最多5个
position,String,否，bottom，bottom/top,只支持微信小程序
list属性
属性： 类型，必填，说明
pagePath：String，是，页面路径
text：String，是，文字按钮
iconPath：String，否，图片路径
selectedIconPath：String，否，选中时文字路径
Condition启动模式配置
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后 ，用户点击所有打开的页面
属性，类型，是否必填，描述
current，Number，是，当前激活的模式，list节点索引值
list，Array，是，启动模式列表
list说明
name，String，是，启动模式名称
path，String，是，启动页面路径
query，String，否，启动参数，onload函数获取
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}, {
"path": "pages/my/my",
"style": {
"enablePullDownRefresh": false
}
}, {
"path": "pages/list/list",
"style": {
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/detail/detail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "居然之家",
"navigationBarBackgroundColor": "#999",
"backgroundColor": "#F8F8F8",
"backgroundTextStyle": "light",
"enablePullDownRefresh": true
},
"tabBar": {
"selectedColor": "#40",
"list": [{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/home.png",
"selectedIconPath": "static/home_s.png"
},
{
"text": "列表",
"pagePath": "pages/list/list",
"iconPath": "static/list.png",
"selectedIconPath": "static/list_s.png"
},
{
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "static/me.png",
"selectedIconPath": "static/me_s.png"
}
]
},
// 在小程序中可查看
"condition": {
"current": 0,
"list": [
{
"name": "详情页",
"path": "pages/detail/detail",
"query": "id=1"
}
]
}
}
组件
text文本组件的用法
属性，类型，默认值，必填，说明
selectable，boolean，false，否，是否可选
space，string，-，否，显示连续空格，可选参数：ensp（中文字符空格一半大小），nbsp（中文字符空格大小），emsp（根据字体设置的空格大小）
decode，boolean，false，否，是否解码（$amp;$gt;等）
- 除了文本节点其他节点都无法长按选中
view 文本组件的用法
属性 ， 类型， 默认值，必填，说明
- hover-class,string,none,否，指定按下去的样式类，当hover-class=“none”时，没有点击态效果
- hover-stop-propagation，boolean，false，否，指定是否阻止本节点的祖先节点出现点击态
- hover-start-time，number，50，否，按住后多久出现点击态，单位毫秒
- hover-stay-time，number，400，否，手指松开后点击态保留时间，单位毫秒
uni-app中的样式
- rpx 即响应式px，一种根据屏幕自适应的动态单位，以750宽的屏幕为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大
- 使用@import语句可以导入外联样式表，@import后跟需要倒入的外联样式表的相对路径，用；表示语句结束
- 支持基本常用的选择器class，id，element等
- 在uni-app中不能使用*选择器
- page相当于body节点
- 定义在App.vue中的样式为全局样式，作用于每个页面，zaipages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App-vue中相同的选择器
- uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意一下几点：
- 字体文件小于40kb，uni-app会自动将其转化为base64格式
- 字体文件大于等于40kb，需要开发者自己转换，否则使用将不生效
- 字体文件的引用路径推荐使用以 ～@ 开头的绝对路径
@font-face{
font-family:test1-icon;
src:url('~@/static/iconfont.ttf');
}
数据绑定
- 插值表达式 {{}}
- v-bind
<image v-bind:src="url" mode="scaleToFill">image>
<image :src="url" mode="">image>
- v-for
<view v-for="(item,index) in list" :key="item.id">
<view>
name: {{item.name}},age:{{item.age}}
view>
view>
点击事件
<view @click="clickHandler(20,$event)">
点我试试
view>
clickHandler(num,e) {
console.log(num,e);
}
uni声明周期
应用的生命周期
生命周期的概念：一个对象从创建，运行，销毁的整个过程别称为生命周期
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
在App.vue中配置
函数名，说明
onLaunch：初始化完成时触发（只会触发一次）
onShow: 后台进入前台
onHide：前台进入后台
onError：报错触发
页面的生命周期
onLoad：页面加载
onShow：监听页面显示
onReady：监听页面初次渲染完成
onHide：监听页面隐藏
下拉刷新
在页面内设置下拉刷新，把全局配置去掉
onPullDownRefresh() {
console.log(111)
let data = {
id:this.list.length+1,
name:Math.random(100)*1000,
age:16
}
this.list.push(data)
uni.stopPullDownRefresh()
},
点击下拉刷新
clickFlush(){
uni.startPullDownRefresh()
}
上拉触底加载
onReachBottom() {
let data = [
{
id:1,
name:"张三",
age:13
},
{
id:2,
name:"李四",
age:14
},
{
id:3,
name:"王五",
age:15
},
{
id:4,
name:"找流",
age:16
}
]
this.list = this.list.concat(data)
},
同时可以配置距离底部多少距离加载：
{
"path": "pages/list/list",
"style": {
"onReachBottomDistance": 200
}
}
网络请求
以get方法为例
uni.request({
url: "http://localhost:8080/user/list",
method: "GET",
success(res) {
console.log(res)
}
})
本地缓存
setStore(){
// uni.setStorage({
// key:'id',
// data:90,
// success(res) {
// console.log('存入成功',res)
// }
// })
uni.setStorageSync("id",80)
},
getStore(){
// uni.getStorage({
// key:'id',
// success(res) {
// console.log("获取成功",res)
// },
// fail(res) {
// console.log("获取失败",res)
// }
// })
let res = uni.getStorageSync('id')
console.log(res == '')
},
removeStore(){
// uni.removeStorage({
// key:'id',
// success(res) {
// console.log('删除成功',res)
// }
// })
uni.removeStorageSync("id")
},
图片上传与预览
<template>
<view>
<button type="primary" @click="chooseImg"> 上传图片 button>
<image v-for="item in imgArr" :src='item' @click="previewImg(item)">image>
view>
template>
<script>
export default {
data() {
return {
imgArr:[]
};
},
methods: {
chooseImg(){
uni.chooseImage({
count:5,
success:res=>{
console.log(res)
this.imgArr = res.tempFilePaths
}
})
},
previewImg(current){
uni.previewImage({
current:current,
urls:this.imgArr,
loop:true,
indicator:'number'
})
}
}
}
script>
跨端兼容
条件编译是用特殊的注释作为标记，在编译的时候根据这些特殊的注释，将注释里的代码编译道不同平台
写法：以 #ifdef 平台名 开头，以 #endif 结尾
平台标识
值，平台
APP-PLUS，5+App
H5，H5
MP-WEIXIN，微信小程序
MP-ALIPAY，支付宝
MP-BAIDU，百度
MP-TOUTIAO，头条
MP-QQ，QQ
MP，微信，支付宝，百度，头条，QQ
<view >
h5页面显示
view>
<view >
微信小程序页面显示
view>
xml，js，css根据不同的注释样式 都可以使用
页面跳转
<template>
<view>
<view>导航跳转学习</view>
<navigator url="/pages/detail/detail">跳转到详情页</navigator>
<navigator url="/pages/index/index" open-type="switchTab" >跳转至首页</navigator>
<navigator url="/pages/detail/detail" open-type="redirect">跳转到详情页</navigator>
<view >编码形式跳转</view>
<button @click="navigateTo">跳转到详情页</button>
<button @click="switchTabTo">跳转到首页</button>
<button @click="redirectTo">跳转到详情页</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
onUnload() {
console.log("页面卸载了")
},
methods:{
navigateTo(){
uni.navigateTo({
url:'/pages/detail/detail'
})
},
switchTabTo(){
uni.switchTab({
url:'/pages/index/index'
})
},
redirectTo(){
uni.redirectTo({
url:'/pages/detail/detail'
})
}
}
}
</script>
<style lang="scss">
</style>
组件
同vue，
- 建立组件
<template>
<view>
test组件
view>
template>
<script>
export default {
name:"test",
data() {
return {
};
}
}
script>
<style>
style>
- 导入并注册
import test from '@/components/test/index.vue';
export default {
components: {test},
data() {
return {
title: '首页'
}
}
}
- 使用
<test>test>
组件传值
父->子组件传值
基于已经注册的test组件
父：
子：
props:[‘msg’],
直接使用即可： test组件 : msg : {{msg}}
子->父组件传值
子组件：
toParent(){
this.$emit(“myNum”,20)
}
父组件：
接收子组件的值： {{num}}
getNum(num){
this.num = num
},
兄弟组件传值
a -> b 传值
在被传值的组件中的create方法里注册全局事件：
b
created() {
// 注册全局事件
uni.$on('updateNum',num=>{
this.num += num
})
},
a 组件可以使用（点击）事件触发
transValue(){
// 调用全局事件
uni.$emit('updateNum',10)
}
uni 组件的使用
https://uniapp.dcloud.io/ 打开网址，找到组件
点击，安装组件到指定项目，参考案例即可使用
黑马商城： https://blog.csdn.net/li520_fei/article/details/124053891