前戏--什么是快应用

3月20号快应用标准启动发布会后，这一新生技术瞬间火了。前端群里号召大家有兴趣的去调研下快应用，于是我用了近1天时间写了个京东金融快应用简易demo（坑确实多），接下来主要介绍下踩过的坑及其一些特性：

首先介绍下什么是快应用

快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。
快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业开发者全品类开放。
快应用具备传统APP完整的应用体验，无需安装、即点即用。

快应用技术栈

利用前端技术栈编写，转换成原生语法：

图片来源：快应用发布会PPT

图片来源：快应用发布会PPT

理论到实践--实现京东金融小程序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

写在最后，虽然现在『快应用』相比『小程序』还有很多不成熟的地方，但是凭借其【一触即达】的能力，还有国内九大手机厂商联手协同发展快应用生态，丰富的入口（包括负一屏、短信和拍照分享等入口），相信在不久的将来会越来越好的，甚至超过小程序的热度，拭目以待。

参考资料:

快应用开发文档官网 https://doc.quickapp.cn/