快應用入門--頁面佈局篇
前戲--什麼是快應用
3月20號快應用標準啓動發佈會後，這一新生技術瞬間火了。前端羣裏號召你們有興趣的去調研下快應用，因而我用一天時間寫了個京東金融快應用簡易demo，接下來總結下遇到的一些問題和我的看法：javascript
首先介紹下什麼是快應用
- 快應用是基於手機硬件平臺的新型應用形態，標準是由主流手機廠商組成的快應用聯盟聯合制定。
- 快應用標準的誕生將在研發接口、能力接入、開發者服務等層面建設標準平臺，以平臺化的生態模式對我的開發者和企業開發者全品類開放。
- 快應用具有傳統APP完整的應用體驗，無需安裝、即點即用。
快應用技術棧
利用前端技術棧編寫，轉換成原生語法：
圖片來源：快應用發佈會PPT
圖片來源：快應用發佈會PPTcss
理論到實踐--實現京東金融小程序Demo
入門千篇一概 請看官方文檔
開發心得體會『佈局篇』
需安裝6.0以上版本的NodeJS，請從NodeJS官網下載，推薦v6.11.3（高於8.0會報錯），同時最好有一部安卓系統8.0的安卓機，編譯後能夠掃碼安裝，這樣即可以一路順暢見到官方的"Hello Word"頁面。
- 要實現自動編譯項目，需開啓兩個窗口，一個運行npm run build->npm run server,另外一個運行npm run watch.
- 命令hap init初始化項目後，先設置項目配置信息，在src目錄下的manifest.json配置文件裏，好比設計稿是基於750px的，在config設置以下：
"config": {
"designWidth":750
}
複製代碼
- 頁面結構跟vuejs極其類似，dom元素寫在template裏，style標籤支持less語法，需安裝
less和less-loader依賴，style標籤設置lang="less"便可，業務邏輯寫在script裏。這裏要強調一點的是，template裏只能有一個根節點。 - 爲了解決屏幕適配問題，全部與大小相關的樣式（例如width、font-size）均以基準寬度（默認750px）爲基礎，根據實際屏幕寬度進行縮放，例如width:100px，在1500px寬度屏幕上，width實際上爲200px。框架目前僅支持長度單位px，百分比也不支持，
"margin:0 auto;"這類寫法也不支持,官方文檔說margin&padding屬性值能夠有1~4個值，但在實際使用時卻不支持，上右下左4個值須要分開寫。 - 文本必須包含在text標籤內才能顯示，同時針對文本的樣式class也要寫在text標籤內才能生效（這點跟react-native的Text標籤同樣）。
- position屬性不支持absolute和relative，能夠爲fixed和none;(不支持的屬性值會報錯)
background屬性不支持url寫法，要用背景圖得用background-image屬性。須要強調的是，background屬性支持漸變樣式，暫時不能與background-color、background-image同時使用。background-image暫時不支持與background-color，border-color同時使用；不支持網絡圖片資源，支持本地圖片資源。 背景顏色則要用background-color去設置，顏色值也必須爲6位的十六進制，如："background-color:#ffffff;"box-shadow和font-family屬性暫時不支持；- 框架提供了一套基礎的界面組件，界面組件標籤除了支持經常使用的HTML5標籤，例如div，a，input等標籤以外，還提供與原生UI相關的組件標籤，例如switch，slider，list等（注意：不支持ul li 、dl dt dd等標籤）。不支持的標籤會報錯，具體使用請參考官方文檔--組件。
- 頁面佈局雖然默認採用了flex盒佈局，但justify-content支持的屬性值有限，有效枚舉值爲:
flex-start|flex-end|center|space-between，報錯以下所示：
- list組件的使用，其子組件必須是block，而後block的子組件必須是list-item。block組件不支持class屬性，支持的屬性有[for,tid,if,elif,else]，注意：1）list-item內不能再嵌套list；2）list-item的type屬性爲必填屬性；3）list-item內部需謹慎使用if指令或for指令，由於相同type屬性的list-item的DOM結構必須徹底相同，而使用if指令或for指令會形成DOM結構差別；
- div組件支持的屬性有 [id, style, class, disabled, if, elif, else, for, tid, show]。
- 當DOM結構複雜時，滾動頁面會出現卡頓現象，由於Native沒法複用div組件實現的列表元素，爲了獲得流暢的列表滾動體驗，推薦使用list組件替代div組件實現長列表佈局，由於Native會複用相同type屬性的list-item。
輕鬆實現京東金融小程序首頁
掌握了一些原理後，接下來進入採坑之旅（建議：先看官方文檔，特別是css屬性的支持範圍）先來張首頁第一版截圖：
一言不合就上代碼『Dom部分』
<template>
<!-- template裏只能有一個根節點 -->
<div class="mainWrapper">
<div class="topPart">
<div class="topBg"></div>
<div class="slogan_title">
<image class="slogan" src="./../Images/slogan@3x.png"></image>
<image class="title" src="./../Images/logo.png"></image>
</div>
<div class="menu_icons">
<div class="menu" for="{{menuList}}" onclick="routeDetail($idx+1)">
<div class="icon">
<image src={{$item.icon}}></image>
</div>
<div>
<text class="name">{{$item.name}}</text>
</div>
</div>
</div>
</div>
<div class="contentPart" onclick="routeDetail(7)">
<div class="articleWrap" for="{{articleList}}">
<div>
<text class="title">{{$item.title}}</text>
</div>
<div>
<image class="thumbnail" src={{$item.img}}></image>
</div>
<div>
<text class="brief">{{$item.brief}}</text>
</div>
<div class="readAll">
<div>
<text class="tip">閱讀全文</text>
</div>
<div>
<text class="arrow">></text>
</div>
</div>
</div>
</div>
<image class="bottomPart" src="./../Images/logo_grey@3X.png"></image>
</div>
</template>
複製代碼
一言不合就上代碼『css部分』
<style lang="less">
.mainWrapper{
flex-direction: column;
justify-content:flex-start;
background-color:rgba(84,95,113,0.10);
.topPart{
flex-direction: column;
justify-content:flex-start;
.topBg{
width:750px;
height:326px;
background-image:url('./../Images/index_top_bg@3x.png');
background-size:cover;
}
.slogan_title{
justify-content:space-between;
margin-left:40px;
margin-top:-263px;
width:680px;
.slogan{
width:381px;
height:52px;
}
.title{
width:66px;
height:66px;
margin-left:233px;
border-radius:50px;
}
}
.menu_icons{
width:710px;
height:220px;
background-color:#ffffff;
margin-left:20px;
margin-top:40px;
border-radius:6px;
justify-content:space-between;
align-items:center;
.menu{
width:138px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
margin-left:10px;
margin-top:48px;
margin-bottom:54px;
.icon{
width:64px;
height:64px;
}
div>.name{
font-size:24px;
line-height:34px;
color:#666666;
margin-top:20px;
}
}
}
}
.contentPart{
margin-top:40px;
margin-left:20px;
margin-right:20px;
flex-direction:column;
justify-content:flex-start;
.articleWrap{
width:710px;
background-color:#ffffff;
border-radius:6px;
flex-direction:column;
justify-content:flex-start;
padding-left:30px;
padding-right:30px;
margin-bottom:40px;
.title{
padding-top:33px;
padding-bottom:33px;
font-size:32px;
color:#333333;
font-weight:bold;
}
.thumbnail{
width:650px;
}
.brief{
padding-top:30px;
padding-bottom:30px;
font-size:28px;
color:#999999;
line-height:32px;
}
.readAll{
justify-content:space-between;
align-items:center;
border-top-width:0.5px;
border-top-color:#eeeeee;
padding-top:20px;
padding-bottom:20px;
.tip{
color:#333333;
font-size:28px;
}
.arrow{
color:#cccccc;
font-size:28px;
}
}
}
}
.bottomPart{
width:180px;
height:54px;
margin-top:20px;
margin-left:284px;
margin-bottom:30px;
}
}
</style>
複製代碼
一言不合就上代碼『js部分』
<script>
import router from '@system.router'
export default {
data: {
title: '京東金融',
menuList:[{
icon:'./../Images/index_icon_asset@3x.png',
name:'資產'
},{
icon:'./../Images/index_icon_profit@3x.png',
name:'查收益'
},{
icon:'./../Images/index_icon_quota@3x.png',
name:'查額度'
},{
icon:'./../Images/index_icon_bill@3x.png',
name:'查帳單'
},{
icon:'./../Images/index_icon_credit@3x.png',
name:'信用'
}],
articleList:[{
title:'白條是什麼？怎麼申請？',
img:'./../Images/bottom-img02.png',
brief:'白條是京東金融推出的我的消費信貸產品，申請京東白條後，您可使用白條額度在京東商城消費，享受先消費、後付款服務，同時支持最高24期分期還款。'
},{
title:'京東金融的理財產品，收益怎麼樣？',
img:'./../Images/bottom-img01.png',
brief:'京東按期理財是京東金融推出的簡單、安全的穩健型理財產品,多種按期理財產品的投資收益、投資時間一目瞭然。從投資歷史來看,收益高且穩定,獲得了衆多好評。'
}]
},
routeDetail(id) {
let uri = ''
// 跳轉到應用內的某個頁面，router用法詳見：文檔->接口->頁面路由
switch (id) {
case 1:
uri = '/Assets'
break;
case 2:
uri = '/Income'
break;
case 3:
uri = '/Quota'
break;
case 4:
uri = '/Bill'
break;
case 5:
uri = '/Credit'
break;
case 6:
uri = '/About'
break;
case 7:
uri = '/Detail'
break;
case 8:
uri = '/Test'
break;
default:
break;
}
router.push({
uri: uri
})
}
}
</script>
複製代碼
底層架構和接口能力『下期預告』
底層架構：
圖片來源：快應用發佈會PPT
圖片來源：快應用發佈會PPT
接口能力：
圖片來源：快應用發佈會PPT
寫在最後，雖然如今『快應用』相比『小程序』還有不少不成熟的地方，可是憑藉其【一觸即達】的能力，還有國內九大手機廠商聯手協同發展快應用生態，豐富的入口（包括負一屏、短信和拍照分享等入口），相信在不久的未來會愈來愈好的，甚至超太小程序的熱度，拭目以待。
參考資料:
相關文章
- 1. 快應用頁面樣式與佈局
- 2. CSS入門指南-4：頁面佈局
- 3. 頁面佈局基礎篇
- 4. grid佈局快速入門
- 5. CSS佈局快速入門
- 6. HTML5入門教程：響應式頁面佈局
- 7. 頁面佈局
- 8. SEO前端篇（一）頁面佈局
- 9. 響應式佈局頁面之瀑布流佈局淺析
- 10. 快應用，快入門
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • YAML 入門教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 快應用頁面樣式與佈局
- 2. CSS入門指南-4：頁面佈局
- 3. 頁面佈局基礎篇
- 4. grid佈局快速入門
- 5. CSS佈局快速入門
- 6. HTML5入門教程：響應式頁面佈局
- 7. 頁面佈局
- 8. SEO前端篇（一）頁面佈局
- 9. 響應式佈局頁面之瀑布流佈局淺析
- 10. 快應用，快入門