uni-app的基本使用

本文轉載自查看原文 2021-06-02 13:41 198 web基礎

####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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uni-app使用vuex uni-app 使用 iconfont uni-app中組件的使用 uni-APP使用lodop打印工具在uni-app中使用iconfont uni-app 中使用組件 uni-app 下使用ECharts uni-app:uCharts的使用步驟 uni-app中使用sass uni-app使用Vant組件

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介紹官方網頁