移動應用

開發UniAppuni-app基礎內容1第

二

章學習目標

知識目標1.掌握uni-app的基本開發流程2.掌握常用的基本組件3.掌握flex布局能力目標1.能夠熟練使用基礎組件搭建頁面2.能夠熟悉使用flex布局頁面3.能夠開發多tab的應用

素質目標1.具有良好的軟件編碼規范素養2.培養獨立思考、分析問題、解決問題的能力3.逐漸具備持之以恒的精神目錄CONTENTSpages.json1資源引用2頁面樣式3尺寸單位4基礎組件5pages.json第

一

節2.1.1globalStyle和pages在HbuliderX中新建一個“默認模板”項目uniappch02，打開pages.json，代碼如下：{ "pages":[//pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/index/index", "style":{ "navigationBarTitleText":"uni-app" } } ], "globalStyle":{ "navigationBarTextStyle":"black", "navigationBarTitleText":"uni-app", "navigationBarBackgroundColor":"#F8F8F8", "backgroundColor":"#F8F8F8" }}2.1.1globalStyle和pages狀態欄1導航條2標題3窗口背景色4globalStyle全局設置應用globalStyles屬性屬性類型默認值描述navigationBarBackgroundColorHexColor#F7F7F7導航欄背景顏色navigationBarTextStyleStringwhite導航欄標題顏色及狀態欄顏色，僅支持black/whitenavigationBarTitleTextString

導航欄標題文字內容backgroundColorHexColor#ffffff下拉顯示出來的窗口背景色backgroundTextStyleStringdark下拉loading的樣式，僅支持dark/lightenablePullDownRefreshBooleanfalse是否開啟下拉刷新navigationStyleStringdefault值為default/custom，custom即取消默認原生導航欄。屬性類型描述屬性pathString配置頁面路徑pathstyleObject配置頁面窗口表現，參考表2-1中globalStylestylepages屬性2.1.2tabBar屬性類型默認值描述colorHexColorHexColorTab上的文字默認顏色，必填selectedColorHexColorTab上的文字選中時的顏色，必填backgroundColorHexColorTab上的背景顏色borderStyleStringblacktabBar上邊框的顏色，可選值black/whitelistArrayTab的列表，最少2個、最多5個。tabBar屬性在pages.json中提供tabBar配置，不僅僅是為了方便快速開發導航，更重要的是在App和小程序端提升性能。2.1.2tabBar屬性類型描述pagePathString頁面路徑，必須在pages中先定義，必填textStringTab上的按鈕文字，在App和H5平臺非必填iconPathString圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px，當position為top時，此參數無效，不支持網絡圖片，不支持字體圖標selectedIconPathString選中時的圖片路徑，圖片要求與iconPath一致。list數組元素屬性list接受一個數組，數組中每個項都是一個對象。(a)組件頁實現一個有2個tab頁面的應用2.1.2tabBar(b)flex布局頁實現步驟

iconfont網站首頁準備tabBar上的圖標1下載圖標頁面2.1.2tabBar新建頁面2<template> <view> 彈性盒子布局flex </view></template>新建頁面窗口文件結構圖2.1.2tabBar實現步驟實現步驟{ "pages":[//pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/compony/compony", "style": { "navigationBarTitleText":"基礎組件", "enablePullDownRefresh":false }

} , { "path":"pages/index/index", "style":{ "navigationBarTitleText":"uni-app" } } ,{"path":"pages/flex/flex","style":{"navigationBarTitleText":"flex布局","enablePullDownRefresh":false}

}], "tabBar":{ "backgroundColor":"#F8F8F8", "color":"#8F8F94", "list":[ {"text":"組件", "pagePath":"pages/compony/compony", "iconPath":"static/unComponet.png", "selectedIconPath":"static/componet.png" }, {"text":"flex布局", "pagePath":"pages/flex/flex", "iconPath":"static/unflex.png", "selectedIconPath":"static/flex.png" } ] }, "globalStyle":{ "navigationBarTextStyle":"black", "navigationBarTitleText":"uni-app", "navigationBarBackgroundColor":"#F8F8F8", "backgroundColor":"#F8F8F8" }}修改pages.json文件32.1.2tabBar2.1.3subPackages屬性類型是否必填描述rootString是子包的根目錄pagesArray是子包由哪些頁面組成，參數同pageslist數組元素屬性subPackages配置項，為小程序的分包加載配置。subPackages節點接收一個數組list，list數組每一項都是應用的子包。設置subPackages后，設置preloadRule分包預載配置，在小程序某個頁面時，由框架自動預加載可能需要的分包，提升進入后續分包頁面時的啟動速度。資源引用第

二

節importaddfrom'@/common/add.js';//絕對路徑importaddfrom'../../common/add.js';//相對路徑1．引用js文件2.2資源引用@import"../../common/uni.css";@importurl('/common/uni.css');@importurl('@/common/uni.css');@importurl('../../common/uni.css');2．引用css文件<imageclass="logo"src="/static/logo.png"></image><imageclass="logo"src="@/static/logo.png"></image><imageclass="logo"src="../../static/logo.png"></image>3．在<template>內引入靜態資源頁面樣式第三

節uni-app支持的選擇器有#idclasselementelement，element：after：before2.3頁面樣式尺寸單位第四

節750*元素在設計稿中的寬度/設計稿基準寬度若設計稿寬度為

750px，元素A在設計稿上的寬度為100px，那么元素A在uni-app里面的寬度應該設為：750*100/750，結果為：100rpx。若設計稿寬度為640px，元素A在設計稿上的寬度為100px，那么元素A在uni-app里面的寬度應該設為：750*100/640，結果為：117rpx。若設計稿寬度為375px，元素B在設計稿上的寬度為200px，那么元素B在uni-app里面的寬度應該設為：750*200/375，結果為：400rpx。2.4尺寸單位基礎組件第五

節組件的幾個部分組件內容以組件名稱為標記的開始標簽和結束標簽組件屬性值組件屬性2.5基礎組件在開始標簽和結束標簽之間，稱為組件內容。開始標簽上可以寫屬性，屬性可以有多個，多個屬性之間用空格分割。每個屬性通過=賦值。如：<imageclass="logo"src="/static/logo.png"></image>2.5基礎組件<template><view><text>彈性盒子布局flex</text></view></template>每個vue文件的根節點必須為<template>，且這個下只能且必須有一個根<view>組件。2.5.1viewview組件屬性屬性類型默認值說明hover-classStringnone指定按下去的樣式類。當hover-class="none"時，沒有點擊態效果hover-stop-propagationBooleanfalse指定是否阻止本節點的祖先節點出現點擊態hover-start-timeNumber50按住后多久出現點擊態，單位毫秒hover-stay-timeNumber400手指松開后點擊態保留時間，單位毫秒view是容器組件，類似于HTML中的div標簽，用于包裹各種元素內容，是頁面布局最常用的標簽。組件頁面演示效果圖2.5.2texttext組件屬性屬性類型默認值說明selectableBooleanfalse文本是否可選（微信小程序user-select）spaceBoolean顯示連續空格decodeBoolean50是否解碼值說明ensp中文字符空格一半大小emsp中文字符空格大小ebsp根據字體設置的空格大小space屬性的取值text組件用于包裹文本內容，類似于Html中的span標簽。2.5.2text組件頁面演示效果圖在compony.vue文件視圖層<template>中添加代碼演示<text>組件屬性<viewclass="textbox"><textspace="ensp":decode="true">{{words}}</text></view><script>exportdefault{ data(){ return{

words:'永不放棄是實現夢想的唯一途徑！<語錄>' } }, methods:{

}}</script>在<script>部分添加代碼2.5.3navigatornavigator組件常用屬性屬性類型默認值說明urlString應用內的跳轉鏈接，值為相對或絕對路徑open-typeStringnavigate跳轉方式Hover-classBooleanNavigate-hover指定點擊時的樣式類，為none時，沒有點擊效果2.5.3navigatoropen-type屬性的有效值屬性說明navigate保留當前頁面，跳轉到應用內的某個頁面redirect關閉當前頁面，跳轉到應用內的某個頁面。switchTab跳轉到tabBar頁面，并關閉其他所有非tabBar頁面。reLaunch關閉所有頁面，打開到應用內的某個頁面。navigateBack關閉當前頁面，返回上一頁面或多級頁面。（a）組件頁演示<navigator>組件的三種不同形式的導航2.5.3navigator（b）index頁2.5.4imageimage組件常用屬性屬性類型默認值說明srcString圖片資源地址modeString‘scaleToFill’圖片裁剪、縮放的模式值說明scaleToFill不保持縱橫比縮放圖片，使圖片的寬度完全拉伸至填滿image元素aspectFit保持縱橫比縮放圖片，使長邊完全顯示出來aspectFill保持縱橫比縮放圖片，使短邊完全顯示出來，長邊方向將會發生截取widthFix寬度不變，高度自動變化，保持原圖寬高比不變heightFix高度不變，寬度自動變化，保持原圖寬高比不變mode屬性的取值（a）組件頁在compony頁面1個image組件2.5.3navigator（1）template部分添加代碼：<viewclass="imgbox"><imagesrc="../../static/奮斗.jpg"mode="widthFix"class="img"></image></view>（2）style部分添加代碼：imgbox{ width:100%; text-align:center;}.img{ width:60%;}2.5.5屬性綁定和事件綁定屬性綁定1<template>

<viewclass="imgbox"> <image:src="imgpath"mode="widthFix"class="img"></image></view></template><script>exportdefault{ data(){ return{

words:'永不放棄是實現夢想的唯一途徑！<語錄>', imgpath:'../../static/奮斗.jpg' } }, methods:{ }}</script>2.5.5屬性綁定和事件綁定事件綁定2組件頁面演示效果圖<script>exportdefault{

methods:{

test(){ uni.showToast({ title:'你剛才點擊了按鈕！', duration:1500 }) } }}</script>2.5.6v-for渲染數據組件頁面演示效果圖演示數據渲染<template>

<viewclass="content">

<viewclass="listbox"> <textv-for="(item,index)inlist":key="index"> {{}}{{item.person}} </text></br> </view> </view></template><script>

data(){ return{

list:[{ id:1, name:'神舟14號', person:'陳冬、劉洋、蔡旭哲' }, { id:2, name:'神舟13號', person:'翟志剛、王亞平、葉光富' } ]

} },

</script>flex布局第

六

節2.6.1flex布局的基本概念彈性盒模型

flex頁面演示效果圖flex（flexiblebox）布局是在CSS3中引入的，又稱為“彈性盒模型”，使用flex布局可以輕松地創建響應式網頁布局。2.6.2容器屬性

flex-direction屬性取值描述row彈性盒子元素按橫軸方向順序排列（默認值）row-reverse彈性盒子元素按橫軸方向逆序排列column彈性盒子元素按縱軸方向順序排列column-reverse彈性盒子元素按縱軸方向逆序排列flexdirection頁面演示效果圖flex-direction屬性12.6.2容器屬性flex-wrap屬性取值描述nowrap容器為單行，該情況下flex子項可能會溢出容器。該值是默認屬性值，不換行wrap容器為多行，flex子項溢出的部分會被放置到新行（換行），第一行顯示在上方wrap-reverse反轉wrap排列（換行），第一行顯示在下方

flexwrap頁面演示效果圖flex-wrap屬性22.6.2容器屬性justify-content屬性取值描述flex-start彈性盒子元素將向行起始位置對齊（默認值）flex-end彈性盒子元素將向行結束位置對齊center彈性盒子元素將向行中間位置對齊space-between彈性盒子元素會平均分布在行里，第一個元素的邊界與行的起始位置邊界對齊，最后一個元素的邊界與行結束位置的邊界對齊space-around彈性盒子元素會平均分布在行里，兩端保留子元素與子元素之間間距大小的一半space-around彈性盒子元素會平均分布在行里，兩端保留子元素與子元素之間間距大小的一半justifycontent頁面演示效果圖justify-content屬性32.6.2容器屬性flex-flow屬性4為flex-direction和flex-wrap的綜合形式。默認值為rownowrap。其寫法如下：flex-flow：columnwrap;2.6.2容器屬性align-items屬性取值描述flex-start彈性盒子元素向側軸的起始位置對齊flex-end彈性盒子元素向側軸的起始位置對齊center彈性盒子元素向側軸的起始位置對齊baseline項目與行的基線對齊，在未單獨設置基線時，等同于flex-startspstretch默認值。如果項目未設置高度或設為auto，將占滿整個容器的高度alignitems頁面演示效果圖align-items屬性52.6.2容器屬性align-content屬性6align-content屬性主要用于在進行多行排列時，設置項目在側軸方向上的對齊方式。文件aligncontent.vuealigncontent頁面演示效果圖2.6.3項目屬性order屬性1f