AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-26 21:05:10

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序---商城模块
相关的资讯,希望对您有帮助。

微信小程序---商城模块

安装bower install wxapp-store-model --save项目目录结构├── vender 插件目录 | ├── wxapp-client-sdk 客户端sdk | | ├── ... sdk功能包 | ├── wxapp-shop 商城模块 | | ├── assets 页面素材包 | | ...

安装

  • 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


22阅读 | 0评论
你的回应
写文章

8081