快应用入门--页面布局篇
前戏--什么是快应用
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. 外部其他进程嵌入到qt FindWindow获得窗口句柄 报错无法链接的外部符号 [email protected] 无法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的应用-TOPK问题
- 6. 实例演示ElasticSearch索引查询term,match,match_phase,query_string之间的区别
- 7. 数学基础知识 集合
- 8. amazeUI 复择框问题解决
- 9. 背包问题理解
- 10. 算数平均-几何平均不等式的证明,从麦克劳林到柯西
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 快应用页面样式与布局
- 2. CSS入门指南-4：页面布局
- 3. 页面布局基础篇
- 4. grid布局快速入门
- 5. CSS布局快速入门
- 6. HTML5入门教程：响应式页面布局
- 7. 页面布局
- 8. SEO前端篇（一）页面布局
- 9. 响应式布局页面之瀑布流布局浅析
- 10. 快应用，快入门