uni-app移動(dòng)應(yīng)用開發(fā)課件 2-基礎(chǔ)內(nèi)容

移動(dòng)應(yīng)用

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

二

章學(xué)習(xí)目標(biāo)

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

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

一

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

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

iconfont網(wǎng)站首頁準(zhǔn)備tabBar上的圖標(biāo)1下載圖標(biāo)頁面2.1.2tabBar新建頁面2<template> <view> 彈性盒子布局flex </view></template>新建頁面窗口文件結(jié)構(gòu)圖2.1.2tabBar實(shí)現(xiàn)步驟實(shí)現(xiàn)步驟{ "pages":[//pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/compony/compony", "style": { "navigationBarTitleText":"基礎(chǔ)組件", "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配置項(xiàng)，為小程序的分包加載配置。subPackages節(jié)點(diǎn)接收一個(gè)數(shù)組list，list數(shù)組每一項(xiàng)都是應(yīng)用的子包。設(shè)置subPackages后，設(shè)置preloadRule分包預(yù)載配置，在小程序某個(gè)頁面時(shí)，由框架自動(dòng)預(yù)加載可能需要的分包，提升進(jìn)入后續(xù)分包頁面時(shí)的啟動(dòng)速度。資源引用第

二

節(jié)importaddfrom'@/common/add.js';//絕對(duì)路徑importaddfrom'../../common/add.js';//相對(duì)路徑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*元素在設(shè)計(jì)稿中的寬度/設(shè)計(jì)稿基準(zhǔn)寬度若設(shè)計(jì)稿寬度為

750px，元素A在設(shè)計(jì)稿上的寬度為100px，那么元素A在uni-app里面的寬度應(yīng)該設(shè)為：750*100/750，結(jié)果為：100rpx。若設(shè)計(jì)稿寬度為640px，元素A在設(shè)計(jì)稿上的寬度為100px，那么元素A在uni-app里面的寬度應(yīng)該設(shè)為：750*100/640，結(jié)果為：117rpx。若設(shè)計(jì)稿寬度為375px，元素B在設(shè)計(jì)稿上的寬度為200px，那么元素B在uni-app里面的寬度應(yīng)該設(shè)為：750*200/375，結(jié)果為：400rpx。2.4尺寸單位基礎(chǔ)組件第五

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

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

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

methods:{

test(){ uni.showToast({ title:'你剛才點(diǎn)擊了按鈕！', 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號(hào)', person:'陳冬、劉洋、蔡旭哲' }, { id:2, name:'神舟13號(hào)', person:'翟志剛、王亞平、葉光富' } ]

} },

</script>flex布局第

六

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

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

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

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