commonindex.wxss (公共样式类)
component (自定义组件文件夹)....
config (配置文件夹)index.js (本次运行的接口)switch.js (根据命令行运行参数,修改index.js里面的项目配置信息)envdev.js (开发环境)prod.js (正式环境)test.js (测试环境)
img (图片文件夹)....
http (http文件夹,对请求的状态、数据和格式统一处理)http.js (请求的封装)mock-min.js (mock数据)data.js (mock数据的获取)
node_modules (下载的模块包)
pages (页面)<folderName> (文件夹名称，一个大模块一个文件夹，里面可以嵌套多层文件夹)
template (wxml模版文件夹)fileName.scss (模版样式，可以全局引入样式，也可以当前页面引入)fileName.wxml (模版页面)
utils (脚本文件夹)<folderName> (第三方组件库, 比如iView Weapp)deal.wxs (wxml页面用到的脚本语言，对数据处理)pluginUnit (js插件)util.js (js函数的封装与脚本)wxapi.js (封装微信自带的api函数)...
.gitignore
app.js (小程序特有的文件)
app.json (同上)
app.wxss (同上)
app.scss (用scss来处理样式，可以引入其他scss文件)
gulpfile.js (scss文件的处理的gulp文件)
package.json

微信小程序的自定义组件官网文档: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
第三方组件库iView Weapp: https://weapp.iviewui.com/docs/guide/start
微信小程序的wxs官网文档: https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/
微信小程序的api官网文档: https://developers.weixin.qq.com/miniprogram/dev/api/

细节

1. 微信小程序组件
   官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

2. 配置文件 index.js

/*** 根据命令行运行参数，修改 /config/switch.js 里面的项目配置信息* 即动态的将 /config/env 下的配置文件的内容写入到 /config/index.js 中*/const fs = require('fs')
//源文件
const sourceFiles = {prefix: '/env/',dev: 'dev.js',test: 'test.js',prod: 'prod.js'
}
//目标文件
const targetFiles = {prefix: '/',filename: 'index.js'
}
// 获取命令行参数
const cliArgs = process.argv.splice(2)
const env = cliArgs[0]
const sourceFile = sourceFiles[env]
// 获取源文件中的内容
fs.readFile(__dirname + sourceFiles.prefix + sourceFile,(err, data) => {if (err) {throw new Error(`Error occurs when reading file ${sourceFile}.\nError detail: ${err}`)process.exit(1)}// 写入文件(这里只做简单的强制替换整个文件的内容)fs.writeFile(__dirname + targetFiles.prefix + targetFiles.filename, data, 'utf8', (err) => {if (err) {throw new Error(`error occurs when reading file ${sourceFile}. Error detail: ${err}`)process.exit(1)}})})

3. 图片的引入
   路径可以用绝对路径: /img/home_btn_icon_efficiency@2x.png

4. http的封装

import * as mod from './data.js'
const config = require('../config/index');
const {$Toast,$Message
} = require('../utils/dist/base/index')let isOpen = false; //切换数据入口function ajax(params, app) {let url = params.url || '',data = params.data || {},defaultTips = params.defaultTips || true,method = params.method || 'get';let contentType = 'application/json';let token = '';if (method.toUpperCase() === 'POST') {contentType = 'application/x-www-form-urlencoded';}if (params.header) {if (params.header['content-type']) {contentType = params.header['content-type'] || contentType;}if (params.header['token']) {token = params.header['token'] || token;}}let header = {'content-type': contentType}if (token) {header["token"] = token}var baseUrl = config.baseUrl + url;if (params.doPay) {baseUrl = config.payUrl + url;}var defaultData = {'t': new Date().getTime()}if (!isOpen) {return new Promise(function (resolve, reject) {wx.request({url: baseUrl,method: method,data: Object.assign(defaultData, data),header: header,success: function (res) {resolve(res)// 是否显示成功或失败var data = res.datavar code = data.code;if (code === 10000 && showSuccess) {// 暂时不做处理} else if (code === -10000 && showFail) {var errorMsg = data.desc;var errorMsg = errorMsg.replace(new RegExp(/(<br>)/g), ' ');$Toast({content: errorMsg,type: 'error',duration: 1});} else if (code === -10001 && showFail) {// 重新登录wx.redirectTo({url: '/pages/login/login'});} else if (code === 500 && showFail) {$Toast({content: data.desc,type: 'error',duration: 1});}},fail: function (res) {reject(res)}})})} else {for (let key in mod) {if (mod[key]().url == url && fn) {fn(mod[key](data).data)break;}}}}module.exports = ajax

5. mock.js
   官方文档: http://mockjs.com/examples.html

6. 样式的编写,统一用scss来编写，gulp配置文件会编译、重命名wxss并压缩。
   gulpfile.js

var gulp = require('gulp')
var sass = require('gulp-sass')
let rename = require('gulp-rename'); //文件重命名
var watch = require('gulp-watch'); // 监听文件改变、新增、删除
let watchFilesPath = ['pages/**/*.scss']
let watchFilesPath2 = ['component/**/*.scss']gulp.task('watch', function () {w(watchFilesPath, 'wxss');w(watchFilesPath2, 'component');function w(path, task) {watch(path, function () {gulp.start(task);});}
});
gulp.task('wxss', function () {return gulp.src(watchFilesPath) //这是需要转化的sass文件.pipe(sass({outputStyle: 'compressed' // 压缩})).pipe(rename({extname: ".wxss" // 文件扩展名})).pipe(gulp.dest('pages')) //这是转化后css的文件
});
gulp.task('component', function () {return gulp.src(watchFilesPath2) //这是需要转化的sass文件.pipe(sass({outputStyle: 'compressed' // 压缩})).pipe(rename({extname: ".wxss" // 文件扩展名})).pipe(gulp.dest('component')) //这是转化后css的文件
});// 监听任务时先执行一次编译
gulp.task('default', function () {gulp.start(['wxss', 'component', 'watch'])
})

下载模块注意: (路径为通配符的时候)

"gulp": "^3.9.1",
"gulp-watch": "^4.3.11" // 在gulp3x中,得使用gulp-watch4x版本,用5x版本不起作用

7. 第三方组件库
   官方文档: https://weapp.iviewui.com/docs/guide/start
   官方下载地址: https://github.com/TalkingData/iview-weapp