-commerce app. The basic functions of
an e-commerce app include the home page of the product store, product screen display, and product information entry ( Display image input), customer evaluation (product image input), member center (contact us), background information input
The e-
commerce app production process is generally divided into seven steps: 1. Clearly express and establish enterprise needs
2. Demand assessment
3. Project Technology development and visual planning
4. Program development
5. Testing
6. Delivery online
7. Maintenance and version upgrade
We mainly talk
about the fourth step of program development . The following figure is an example . The title bar uses the native control title tag. Unlike the title in HTML, it has only three sub-tags: <left><center><right>. The first part can be divided into three small modules, scan code button, search box and the message button respectively correspond to the three sub-tags of title
<title style="background:#ffffff;padding:10 13">
<left>
<button onclick="" style="background:sweep.png;height:20;width:20"></button>
</left>
<center>
<input type="search" placeholder="Choose iMAG among many app development"
style="tint-color:#ffffff;background:#e6e6e6;color:#323232;width:281;font-size:10;corner-radius:5"/>
</center>
<right>
<button onclick="" style="background:message.png;height:20;width:20"></button>
</right>
</title>
Add the script function of scanning - $phone.barcode()
2. Top tab bar The
top tab bar tabbar needs to be written in the header tag, and switch different pages through multiple items
<header>
<tabbar style="background:#ffffff;label-color:#717171,#303030;indicator-color:#d80b08">
<item label="推荐"></item>
<item label="精选"></item>
<item label="国内"></item>
<item label="海淘"></item>
<item label="母婴"></item>
<item label="美妆"></item>
</tabbar>
</header>
3. Content display The content display part will use the list
tag for layout in most cases. If you need to jump to the page, you can add the onclick click event attribute in the tag.
<contents>
<content style="background:#FFFAFA">
<slideimage style="height:186" indicatorPosition="right" fillwidth="true" autoplay="true">
<item src="http://img1.efu.com.cn/upfile/bdvt/m-3d97ae02-1f65-463e-a0ad-cf1a39013135.png"/>
<item src="http://img1.efu.com.cn/upfile/bdvt/m-7034ba7b-1177-4173-ad7a-4755957ef15a.jpg"/>
</slideimage>
<list style="height:55" type="transparent">
<item style="padding:12 26 9">
<col>
<row style="background:signin.png;height:17;width:17"></row>
<row><label style="font-size:11;align:center;color:#5c5c5c;padding-top:3">今日签到</label></row>
</col>
<col>
<row style="background:update.png;height:17;width:17"></row>
<row><label style="font-size:11;align:center;color:#5c5c5c;padding-top:3">每日上新</label></row>
</col>
<col>
<row style="background:shoplimit.png;height:17;width:17"></row>
<row><label style="font-size:11;align:center;color:#5c5c5c;padding-top:3">限时抢购</label></row>
</col>
<col>
<row style="background:discount.png;height:17;width:17"></row>
<row><label style="font-size:11;align:center;color:#5c5c5c;padding-top:3">推荐有礼</label></row>
</col>
</item>
</list>
</content>
</contents>
4.
Bottom Tab Pages Switching between different pages at the bottom of the tab is realized by the tab label. The tab label is very simple, as long as the title and content and other controls are placed in the tab.
You can try what kind of layout you want to use on other pages, so I won't go into details here.
Detailed code can be viewed on github