uni-app移動應用開發(fā)課件 2-基礎內(nèi)容

移動應用

開發(fā)UniAppuni-app基礎內(nèi)容1第

二

章學習目標

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

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

一

節(jié)2.1.1globalStyle和pages在HbuliderX中新建一個“默認模板”項目uniappch02，打開pages.json，代碼如下：{ "pages":[//pages數(shù)組中第一項表示應用啟動頁，參考：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狀態(tài)欄1導航條2標題3窗口背景色4globalStyle全局設置應用globalStyles屬性屬性類型默認值描述navigationBarBackgroundColorHexColor#F7F7F7導航欄背景顏色navigationBarTextStyleStringwhite導航欄標題顏色及狀態(tài)欄顏色，僅支持black/whitenavigationBarTitleTextString

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

iconfont網(wǎng)站首頁準備tabBar上的圖標1下載圖標頁面2.1.2tabBar新建頁面2<template> <view> 彈性盒子布局flex </view></template>新建頁面窗口文件結構圖2.1.2tabBar實現(xiàn)步驟實現(xiàn)步驟{ "pages":[//pages數(shù)組中第一項表示應用啟動頁，參考：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是子包由哪些頁面組成，參數(shù)同pageslist數(shù)組元素屬性subPackages配置項，為小程序的分包加載配置。subPackages節(jié)點接收一個數(shù)組list，list數(shù)組每一項都是應用的子包。設置subPackages后，設置preloadRule分包預載配置，在小程序某個頁面時，由框架自動預加載可能需要的分包，提升進入后續(xù)分包頁面時的啟動速度。資源引用第

二

節(jié)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>內(nèi)引入靜態(tài)資源頁面樣式第三

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

節(jié)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尺寸單位基礎組件第五

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

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

}}</script>在<script>部分添加代碼2.5.3navigatornavigator組件常用屬性屬性類型默認值說明urlString應用內(nèi)的跳轉鏈接，值為相對或絕對路徑open-typeStringnavigate跳轉方式Hover-classBooleanNavigate-hover指定點擊時的樣式類，為none時，沒有點擊效果2.5.3navigatoropen-type屬性的有效值屬性說明navigate保留當前頁面，跳轉到應用內(nèi)的某個頁面redirect關閉當前頁面，跳轉到應用內(nèi)的某個頁面。switchTab跳轉到tabBar頁面，并關閉其他所有非tabBar頁面。reLaunch關閉所有頁面，打開到應用內(nèi)的某個頁面。navigateBack關閉當前頁面，返回上一頁面或多級頁面。（a）組件頁演示<navigator>組件的三種不同形式的導航2.5.3navigator（b）index頁2.5.4imageimage組件常用屬性屬性類型默認值說明srcString圖片資源地址modeString‘scaleToFill’圖片裁剪、縮放的模式值說明scaleToFill不保持縱橫比縮放圖片，使圖片的寬度完全拉伸至填滿image元素aspectFit保持縱橫比縮放圖片，使長邊完全顯示出來aspectFill保持縱橫比縮放圖片，使短邊完全顯示出來，長邊方向將會發(fā)生截取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:'永不放棄是實現(xiàn)夢想的唯一途徑！<語錄>', imgpath:'../../static/奮斗.jpg' } }, methods:{ }}</script>2.5.5屬性綁定和事件綁定事件綁定2組件頁面演示效果圖<script>exportdefault{

methods:{

test(){ uni.showToast({ title:'你剛才點擊了按鈕！', duration:1500 }) } }}</script>2.5.6v-for渲染數(shù)據(jù)組件頁面演示效果圖演示數(shù)據(jù)渲染<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布局第

六

節(jié)2.6.1flex布局的基本概念彈性盒模型

flex頁面演示效果圖flex（flexiblebox）布局是在CSS3中引入的，又稱為“彈性盒模型”，使用flex布局可以輕松地創(chuàng)建響應式網(wǎng)頁布局。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