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

移動應(yīng)用

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

三

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

知識目標(biāo)1.掌握uni-app的生命周期2.掌握條件編譯3.掌握uni-ui、uview等擴展組件的安裝和使用能力目標(biāo)1.能夠熟練使用擴展組件搭建頁面2.能實現(xiàn)跨端處理3.能夠理解生命周期函數(shù)應(yīng)用場景

素質(zhì)目標(biāo)1.具有良好的軟件編碼規(guī)范素養(yǎng)2.具有探索新知、不畏困難的精神3.具有深厚的愛國情感和中華民族自豪感uni-app基礎(chǔ)內(nèi)容擴展1.生命周期2.條件編譯3.擴展組件4.案例新聞列表知識思維導(dǎo)圖應(yīng)用生命周期頁面生命周期組件生命周期安裝組件Uni-scss輔助樣式使用組件生命周期第

一

節(jié)3.1.1應(yīng)用生命周期函數(shù)名說明onLaunch當(dāng)uni-app初始化完成時觸發(fā)（全局只觸發(fā)一次）onShow當(dāng)uni-app啟動，或從后臺進入前臺顯示onHide當(dāng)uni-app從前臺進入后臺onError當(dāng)uni-app報錯時觸發(fā)onUniNViewMessage對nvue頁面發(fā)送的數(shù)據(jù)進行監(jiān)聽onUnhandledRejection對未處理的Promise拒絕事件監(jiān)聽函數(shù)onPageNotFound頁面不存在監(jiān)聽函數(shù)onThemeChange監(jiān)聽系統(tǒng)主題變化應(yīng)用生命周期函數(shù)<script> exportdefault{

onLaunch:function(){ console.log('AppLaunch') },

onShow:function(){ console.log('AppShow') },

onHide:function(){ console.log('AppHide') } }</script>App.vue3.1.2頁面生命周期函數(shù)名說明onLoad監(jiān)聽頁面加載，其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為ObjectonShow監(jiān)聽頁面顯示。頁面每次出現(xiàn)在屏幕上都觸發(fā)，包括從下級頁面點返回露出當(dāng)前頁面onReady監(jiān)聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發(fā)onHide監(jiān)聽頁面隱藏onUnload監(jiān)聽頁面卸載onPullDownRefresh監(jiān)聽用戶下拉動作，一般用于下拉刷新onReachBottom頁面滾動到底部的事件（不是scroll-view滾到底），常用于下拉下一頁數(shù)據(jù)頁面生命周期函數(shù)3.1.2頁面生命周期onLoad函數(shù)1兩個作用在onLoad中調(diào)用數(shù)據(jù)接口，獲取服務(wù)器端數(shù)據(jù)接受上一個頁面中傳遞的參數(shù)methods:{nextpage(){ uni.navigateTo({ url:'testload?id=1&name=uniapp' }) } }請求地址中傳遞的參數(shù)3.1.2頁面生命周期（a）index.vue頁(b）testload.vue頁onLoad:function(option){//option為object類型，會序列化上個頁面?zhèn)鬟f的參數(shù)

this.id=option.id; =;}接受上一個頁面中傳遞的參數(shù)3.1.2頁面生命周期onPullDownRefresh函數(shù)2onPullDownRefresh函數(shù)監(jiān)聽用戶下拉動作，用于下拉刷新。(a)下拉前(b)下拉后實現(xiàn)下拉刷新數(shù)據(jù)3.1.2頁面生命周期具體代碼：<template> <viewclass="content">

<textv-for="(item,i)innewsList":key="i">{{item}}</text>

</view></template><script> exportdefault{ data(){ return{ title:'Hello',

newsList:['0-感悟非凡成就，凝聚奮進力量','1-踐行健康生活方式蔚然成風(fēng)','2-世界感受中國非凡十年巨變'] } }, onLoad(){},

onPullDownRefresh(){ this.newsList=['0-堅守在崗位，喜迎二十大','1-凝聚黨心民心，永葆生機活力','2-穩(wěn)健持重，開拓進取']; uni.stopPullDownRefresh(); }, methods:{

} }</script>3.1.2頁面生命周期注意：onPullDownRefresh與onLoad平級1處理后數(shù)據(jù)刷新后，使用uni.stopPullDownRefresh()方法關(guān)閉刷新功能3{ "path":"pages/index/index", "style":{ "navigationBarTitleText":"uni-app",

"enablePullDownRefresh":true

} }在pages.json中找到當(dāng)前頁面，在style屬性中開啟下拉刷新功能23.1.2頁面生命周期onReachBottom函數(shù)3onReachBottom上拉加載生命周期函數(shù)，往往用來加載后面的數(shù)據(jù)。(a)上拉前(b)上拉后上拉加載生命周期函數(shù)3.1.2頁面生命周期具體代碼：<script> exportdefault{ data(){ return{ title:'Hello',

newsList:['0-感悟非凡成就，凝聚奮進力量','1-踐行健康生活方式蔚然成風(fēng)','2-世界感受中國非凡十年巨變','新聞標(biāo)題','新聞標(biāo)題','新聞標(biāo)題','新聞標(biāo)題','新聞標(biāo)題','新聞標(biāo)題','新聞標(biāo)題'] } }, onLoad(){},

onReachBottom(){ console.log("頁面觸底"); this.newsList=[...this.newsList,...['3-新聞','4-新聞']] }, methods:{

} }</script>3.1.3組件生命周期函數(shù)函數(shù)名說明beforeCreate在實例初始化之前被調(diào)用created在實例創(chuàng)建完成后被立即調(diào)用beforeMount在掛載開始之前被調(diào)用mounted掛載到實例上去之后調(diào)用beforeUpdate數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬DOM打補丁之前updated由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁，在這之后會調(diào)用該鉤子。beforeDestroy實例銷毀之前調(diào)用destroyedVue實例銷毀后調(diào)用。組件生命周期函數(shù)(Vue2)條件編譯第

二

節(jié)值生效條件VUE3HBuilderX3.2.0+詳情(opensnewwindow)APP-PLUSAppAPP-PLUS-NVUE或APP-NVUEAppnvue頁面H5H5MP-WEIXIN微信小程序MP-ALIPAY支付寶小程序MP-BAIDU百度小程序MP-TOUTIAO字節(jié)跳動小程序MP-LARK飛書小程序MP-QQQQ小程序MP-KUAISHOU快手小程序MP-JD京東小程序MP-360360小程序MP微信小程序/支付寶小程序/百度小程序/字節(jié)跳動小程序/飛書小程序/QQ小程序/360小程序QUICKAPP-WEBVIEW快應(yīng)用通用(包含聯(lián)盟、華為)QUICKAPP-WEBVIEW-UNION快應(yīng)用聯(lián)盟QUICKAPP-WEBVIEW-HUAWEI快應(yīng)用華為平臺名稱#ifdef：ifdefined僅在某平臺存在#ifndef：ifnotdefined除了某平臺均存在3.2條件編譯3.2條件編譯控制頁面1在uniappch03項目的index.vue頁面中的<image>標(biāo)簽，代碼如下：<template> <viewclass="content">

<!--#ifdefH5--> <imageclass="logo"src="/static/htmlbig.png"></image>

<!--#endif--> <!--#ifdefMP-WEIXIN--> <imageclass="logo"src="/static/weixin.jpeg"></image>

<!--#endif-->

<viewclass="text-area"> <textclass="title">{{title}}</text> </view> <buttontype="primary"size="mini"@click="nextpage">跳到下一個頁面</button> <textv-for="(item,i)innewsList":key="i"> {{item}} </text> </view></template>3.2條件編譯控制頁面1H5平臺演示效果微信小程序平臺演示效果3.2條件編譯控制css樣式2修改index.vue中<template>標(biāo)簽頁內(nèi)的<text>：<textv-for="(item,i)innewsList":key="i"class="newmain"> {{item}}</text> 在<style>標(biāo)簽內(nèi)添加如下代碼：

/*#ifdefH5*/ .newmain{ color:red; }

/*#endif*/ /*#ifdefMP-WEIXIN*/ .newmain{ color:black; }

/*#endif*/3.2條件編譯控制js3修改index.vue中的<script>標(biāo)簽內(nèi)的nextpage方法：

methods:{nextpage(){

//#ifdefH5 uni.navigateTo({ url:'testload?id=1&name=Html端' })

//#endif //#ifdefMP-WEIXIN uni.navigateTo({ url:'testload?id=1&name=小程序端' })

//#endif

} }3.2條件編譯控制js3條件編譯寫法說明#ifdefAPP-PLUS僅出現(xiàn)在App平臺下的代碼需條件編譯的代碼#endif#ifndefH5除了H5平臺，其它平臺均存在的代碼需條件編譯的代碼#endif#ifdefH5||MP-WEIXIN在H5平臺或微信小程序平臺存在的代碼（這里只有||，不可能出現(xiàn)&&，因為沒有交集）條件編譯寫法說明#ifdefAPP-PLUS僅出現(xiàn)在App平臺下的代碼條件編譯擴展組件uni-ui第

三

節(jié)uni_modules插件方式1uni-uni組件完全安裝安裝插件窗口uni-ui插件界面3.3.1擴展組件uni-uiuni_modules插件方式1安裝提示框項目選擇界面uni-uni組件完全安裝3.3.1擴展組件uni-uiuni_modules插件方式1演示uni-ui的使用<template>標(biāo)簽內(nèi)：<viewclass="text-area">

<uni-badgeclass="uni-badge-left-margin"text="2"type="warning"absolute="rightTop"size="normal"> <viewclass="box"> <text>{{title}}</text> </view>

</uni-badge>

</view>3.3.1擴展組件uni-uiuni_modules插件方式1<style>標(biāo)簽內(nèi)，添加樣式類.box:

.box{ height:40px; display:flex; justify-content:center; align-items:center; text-align:center; background-color:#000000; color:#fff; font-size:36rpx;margin-bottom:10px; padding:020rpx; }加徽章的演示效果演示uni-ui的使用3.3.1擴展組件uni-uiuni_modules插件方式1單個組件安裝uni-ui的組件可以不安裝所有組件，而僅安裝個別需要的組件。通過uni_modules單獨安裝需要的某個組件的方式，和安裝完整的uni-ui的方式一樣，可以通過官網(wǎng)的鏈接打開組件頁面，也可以在“插件市場”去前端組件欄搜索對應(yīng)的組件。通過uni_modules插件方式安裝組件時，會自動安裝其相關(guān)組件。組件安裝后直接使用即可，無需import和注冊。3.3.1擴展組件uni-uieasycom組件規(guī)范2傳統(tǒng)vue組件，需要安裝、引用、注冊，三個步驟后才能使用組件。easycom將其精簡為一步。屬性類型默認值描述autoscanBooleanTRUE是否開啟自動掃描，開啟后將會自動掃描符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)的組件customObject-以正則方式自定義組件匹配規(guī)則。如果autoscan不能滿足需求，可以使用custom自定義匹配規(guī)則easycom屬性"easycom":{"autoscan":true,"custom":{"^uni-(.*)":"@/components/uni-$1.vue",//匹配components目錄內(nèi)的vue文件

"^vue-file-(.*)":"packageName/path/to/vue-file-$1.vue"http://匹配node_modules內(nèi)的vue文件

}}3.3.1擴展組件uni-uinpm方式3如果是HBuilderX項目，可以略過這個步驟。npmisass-Dnpmisass-loader@10-D1.安裝sassnpmi@dcloudio/uni-ui2.安裝uni-ui3.3.1擴展組件uni-uinpm方式3{"easycom":{ "autoscan":true, "custom":{

//uni-ui規(guī)則如下配置

"^uni-(.*)":"@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } },

//其他內(nèi)容

pages:[ //... ]}3.配置easycommodule.exports={ transpileDependencies:['@dcloudio/uni-ui']}4.配置vue.config.js<uni-badgetext="1"></uni-badge>5.使用組件3.3.1擴展組件uni-ui3.3.2uni-scss輔助樣式scss編譯命令注意：如果沒有編譯工具，請先按照scss編譯插件。生成index.css不是必須的，這里只是生成之后便于學(xué)習(xí)。3.3.2uni-scss輔助樣式顏色類1<viewclass="uni-primary">主色</view><viewclass="uni-success">成功色</view><viewclass="uni-warning">警告色</view><viewclass="uni-error">錯誤色</view><viewclass="uni-primary-bg">主色</view><viewclass="uni-success-bg">成功色</view><viewclass="uni-warning-bg">警告色</view><viewclass="uni-error-bg">錯誤色</view>邊框半徑類2邊框半徑類的格式：uni-radius-${direction}-${size}null使用默認值大小(可忽略)0清理所有圓角sm默認值/2lg默認值*2xl默認值*6pill9999pxcircle50%(nvue下不生效)<viewclass="uni-radius-circle"></view><!--邊框為圓形--><viewclass="uni-radius-t-0"></view><!--上面2個角為直角-->3.3.2uni-scss輔助樣式間距類3uni-${property}${direction}-${size}Size：取值0到16，以4為增量。1代表4px，2為8px，依次類推。例如：<viewclass="uni-mt-2"></view><!--margin-top為8px--><viewclass="uni-mx-2"></view><!--左右margin為8px--><viewclass="uni-py-5"></view><!--上下padding為20px-->配置scss4<stylelang="scss">

/*每個頁面公共css*/ @import'@/uni_modules/uni-scss';</style>/*需要放到文件最上面*/@import'@/uni_modules/uni-scss/variables.scss';3.3.3使用組件流式柵格系統(tǒng)1屬性名類型說明spanNumber柵格占據(jù)的列數(shù)，默認值為24offsetNumber柵格左側(cè)間隔格數(shù)pushNumber柵格向右偏移格數(shù)pullNumber柵格向左偏移格數(shù)xsNumber/object屏幕寬度<768px時，要顯示的柵格規(guī)則，如：:xs="8"或:xs="{span:8,pull:4}"smNumber/object屏幕寬度≥768px時，要顯示的柵格規(guī)則mdNumber/object屏幕寬度≥992px時，要顯示的柵格規(guī)則lgNumber/object屏幕寬度≥1200px時，要顯示的柵格規(guī)則xlNumber/object屏幕寬度≥1920px時，要顯示的柵格規(guī)則uni-col屬性3.3.3使用組件uni-card卡片2<uni-sectiontitle="雙標(biāo)題卡片"type="line"><uni-cardtitle="基礎(chǔ)卡片"sub-title="副標(biāo)題"extra="額外信息":thumbnail="avatar"@click="onClick"> <textclass="uni-body">這是一個帶頭像和雙標(biāo)題的基礎(chǔ)卡片，此示例展示了一個完整的卡片。</text>

</uni-card></uni-section>3.3.3使用組件uni-card卡片2uni-card演示效果屬性名類型默認值說明titleString-標(biāo)題文字sub-titleString-副標(biāo)題文字extraString-標(biāo)題額外信息thumbnailString-標(biāo)題左側(cè)縮略圖,支持網(wǎng)絡(luò)圖片，本地圖片，本圖片需要傳入一個絕對路徑，如：/static/xxx.pngcoverString-封面圖,支持網(wǎng)絡(luò)圖片，本地圖片，本圖片需要傳入一個絕對路徑，如：/static/xxx.pngis-fullBooleanFALSE內(nèi)容是否通欄，為true時將去除padding值is-shadowBooleanFALSE卡片內(nèi)容是否開啟陰影shadowString默認值見說明部分卡片陰影,需符合css值，默認值：0px0px3px1pxrgba(0,0,0,0.08)borderBooleanTRUE卡片邊框marginString10px卡片外邊距spacingString10px卡片內(nèi)邊距paddingString10px卡片內(nèi)容內(nèi)邊距borderBooleanTRUE卡片邊框卡片的屬性3.3.3使用組件uni-card卡片2<style>標(biāo)簽內(nèi)添加代碼：

.title{ font-size:24px; font-weight:400; color:#555555; } .uni-card1{ width:90%; margin-top:0!important; }<template>標(biāo)簽內(nèi)添加代碼：<uni-cardclass="uni-card1"><uni-row> <uni-col:span="4"> <imageclass=""src="../../static/images/icon/ide.png"mode="widthFix"style="width:100%;"> </image> </uni-col> <uni-col:span="20"> <viewclass="uni-ml-4"> <textclass="title">開發(fā)工具</text> <view>Eclipse、IntelliJIDEA、VisualStudioCode、Sublime、HBuilder</view> </view> </uni-col></uni-row></uni-card>

3.3.3使用組件uni-list列表3uni-list列表組件，包含基本列表樣式、可擴展插槽機制、長列表性能優(yōu)化、多端兼容。內(nèi)置屬性可以覆蓋的場景包括：導(dǎo)航列表、設(shè)置列表、小圖標(biāo)列表、通信錄列表、聊天記錄列表。事件稱名說明返回參數(shù)事件稱名click點擊uniListItem觸發(fā)事件，需開啟點擊反饋-clickswitchChange點擊切換Switch時觸發(fā)，需顯示switche={value:checked}switchChangeuni-list-item事件3.3.3使用組件uni-list