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

使用imag.js開發過很多類型的模板，比如新聞、社交、辦公類等，今天和大家分享如何開發電商類的app

電商類app的基本功能

商品商城首頁、商品畫面展示、商品信息錄入（展示圖片錄入）、客戶評價（商品圖片錄入）、會員中心（聯繫我們）、後臺信息錄入

 

電商類app製作流程一般分爲七步：

1、明確表達和確立企業需求

2、需求評估

3、項目技術開發與視覺規劃

4、程序開發

5、測試

6、交付上線

7、維護與版本升級

 

我們主要講一下第四步程序開發

 

以下圖爲例，頁面可分爲四大部分

 

1、標題欄

第一部分的標題欄使用原生控件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子標籤添加掃碼的腳本功能——$phone.barcode()

 

2、頂部標籤欄

頂部標籤欄tabbar需要寫在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>

3、內容展示

內容展示部分大多數情況下都會使用list標籤進行佈局,需要跳轉頁面的可以在標籤內添加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>

4、底部標籤頁

底部標籤頁切換不同的頁面是tab標籤實現的，tab標籤很簡單，只要把title和content等控件放到tab裏面就可以了。

 

其他頁面大家想要用什麼樣的佈局方式都可以嘗試一下，這裏就不一一細講了。       

 

詳細代碼可以在github上查看