安裝

• bower install wxapp-store-model --save

項目目錄結構

├── vender                    插件目錄
|   ├── wxapp-client-sdk         客戶端sdk
|   |   ├── ...            sdk功能包
|   ├── wxapp-shop              商城模塊
|   |   ├── assets         頁面素材包
|   |   ├── etc            模塊配置文件(請求地址,主題,素材等)
|   |   ├── pages          模塊頁面
|   |   └── utils          功能插件
|   └── wyying-assets          小程序公共素材包
├── app.js             小程序入口文件(需要自行添加)
├── app.json           小程序全局配置(配置商城模塊頁面)
├── app.wxss           小程序全局樣式
└── config.js          小程序項目配置文件(配置商城模塊功能)

配置app.json

將需要的頁面配置到 app.json 文件中

"pages": [
        "vendor/wxapp-shop/pages/index/index",
        "vendor/wxapp-shop/pages/order/order",
        "vendor/wxapp-shop/pages/personal/personal",
        "vendor/wxapp-shop/pages/goodsAddr/goodsAddr",
        "vendor/wxapp-shop/pages/homecategory/homecategory",
        "vendor/wxapp-shop/pages/personal/personal",
        "vendor/wxapp-shop/pages/cards/cards",
        "vendor/wxapp-shop/pages/orderDetail/orderDetail",
        "vendor/wxapp-shop/pages/addShip/addShip",
        "vendor/wxapp-shop/pages/deliveryAddress/deliveryAddress",
        "vendor/wxapp-shop/pages/shipAddress/shipAddress",
        "vendor/wxapp-shop/pages/goodsDetail/goodsDetail",
        "vendor/wxapp-shop/pages/createOrder/createOrder",
        "vendor/wxapp-shop/pages/category/category",
        "vendor/wxapp-shop/pages/cart/cart",
        "vendor/wxapp-shop/pages/searchPage/searchPage",
        "vendor/wxapp-shop/pages/logistics/logistics",
        "vendor/wxapp-shop/pages/rechargeRecord/rechargeRecord",
        "vendor/wxapp-shop/pages/recharge/recharge",
        "vendor/wxapp-shop/pages/baseinfo/baseinfo",
        "vendor/wxapp-client-sdk/pages/noAuth/index",   //必選--頁面沒有授權時的跳轉頁面
    ],

配置config.js

var config = {
    "service": {
      "businessId": "1000000018785",
      "apiHost": "https://gt.wxapp.dev.wyying.cn",//請求地址域名
    },
    shopConfig:{
        url: "https://gt.wxapp.dev.wyying.cn",
        shopName:'長頸鹿',     //商城名稱
        theme:{
            radioColor:'#F6B041'    //風格相關,控制radio,switch樣式風格
        },
        centerBg:"http://image-10062465.image.myqcloud.com/i/17/03/06/fa5e67eb5f6a21f51a74a793ce6540be.jpg",//個人中心背景
        /*首頁輪播圖*/
        swiper:[
                {imgUrl:'http://image-10062465.image.myqcloud.com/i/17/03/06/a4c1ca88b101b0f9965beb1bb43fd5bb.jpg',toUrl:"../personal/personal",},
                    {imgUrl:'http://image-10062465.image.myqcloud.com/i/17/03/06/e67ccc050f1b8e03ae2ce726acd12920.jpg',toUrl:''},
                    {imgUrl:'http://image-10062465.image.myqcloud.com/i/17/03/06/5a06abf887031ee82e8556b722ae80e5.jpg',toUrl:''},
        ]
    },
    "version":{
        "designerVersion": "0.0.1v",
        "publishVersion": "0",
        "publishDate": "2017-05-09 21:27:59",
        "appId":"wx90455d5f6625bb9f"
    },
    /*tabBar數據,用于跳轉函數做switchTab判斷用*/
    "tabBar": [
            "/pages/c729850ca5234a5883512b2e2802f9c1",
            "/vendor/center/index"
            ]
};

app.js 與app.wxss

app.js符合設計器中的規范,沒有多余代碼(功能代碼移植到until文件中)

var qcloud = require('./vendor/wxapp-client-sdk/index');
var config = require('./config');
App({
    onLaunch() {
        qcloud.setLoginUrl(config.service.apiHost+"/apis/"+config.version.appId+"/login/login");
        qcloud.setBusinessId(config.service.businessId);
    },    
});

其他

更改主題

• 主題配置在 vender-->wxapp-shop-->assets-->style-->theme.wxss 文件中

例子(通過scss自動生成主題):

$mainColor:  #ED5564;   //主色
$matchColor: #F6B041;   //配色

--命令: $scss theme.sass theme.wxss

• PS: 更改radio,switch顏色,需要在config.js中修改radioStyle屬性

判斷跳轉方式

• 需要在config.js中配置tabBar的絕對路徑,
• 在進行跳轉時,可以判斷跳轉路徑是否為tabBar中的路徑, 跳轉路徑-可以為絕對路徑,也可以為相對路徑
• 歷史棧大于等于5,進行redirectTo,其他navigateTo
•