模板說明 · Niushop單商戶V3開發手冊

# Niushop開源商城模板說明 --- 從niushop3.0版本開始，前臺模板進行了大量的優化完善，保持原有功能不變。嚴格遵循編碼規范進行開發，優化文件目錄結構，移除廢棄代碼文件，減少體積。web端采用ZUI框架，wap端采用MZUI框架，都是開源免費框架，允許二次開發，文檔說明齊全，方便學習，上手簡單，輕量級高性能，具備高可擴展性。在完善模板的過程中，同時對API也進行了整理（包括安全、返回值類型、緩存、效率），所有模板統一調用API接口請求數據，減少對控制器的依賴，便于二開人員自由開發模板，靈活調用數據。 **目前模板已經達到了快速切換整體色調的功能（快速修改網站：顏色、邊框、按鈕、字體大小、表單、彈出框）。** 前端編碼規范參考： [http://alloyteam.github.io/CodeGuide](http://alloyteam.github.io/CodeGuide)、[https://codeguide.bootcss.com](https://codeguide.bootcss.com) 模板開發規范如下： 1. 文件名一律采用小寫+下劃線，命名要簡潔明了，一個功能對應一個JS、CSS文件，個別功能除外（goods、order），如果某個功能img、js比較多，那就單獨建立一個文件夾 2. 每個功能頁面中不能有太多內聯樣式、javascript，HTML、CSS、JS要最大化分離 3. 必須實現base.html，里邊要定義好整套模板的HTML結構、block結構、公共頁面部分（頭部、底部）、全局公共樣式函數，每一塊都要標明注釋，所有模板都要繼承base。 4. 初始化數據調用php的api\(\)函數，JS中的數據調用api\(\)函數，外部js調用語言包，調用lang\(\)函數 5. 控制器中的代碼要盡可能都提取到頁面上，減少對控制器的依賴 6. 模板中的php代碼，api\(\)要盡可能的寫到頂部最上邊，方便管理 7. 必須實現common.css定義公共全局樣式（表單、彈出框、字體大小、按鈕），theme.css（**強烈建議使用less**）為主題樣式，用于調整網站整體色調（里邊必須指定樣式名稱，樣式命名必須規范，例如：文字顏色、邊框顏色、背景顏色、按鈕顏色、使用頻率高的顏色），common.js定義公共函數，例如api、lang、消息彈出框等 **注意事項：** 1. **模板中的所有數據請求來源都是通過調用接口形式的** 2. **在編寫樣式時，要參考theme.css中定義好的主色調、邊框、背景、文字、按鈕顏色等，不能擅自定義顏色，否則后期維護模板工作量很大** 3. **common.css樣式文件中會定義公共通用樣式，在開發模板之前建議先閱讀這個文件，防止寫重復代碼** 我們已經把顏色都整理到了一個文件中，模板中所有的顏色來源都寫在theme.css文件里。在這里我們使用了Less語法，Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。官方文檔：[http://lesscss.cn](http://lesscss.cn) 建議二開模板時，顏色都要調用這里的，不要擅自定義顏色，白色、遮罩層除外 **theme.less部分代碼如下：** ```less @base: #03A9F4; //主色調 @color-black: #333;//黑色 @color-gray: #e5e5e5;//灰色 @color-add-cart: #ff9800; //商品詳情-->>加入購物車 @color-member-index-level: #fbf511; //會員中心-->>會員等級 /*背景色*/ .ns-bg-color { background-color: @base !important; } /*文字顏色*/ .ns-text-color { color: @base !important; } /*灰色*/ .ns-text-color-gray { color: shade(@color-gray, 40%) !important; } /*邊框*/ .ns-border-color{ border-color: @base !important; } /*會員中心*/ .member-info .member-level { color: @color-member-index-level !important; border-color: @color-member-index-level !important; } ``` 代碼解釋： 1. 頂部定義要使用的顏色變量 2. 樣式命名以ns（niushop）開頭， 3. bg == background 背景顏色，text 文字顏色，border 邊框顏色 4. 每個樣式都必須加上 !important API目錄結構如下： > application > > > api > > > > > controller > > > > > > > Address.php 地址接口 > > > > > > > > Article.php 文章接口 > > > > > > > > BaseApi.php base接口，定義加密、簽名驗證、公共變量 > > > > > > > > Config.php 配置接口 > > > > > > > > Distribution.php 分銷接口 > > > > > > > > Goods.php 商品接口 > > > > > > > > Index.php 首頁接口 > > > > > > > > Login.php 登錄接口 > > > > > > > > Member.php 會員接口 > > > > > > > > Order.php 訂單接口 > > > > > > > > Pay.php 支付接口 > > > > > > > > Promotion.php 營銷活動接口 > > > > > > > > Send.php 短信接口 > > > > > > > > Shop.php 店鋪接口 > > > > > > > > Upload.php 上傳接口 > > > > > > > > Wchat.php 微信接口 > > > > > > > > WchatApplet.php 微信小程序接口 wap端控制器目錄結構如下： > application > > > wap > > > > > controller > > > > > > > Article.php 文章 > > > > > > > > BaseWap.php base控制器 > > > > > > > > CustomTemplate.php 自定義模板 > > > > > > > > Distribution.php 分銷 > > > > > > > > DistributionShop.php 分銷店鋪 > > > > > > > > Diy.php 自定義模板 > > > > > > > > Error.php 錯誤控制器 > > > > > > > > Game.php 營銷游戲 > > > > > > > > Goods.php 商品 > > > > > > > > Help.php 幫助 > > > > > > > > Index.php 首頁 > > > > > > > > Login.php 登錄 > > > > > > > > Member.php 會員 > > > > > > > > Notice.php 公告 > > > > > > > > Order.php 訂單 > > > > > > > > Pay.php 支付 > > > > > > > > Pintuan.php 拼團 > > > > > > > > Task.php 執行定時任務 > > > > > > > > Verification.php 核銷 > > > > > > > > Wchat.php 微信 web端控制器目錄結構如下： > application > > > web > > > > > controller > > > > > > > Article.php 文章 > > > > > > > > BaseWeb.php base控制器 > > > > > > > > Error.php 錯誤控制器 > > > > > > > > Goods.php 商品 > > > > > > > > Help.php 幫助 > > > > > > > > Index.php 首頁 > > > > > > > > Login.php 登錄 > > > > > > > > Index.php 首頁 > > > > > > > > Member.php 會員 > > > > > > > > Notice.php 公告 > > > > > > > > Order.php 訂單 > > > > > > > > Topic.php 專題 wap端模板目錄結構 > template > > > wap > > > > > default 模板名稱 > > > > > > > article 文章 > > > > > > > > > detail.html 文章詳情 > > > > > > > > > > lists.html 文章列表 > > > > > > > > distribution 分銷 > > > > > > > > > account.html 會員傭金記錄（明細） > > > > > > > > > > account\_detail.html 具體項的傭金明細 > > > > > > > > > > apply\_partner.html 股東申請 > > > > > > > > > > apply\_promoter.html 分銷商申請 > > > > > > > > > > apply\_region.html 區域代理申請 > > > > > > > > > > commission\_recording.html 進行中傭金 > > > > > > > > > > commission\_shop.html 會員對于當前店鋪的傭金情況 > > > > > > > > > > goods.html 分銷商品設置 > > > > > > > > > > goods\_user.html 我的分銷商品 > > > > > > > > > > index.html 推廣中心 > > > > > > > > > > partner.html 股東首頁 > > > > > > > > > > region.html 區域代理首頁 > > > > > > > > > > shop\_edit.html 修改分銷商店鋪 > > > > > > > > > > team.html 我的團隊 > > > > > > > > > > to\_withdraw.html 申請提現 > > > > > > > > distribution\_shop 分銷店鋪 > > > > > > > > > qrcode\_shop.html 我的店鋪 > > > > > > > > > > usershopgoods.html 店鋪分享 > > > > > > > > game 營銷游戲 > > > > > > > > > scratch\_ticket.html 刮刮樂游戲 > > > > > > > > > > smash\_eggs.html 砸金蛋游戲 > > > > > > > > > > turntable.html 大轉盤游戲 > > > > > > > > goods 商品 > > > > > > > > > bargain.html 砍價商品列表 > > > > > > > > > > bargain\_launch.html 砍價商品發起頁面 > > > > > > > > > > brand.html 品牌專區 > > > > > > > > > > cart.html 購物車 > > > > > > > > > > category.html 商品分類 > > > > > > > > > > combo.html 組合套餐 > > > > > > > > > > coupon.html 優惠券 > > > > > > > > > > coupon\_receive.html 領取優惠券 > > > > > > > > > > detail.html 商品詳情base > > > > > > > > > > detail\_bargain.html 砍價商品詳情，繼承detail.html > > > > > > > > > > detail\_discount.html 限時折扣商品詳情，繼承detail.html > > > > > > > > > > detail\_groupbuy.html 團購商品詳情，繼承detail.html > > > > > > > > > > detail\_pintuan.html 拼團商品詳情，繼承detail.html > > > > > > > > > > detail\_presell.html 預售商品詳情，繼承detail.html > > > > > > > > > > discount.html 限時折扣 > > > > > > > > > > groupbuy.html 團購專區 > > > > > > > > > > lists.html 商品列表 > > > > > > > > > > pintuan.html 拼團專區 > > > > > > > > > > point.html 積分中心 > > > > > > > > > > topic\_detail.html 專題活動詳情 > > > > > > > > > > topics.html 專題活動列表頁面 > > > > > > > > help 幫助中心 > > > > > > > > > index.html 首頁 > > > > > > > > index 首頁 > > > > > > > > > error.html 錯誤頁面 > > > > > > > > > > index.html 首頁 > > > > > > > > > > shop\_index.html 店鋪首頁 > > > > > > > > login 登錄 > > > > > > > > > bind.html 綁定賬號 > > > > > > > > > > find.html 忘記密碼 > > > > > > > > > > lock.html 用戶鎖定界面 > > > > > > > > > > login.html 登錄 > > > > > > > > > > qq\_callback.html QQ回調 > > > > > > > > > > qrcode.html 獲取微信推廣二維碼 > > > > > > > > > > register.html 注冊 > > > > > > > > > > register\_ext.html 完善信息 > > > > > > > > member 會員 > > > > > > > > > account.html 賬戶列表 > > > > > > > > > > account\_edit.html 編輯賬戶 > > > > > > > > > > address.html 會員地址管理 > > > > > > > > > > address\_edit.html 編輯地址 > > > > > > > > > > apply\_withdrawal.html 申請提現 > > > > > > > > > > balance.html 會員余額 > > > > > > > > > > bargain.html 我的砍價 > > > > > > > > > > collection.html 我的收藏 > > > > > > > > > > coupon.html 我的優惠券 > > > > > > > > > > exchange.html 積分兌換余額 > > > > > > > > > > footprint.html 我的足跡 > > > > > > > > > > index.html 會員中心 > > > > > > > > > > info.html 個人資料 > > > > > > > > > > level.html 會員等級 > > > > > > > > > > modify\_face.html 修改頭像 > > > > > > > > > > point.html 店鋪積分流水 > > > > > > > > > > receive\_prize.html 領取獎品 > > > > > > > > > > recharge.html 用戶充值余額 > > > > > > > > > > signin.html 會員簽到 > > > > > > > > > > winning.html 我的中獎記錄 > > > > > > > > > > withdrawal.html 余額提現記錄 > > > > > > > > notice 公告 > > > > > > > > > detail.html 公告詳情 > > > > > > > > > > lists.html 公告列表 > > > > > > > > order 訂單 > > > > > > > > > aftersale.html 售后 > > > > > > > > > > detail.html 訂單詳情 > > > > > > > > > > evaluate.html 評價 > > > > > > > > > > lists.html 訂單列表 > > > > > > > > > > logistics.html 物流詳情頁 > > > > > > > > > > payment.html 待付款訂單 > > > > > > > > > > pickup.html 買家提貨 > > > > > > > > > > pickup\_toexamine.html 自提訂單門店審核 > > > > > > > > > > refund\_detail.html 訂單項退款詳情 > > > > > > > > pay 支付 > > > > > > > > > callback\_pc.html pc端同步回調 > > > > > > > > > > callback\_wap.html wp端同步回調 > > > > > > > > > > info\_pc.html pc端支付詳情 > > > > > > > > > > info\_wap.html wap端支付詳情 > > > > > > > > > > pc\_pay.html pc端余額支付選擇界面 > > > > > > > > > > qrcode.html 微信二維碼支付 > > > > > > > > > > wap\_pay.html wap端余額支付選擇界面 > > > > > > > > pintuan 拼團 > > > > > > > > > lists.html 我的拼單 > > > > > > > > > > share.html 拼團分享界面 > > > > > > > > public 資料文件 > > > > > > > > > css 樣式 > > > > > > > > > > font 字體 > > > > > > > > > > img 圖片 > > > > > > > > > > js JavaScript腳本 > > > > > > > > > > plugin JavaScript 插件 > > > > > > > > verification 核銷 > > > > > > > > > code.html 我的虛擬碼列表 > > > > > > > > > > detail.html 核銷商品詳情 > > > > > > > > > > goods.html 核銷商品審核 > > > > > > > > > > index.html 核銷臺 > > > > > > > > > > share.html 虛擬商品 > > > > > > > > wechat 微信 > > > > > > > > > message.html 圖文消息 > > > > > > > > base.html base頁面，定義HTML結構、引用公共資源 > > > > > > > > config.xml 模板配置信息 > > > > > > > > thumbnail.png 模板縮略圖 > > > > > > wap\_close\_tpl.html wap端關閉模板 web端模板目錄結構 > template > > > web > > > > > default 模板名稱 > > > > > > > article 文章 > > > > > > > > > detail.html 文章詳情 > > > > > > > > > > lists.html 文章列表 > > > > > > > > block 樓層板塊 > > > > > > > > > style\_1.css 板塊一的樣式 > > > > > > > > > > style\_1.html 板塊一 > > > > > > > > > > style\_2.css 板塊二的樣式 > > > > > > > > > > style\_2.html 板塊二 > > > > > > > > > > style\_3.css 板塊三的樣式 > > > > > > > > > > style\_3.html 板塊三 > > > > > > > > goods 商品 > > > > > > > > > brand.html 品牌專區 > > > > > > > > > > cart.html 購物車 > > > > > > > > > > category.html 商品分類 > > > > > > > > > > combo.html 組合套餐 > > > > > > > > > > coupon.html 優惠券 > > > > > > > > > > consult.html 商品咨詢 > > > > > > > > > > detail.html 商品詳情base > > > > > > > > > > detail\_discount.html 限時折扣商品詳情，繼承detail.html > > > > > > > > > > detail\_groupbuy.html 團購商品詳情，繼承detail.html > > > > > > > > > > detail\_presell.html 預售商品詳情，繼承detail.html > > > > > > > > > > discount.html 限時折扣 > > > > > > > > > > groupbuy.html 團購專區 > > > > > > > > > > lists.html 商品列表 > > > > > > > > > > point.html 積分中心 > > > > > > > > > > topic\_detail.html 專題活動詳情 > > > > > > > > > > topics.html 專題活動列表頁面 > > > > > > > > help 幫助中心 > > > > > > > > > index.html 首頁 > > > > > > > > index 首頁 > > > > > > > > > error.html 錯誤頁面 > > > > > > > > > > index.html 首頁 > > > > > > > > login 登錄 > > > > > > > > > find.html 忘記密碼 > > > > > > > > > > login.html 登錄 > > > > > > > > > > register.html 注冊 > > > > > > > > > > register\_ext.html 完善信息 > > > > > > > > member 會員 > > > > > > > > > address.html 會員地址管理 > > > > > > > > > > address\_edit.html 編輯地址 > > > > > > > > > > aftersale.html 售后 > > > > > > > > > > balance.html 會員余額 > > > > > > > > > > balance\_withdrawal.html 余額提現 > > > > > > > > > > collection.html 我的收藏 > > > > > > > > > > coupon.html 我的優惠券 > > > > > > > > > > evaluate.html 商品評價/曬單 > > > > > > > > > > evaluate\_edit.html 商品評價 > > > > > > > > > > exchange.html 積分兌換余額 > > > > > > > > > > footprint.html 我的足跡 > > > > > > > > > > goods.html 購買的商品列表\(虛擬商品\) > > > > > > > > > > index.html 會員中心 > > > > > > > > > > info.html 個人資料 > > > > > > > > > > logistics.html 查看物流 > > > > > > > > > > member\_base.html 會員base > > > > > > > > > > order.html 訂單列表 > > > > > > > > > > order\_detail.html 訂單詳情 > > > > > > > > > > payment.html 待付款訂單 > > > > > > > > > > point.html 店鋪積分流水 > > > > > > > > > > refund.html 退款/退貨/維修訂單列表 > > > > > > > > > > refund\_detail.html 退款詳情 > > > > > > > > > > security.html 賬戶安全 > > > > > > > > > > withdrawal.html 提現記錄 > > > > > > > > notice 公告 > > > > > > > > > detail.html 公告詳情 > > > > > > > > > > lists.html 公告列表 > > > > > > > > topic 專題 > > > > > > > > > detail.html 專題詳情 > > > > > > > > public 資料文件 > > > > > > > > > css 樣式 > > > > > > > > > > font 字體 > > > > > > > > > > img 圖片 > > > > > > > > > > js JavaScript腳本 > > > > > > > > > > plugin JavaScript 插件 > > > > > > > > base.html base頁面，定義HTML結構、引用公共資源 > > > > > > > > config.xml 模板配置信息 > > > > > > > > thumbnail.png 模板縮略圖 > > > > > > web\_close\_tpl.html web端關閉模板