common
index.wxss (公共样式类)
component (自定义组件文件夹)
....
config (配置文件夹)
index.js (本次运行的接口)
switch.js (根据命令行运行参数,修改index.js里面的项目配置信息)
env
dev.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/
细节
-
微信小程序组件
官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ -
配置文件 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)
}
})
})
-
图片的引入
路径可以用绝对路径: /img/[email protected] -
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.data
var 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
-
mock.js
官方文档: http://mockjs.com/examples.html -
样式的编写,统一用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版本不起作用
- 第三方组件库
官方文档: https://weapp.iviewui.com/docs/guide/start
官方下载地址: https://github.com/TalkingData/iview-weapp