安装

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