下載地址：http://www.xcxwo.com/component/view/447569fd856d25192351f654782c8844

一、 項目說明

微信小程序?qū)崿F(xiàn)移動端商城系統(tǒng)示例。

數(shù)據(jù)來源：媽媽好微信小程序(小程序名：媽媽好服務(wù))，特此聲明。

二、目錄結(jié)構(gòu)

開發(fā)目錄位于src目錄下，如下表：

[開發(fā)注意事項]

1 . 使用es6語法進行代碼編寫(在微信小程序支持的范圍內(nèi))，引入Promise以及co庫語法，處理異步回調(diào)；
2 . css開發(fā)時可直接使用px作為單位，使用gulp替換1px為2rpx，提升開發(fā)效率；
3 . 關(guān)于靜態(tài)資源，由于小程序文件體積限制，建議將images下的圖片放在cdn服務(wù)器上，coding時直接使用/images/xx.png引用，構(gòu)建時在gulpfile.js修改為cdn路徑即可；
4 . gulp構(gòu)建時會將最終資源打包到src同級目錄dist中，開發(fā)者工具調(diào)試時引入該路徑即可。

//config
var cfg = {
    env: 'pro',  //生產(chǎn)環(huán)境or開發(fā)環(huán)境
    imgPath:{
        pro: 'http://cdn.example.com/image/',
        dev: 'http://dev.example.com/image/'
    }
};

//replace and clone
gulp.task('clone', ['clean'], function () {
    return gulp.src(['./src/**/*.*', '!./src/images/**'])
        .pipe(replace('/images/', ifElse(cfg.env === 'pro', function () {
            return cfg.imgPath.pro
        }, function () {
            return cfg.imgPath.dev
        })))  //更改圖片引用路徑
        .pipe(replace(/(d+)px/gi, function (m, num) {
            return 2 * num + 'rpx';
        })) //替換1px為2rpx
        .pipe(gulp.dest('./dist'))
});

三、項目截圖

商品分類：

商品詳情：

個人中心：

四、開發(fā)必備

1 . 微信開發(fā)者工具下載

2 . 小程序開發(fā)參考文檔

3 . 項目地址：git@github.com:mmrxia/weapp-mall.git

五、其他說明

本項目提供小程序的一些開發(fā)思路和技術(shù)選型，涉及到項目敏感數(shù)據(jù)和配置相關(guān)均已屏蔽。
歡迎大家提issue討論交流。