新技能get|有了它你也可以做电商app

使用imag.js开发过很多类型的模板，比如新闻、社交、办公类等，今天和大家分享如何开发电商类的app
[b]电商类app的基本功能[/b]
商品商城首页、商品画面展示、商品信息录入（展示图片录入）、客户评价（商品图片录入）、会员中心（联系我们）、后台信息录入
[img]http://chuantu.biz/t5/33/1473758028x1699807396.png[/img]
[b]电商类app制作流程一般分为七步：[/b]
1、明确表达和确立企业需求
2、需求评估
3、项目技术开发与视觉规划
4、程序开发
5、测试
6、交付上线
7、维护与版本升级

我们主要讲一下第四步程序开发

以下图为例，页面可分为四大部分
[img]http://chuantu.biz/t5/33/1473758338x1822611387.png[/img]
[b]1、标题栏[/b]
第一部分的标题栏使用原生控件title标签，和HTML中的title不同的是他有且仅有三个子标签分别是<left><center><right>，第一部分可以划分为三个小模块扫码按钮、搜索框和消息按钮分别对应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="在众多App开发中选择iMAG" 
        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>

在left子标签添加[url=http://www.imagapp.com/doc/phone-barcode]扫码[/url]的脚本功能——$phone.barcode()

[b]2、顶部标签栏 [/b]
顶部标签栏[url=http://www.imagapp.com/doc/tabbar]tabbar[/url]需要写在header标签里，通过多个item来切换不同的页面

<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>

[b]3、内容展示[/b]
内容展示部分大多数情况下都会使用[url=http://www.imagapp.com/doc/list]list[/url]标签进行布局,需要跳转页面的可以在标签内添加onclick点击事件属性。

<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>

[b]4、底部标签页[/b]
底部标签页切换不同的页面是[url=http://www.imagapp.com/doc/tabs]tab[/url]标签实现的，tab标签很简单，只要把title和content等控件放到tab里面就可以了。

其他页面大家想要用什么样的布局方式都可以尝试一下，这里就不一一细讲了。
[img]http://chuantu.biz/t5/33/1473758468x1822611387.png[/img]
详细代码可以在[url=https://github.com/imagjs/ecommerce-app]github[/url]上查看