Foreplay – What is a quick app
The nascent technology went viral after the Launch of the Fast Application Standards on March 20. The front group called for everyone interested in investigating the fast application, so I spent nearly 1 day to write a JINGdong financial fast application simple demo (pit is indeed many), the next mainly introduces the pit and some of its characteristics:
First of all, what is fast application
- Fast application is a new application form based on mobile phone hardware platform. The standard is jointly formulated by the fast application alliance formed by mainstream mobile phone manufacturers.
- The birth of fast application standard will build a standard platform in the aspects of R&D interface, ability access, developer services, and so on, and open to individual developers and enterprise developers in a platform-based ecological mode.
- Quick application has the complete application experience of traditional APP, no installation, point-and-use.
Fast application technology stack
Written using the front-end technology stack, converted to native syntax:
Photo source: PPT of quick Application press conference
Photo source: PPT of quick Application press conference
Theory to Practice – jingdong finance small program Demo
Look at the official documentation
Development experience “Layout”
If you need to install NodeJS 6.0 or later, please download NodeJS from the official website. V6.11.3 is recommended (higher than 8.0 will cause an error), and you should also have an Android 8.0. After compilation, you can scan the code to install NodeJS.
- To implement automatic compilation of the project, open two Windows, one running NPM run build-> NPM run Server and the other running NPM run Watch.
- After initializing the project using hap init, set the project configuration information in the manifest.json configuration file in the SRC directory. For example, if the design is based on 750px, set it in config as follows:
"config": {
"designWidth":750
}
Copy the code- Page structure is very similar to vuejs, dom elements are written in template, style tags support less syntax, need to be installed
lessandless-loaderDependency, style tag Settingslang="less"The business logic is written in script. It is important to note that there can only be one root node in the template. - To solve the screen fit problem, all sizing styles (e.g. Width, font-size) are based on the base width (default 750px) and scaled according to the actual screen width, e.g. Width :100px. On a 1500px screen width, width is actually 200px. The framework currently only supports the length unit PX and does not support percentages.
"margin:0 auto;"Margin&padding can have 1 to 4 values, but it is not supported in practice. The top, right, bottom, and left values should be written separately. - The text must be contained in the text tag to be displayed, and the style class for the text must be written in the text tag to be effective (just like the React-native text tag).
- The position attribute does not support absolute or relative, and can be fixed or None. (Unsupported attribute values report errors)
backgroundProperty does not support URL notation, use background image insteadbackground-imageProperties. It’s important to emphasize that,backgroundProperty support gradient style, not yetbackground-color,background-imageUse simultaneously.background-imageCurrently not supported withbackground-color.border-colorSimultaneous use; Does not support network image resources, support local image resources. Use the background colorbackground-colorTo set, the color value must also be 6-digit hexadecimal, as in:"background-color:#ffffff;"box-shadowandfont-familyProperty is not currently supported.- The framework provides a set of basic interface components. Interface component tags support common HTML5 tags, such as div, A, INPUT, etc., as well as components related to the native UI, such as Switch, Slider, List, etc. (note: ul Li, DL DT dd, etc., are not supported). An error will be reported if the tag is not supported. For details about how to use the tag, see the official documentation – Components.
- Although the flex box layout is used by default for page layout, the property-contents-content support is limited, with valid enumeration values of:
flex-start|flex-end|center|space-between, the error message is as follows:
- To use a list component, its children must be blocks, and then its children must be list-item. [for,tid,if,elif,else]; [for,tid,if,elif,else]; 2) The type attribute of list-item is a mandatory attribute; 3) Be careful to use if or for directives inside the list-item, because the DOM structure of the list-item of the same type attribute must be exactly the same, and using if or for directives will cause DOM structure differences;
- Div components support attributes such as ID, style, class, disabled, if, elIf, else, for, tid, show.
- When DOM structure is complex, scrolling pages will be stuck, because Native cannot reuse list elements implemented by div components. In order to achieve smooth list scrolling experience, it is recommended to use list components instead of DIV components to realize long list layout, because Native will reuse list-items of the same type attribute.
Easy to achieve jingdong financial small program home page
With a few principles in mind, proceed to the pit mining tour (suggestion: read the official documentation first, especiallyThe supported range of CSS properties) Here’s a screenshot of the first version of the home page:
Sample code “Dom section”
<template> <! -- There can only be one root node in template --> <div class="mainWrapper">
<div class="topPart">
<div class="topBg"></div>
<div class="slogan_title">
<image class="slogan" src=". /.. /Images/[email protected]"></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/[email protected]"></image>
</div>
</template>
Copy the codeSample code “CSS section”
<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/[email protected]');
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.5 px; 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>
Copy the codeSample code “JS part”
<script> import router from '@system.router' export default { data: { title: 'jingdong financial, menuList: [{icon:'. /... / Images/[email protected] '. Name: 'assets'}, {icon:' the. /.. / Images/[email protected] ', name: 'check earnings'}, {icon:'. /... / Images/[email protected] '. Name: 'check lines'}, {icon:' the. /.. / Images/[email protected] ', name: 'check bills'}, {icon:'. /... / Images/[email protected] '. Name :' credit '}], articleList:[{title:' credit '} ', IMG :'./../Images/bottom- IMG02.png ', brief:' IOUS is a personal consumption credit product launched by JINGdong Finance. After applying for JINGdong IOUS, you can use the ious to spend on jingdong Mall, enjoy the service of consumption now, payment later, and support the repayment of up to 24 installments. '},{title:' Jingdong Finance's financial products, how about the revenue? ', img:'./../Images/bottom-img01.png', brief:' JINGdong Term Finance is a simple, safe and stable financial product launched by Jingdong Finance. The investment returns and investment time of various term finance products are clear at a glance. '}]}, routeDetail(id) {let uri = '// 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>Copy the codeOverview of the underlying architecture and interface capabilities
Underlying architecture:
Photo source: PPT of quick Application press conference
Photo source: PPT of quick Application press conference
Interface capability:
Photo source: PPT of quick Application press conference
Written in the end, although now “quick apply” than “small program” and there are many immature place, but because of its ability, a touch namely da 】 【 there are nine big domestic handset manufacturers to collaborative development faster application ecology, rich entrance (including a screen, text and photo sharing entrance), believe in the near future will be better and better, even more than the heat of the small program, Wait and see.
References:
The official website of the app development documentation is doc.quickapp.cn/