uni-app的基本使用

####uni-app的基本使用

课程介绍：

基础部分：

环境搭建
页面外观配置
数据绑定
uni-app的生命周期
组件的使用
uni-app中样式学习
在uni-app中使用字体图标和开启scss
条件注释跨端兼容
uni中的事件
导航跳转
组件创建和通讯，及组件的生命周期
uni-app中使用uni-ui库

项目：黑马商城项目

uni-app介绍官方网页

环境搭建

利用HbuilderX初始化项目

运行项目

介绍项目目录和文件作用

全局配置和页面配置

通过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，详见页面生命周期

创建新的message页面

<template>
<view>
这是信息页面
</view>
</template>

<script>
</script>

<style>
</style>

通过pages来配置页面

pathString配置页面路径styleObject配置页面窗口表现，配置项参考 pageStyle

"pages": [ 、
{
"path":"pages/message/message"
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path":"pages/message/message",
"style": {
"navigationBarBackgroundColor": "#007AFF",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"disableScroll": true,
"h5": {
"pullToRefresh": {
"color": "#007AFF"
}
}
}
}
]

属性	类型	默认值	描述

配置tabbar

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持 black/white	App 2.3.4+ 支持其他颜色值
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

"tabBar": {
"list": [
{
"text": "首页",
"pagePath":"pages/index/index",
"iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text": "信息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text": "我们",
"pagePath":"pages/contact/contact",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
}

condition启动模式配置

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

组件的基本使用

text文本组件的用法

001 - text 组件的属性

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：`ensp`、`emsp`、`nbsp`
decode	boolean	false	否	是否解码

002 - 代码案例

<view>
 <!-- 长按文本是否可选 -->
 <text selectable='true'>来了老弟</text>
</view>

<view>
 <!-- 显示连续空格的方式 -->
 <view>
   <text space='ensp'>来了 老弟</text>
 </view>
 <view>
   <text space='emsp'>来了 老弟</text>
 </view>
 <view>
   <text space='nbsp'>来了 老弟</text>
 </view>
</view>

<view>
 <text>skyblue</text>
</view>

<view>
 <!-- 是否解码 -->
 <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

view视图容器组件的用法

001 - 组件的属性

002 - 代码案例

<view class="box2" hover-class="box2_active">
 <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000":hover-stay-time='2000'>

 </view>
</view>

button按钮组件的用法

001 - 组件的属性

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

002 - 案例代码

<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>

image组件的使用

image

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式

uni-app中的样式

@font-face {
    font-family: test1-icon;
    src: url('~@/static/iconfont.ttf');
}

uni-app中的数据绑定

export default {
 data () {
   return {
     msg: 'hello-uni'
  }
}
}

插值表达式的使用

```
<view>{{msg}}</view>
```

<view>{{ flag ? '我是真的':'我是假的' }}</view>

```
<view>{{1+1}}</view>
```

v-bind动态绑定属性

export default {
 data () {
   return {
     img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
  }
}
}

<image v-bind:src="img"></image>

<image :src="img"></image>

v-for的使用

data () {
 return {
   arr: [
    { name: '刘能', age: 29 },
    { name: '赵四', age: 39 },
    { name: '宋小宝', age: 49 },
    { name: '小沈阳', age: 59 }
  ]
}
}

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>

uni中的事件

事件绑定

<button @click="tapHandle">点我啊</button>

methods: {
 tapHandle () {
   console.log('真的点我了')
}
}

事件传参

// template
<button @click="tapHandle">点我啊</button>
// script
methods: {
tapHandle (e) {
  console.log(e)
}
}

// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {
tapHandle (num) {
  console.log(num)
}
}

// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {
tapHandle (num,e) {
  console.log(num,e)
}
}

uni的生命周期

应用的生命周期

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发

页面的生命周期

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。
onHide	监听页面隐藏
onUnload	监听页面卸载

下拉刷新

开启下拉刷新

通过配置文件开启

<template>
<view>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>

<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
}
}
</script>

<style>
</style>

{
 "path":"pages/list/list",
   "style":{
     "enablePullDownRefresh": true
  }
}

通过API开启

uni.startPullDownRefresh()

监听下拉刷新

export default {
 data () {
   return {
     arr: ['前端','java','ui','大数据']
  }
},
 methods: {
   startPull () {
     uni.startPullDownRefresh()
  }
},
 onPullDownRefresh () {
   console.log('触发下拉刷新了')
}
}

关闭下拉刷新

<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},

onPullDownRefresh () {
this.arr = []
setTimeout(()=> {
this.arr = ['前端','java','ui','大数据']
uni.stopPullDownRefresh()
}, 1000);
}
}
</script>

上拉加载

<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
}
},
onReachBottom () {
console.log('触底了')
}
}
</script>

<style>
view{
height: 100px;
line-height: 100px;
}
</style>

网络请求

<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
success(res) {
console.log(res)
}
})
}
}
}
</script>

数据缓存

uni.setStorage

<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>

<script>
export default {
methods: {
setStor () {
uni.setStorage({
 key: 'id',
 data: 100,
 success () {
 console.log('存储成功')
 }
 })
}
}
}
</script>

<style>
</style>

uni.setStorageSync

<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>

<script>
export default {
methods: {
setStor () {
uni.setStorageSync('id',100)
}
}
}
</script>

<style>
</style>

uni.getStorage

<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
uni.getStorage({
key: 'id',
success:  res=>{
this.id = res.data
}
})
}
}
}
</script>

uni.getStorageSync

<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
methods: {
getStorage () {
const id = uni.getStorageSync('id')
console.log(id)
}
}
}
</script>

uni.removeStorage

<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorage({
key: 'id',
success: function () {
console.log('删除成功')
}
})
}
}
}
</script>

uni.removeStorageSync

<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorageSync('id')
}
}
}
</script>

上传图片、预览图片

上传图片

<template>
<view>
<button @click="chooseImg" type="primary">上传图片</button>
<view>
<image v-for="item in imgArr" :src="item" :key="index"></image>
</view>
</view>
</template>

<script>
export default {
data () {
return {
imgArr: []
}
},
methods: {
chooseImg () {
uni.chooseImage({
count: 9,
success: res=>{
this.imgArr = res.tempFilePaths
}
})
}
}
}
</script>

预览图片

<view>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>

previewImg (current) {
 uni.previewImage({
   urls: this.imgArr,
   current
})
}

条件注释实现跨段兼容

值	平台	参考文档
APP-PLUS	5+App	HTML5+ 规范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-ALIPAY	支付宝小程序	支付宝小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	头条小程序	头条小程序
MP-QQ	QQ小程序	（目前仅cli版支持）
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

组件的条件注释

<!-- #ifdef H5 -->
<view>
h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
app会显示
</view>
<!-- #endif -->

api的条件注释

onLoad () {
 //#ifdef MP-WEIXIN
 console.log('微信小程序')
 //#endif
 //#ifdef H5
 console.log('h5页面')
 //#endif
}

/* #ifdef H5 */
view{
 height: 100px;
 line-height: 100px;
 background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
 height: 100px;
 line-height: 100px;
 background: green;
}
/* #endif */

uni中的导航跳转

利用navigator进行跳转

<navigator url="/pages/about/about" hover-class="navigator-hover">
 <button type="default">跳转到关于页面</button>
</navigator>

<navigator url="/pages/message/message" open-type="switchTab">
 <button type="default">跳转到message页面</button>
</navigator>

利用编程式导航进行跳转

<button type="primary" @click="goAbout">跳转到关于页面</button>

goAbout () {
 uni.navigateTo({
   url: '/pages/about/about',
})
}

<button type="primary" @click="goMessage">跳转到message页面</button>

goMessage () {
 uni.switchTab({
   url: '/pages/message/message'
})
}

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
uni.switchTab({
  url: '/pages/message/message'
})
}

onUnload () {
 console.log('组件卸载了')
}

导航跳转传递参数

goAbout () {
 uni.navigateTo({
   url: '/pages/about/about?id=80',
});
}

<script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>

uni-app中组件的创建

<template>
<view>
这是一个自定义组件
</view>
</template>

<script>
</script>

<style>
</style>

import login from "@/components/test/test.vue"

```
components: {test}
```
```
<test></test>
```

组件的生命周期函数

beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`Vue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

组件的通讯

父组件给子组件传值

<template>
<view>
这是一个自定义组件 {{msg}}
</view>
</template>

<script>
export default {
props: ['msg']
}
</script>

<style>
</style>

<template>
<view>
<test :msg="msg"></test>
</view>
</template>

<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},

components: {test}
}
</script>

子组件给父组件传值

<template>
<view>
这是一个自定义组件 {{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>

<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>

<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},

components: {test}
}
</script>

兄弟组件通讯

uni-ui的使用

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"

components: {uniGrid,uniGridItem}

<uni-grid :column="3">
 <uni-grid-item>
   <text class="text">文本</text>
 </uni-grid-item>
 <uni-grid-item>
   <text class="text">文本</text>
 </uni-grid-item>
 <uni-grid-item>
   <text class="text">文本</text>
 </uni-grid-item>
</uni-grid>

posted @ 2021-06-02 13:41 壮灬哥阅读(537) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

壮灬哥

uni-app的基本使用

uni-app介绍 官方网页

环境搭建

利用HbuilderX初始化项目

运行项目

介绍项目目录和文件作用

全局配置和页面配置

通过globalStyle进行全局配置

创建新的message页面

通过pages来配置页面

pathString配置页面路径styleObject配置页面窗口表现，配置项参考 pageStyle

配置tabbar

condition启动模式配置

组件的基本使用

text文本组件的用法

001 - text 组件的属性

002 - 代码案例

view视图容器组件的用法

001 - 组件的属性

002 - 代码案例

button按钮组件的用法

001 - 组件的属性

002 - 案例代码

image组件的使用

image

uni-app中的样式

uni-app中的数据绑定

插值表达式的使用

v-bind动态绑定属性

v-for的使用

uni中的事件

事件绑定

事件传参

uni的生命周期

应用的生命周期

页面的生命周期

下拉刷新

开启下拉刷新

通过配置文件开启

通过API开启

监听下拉刷新

关闭下拉刷新

上拉加载

网络请求

数据缓存

uni.setStorage

uni.setStorageSync

uni.getStorage

uni.getStorageSync

uni.removeStorage

uni.removeStorageSync

上传图片、预览图片

上传图片

预览图片

条件注释实现跨段兼容

组件的条件注释

api的条件注释

uni中的导航跳转

利用navigator进行跳转

利用编程式导航进行跳转

导航跳转传递参数

uni-app中组件的创建

组件的生命周期函数

组件的通讯

父组件给子组件传值

子组件给父组件传值

兄弟组件通讯

uni-ui的使用

公告

uni-app介绍官方网页