Skip to content

Home

Jump to bottom
苏南 edited this page Oct 13, 2018 · 3 revisions

小程序项目基础框架+共用组件

目录结构：

project --项目目录
¦—— app.js
¦  ¦  app.json
¦  ¦  app.wxss
¦  ¦  config.js
¦  ¦  
¦——pages
¦————index
¦  ¦  ¦      index.js
¦  ¦  ¦      index.json
¦  ¦  ¦      index.wxml
¦  ¦  ¦      index.wxss
¦  ¦  ¦      
¦——utils
¦        format.js
¦        logs.js
¦        request.js
¦        storage.js
¦        util.js
¦        validate.js
¦          
sass --wxss预编译文件
    app.scss
    index.scss
 gulpfile.js --gulp配置文件
 package.json 
 README.md  --说明文件

使用说明 ：

  1. 为提高开发效率，使用sass编译项目css;
  2. 分sass、project、package.json、gulpfile.js一级目录，
  3. css相关预编译文件放在sass目录内，自动输出wxss后缀文件到以scss文件名对应的目录内，如:
    
    index.scss => project/pages/index/index.wxss

    list.scss => project/pages/list/index.wxss

    list-detail.scss => project/pages/list/detail/index.wxss
  1. 在web微信调试工具中添加引入项目时，请选择miniprograms目录下的 project 文件夹，如下图： 输入图片说明
gulpfile.js配置文件：
var gulp = require('gulp')
var path = require('path')
var autoprefixer = require('gulp-autoprefixer')
var sass = require('gulp-sass')
var combiner = require('stream-combiner2')
var rename = require("gulp-rename")
var minifycss = require('gulp-minify-css')
gulp.task('sass', function () {
	var combined = combiner.obj([

		//监听sass目录下的全部scss, 也可以更改为只监听某一个scss文件
		gulp.src(['./sass/**/*.{wxss,scss}']), 
			sass().on('error', sass.logError),

			 //自动处理前缀
			autoprefixer([
				'iOS >= 8',
				'Android >= 4.1'
			]),

			//文件压缩，可选择性开启 默认不会开启
			//minifycss(), 
			//文件重命名，及输出到不同的目录
			rename(function (path) { 
				var item = path.basename;
				var name = 'index';
				if(item == 'app'){//根目录，
					item ='';
					name='app';

				}else{

					//以pages为输入点，但不包含pages目录，多层级目录请以 '_'或'-'为分割区分目录；
					//如 pages下的 home/list/say ; 则sass目录下的文件名为 home-list-say.scss ;
					item = 'pages/'+(item.replace(/(-|_)/g,'/'));

				};

				path.dirname = "/"+item;
				path.basename = name;
				path.extname = ".wxss";
				
		}),

			//所有文件输出出口从project为根节点
		gulp.dest('./project') 
	]);
});
gulp.task('watch', function () {
    gulp.watch('./sass/**/*.scss',['sass']);
});

@IT·平头哥联盟名字的由来“蜜獾”(huan),绰号 “平头哥” 被称为最无所畏惧的动物;它的个性：哥的一生不是在打架，就是在去打架的路上。管你是谁，生死看淡不服就干;当下社会过于浮躁和虚假，我们敬畏这种(人/动物),虽说[自古深情留不住，唯有套路得人心],但我们还是期望人与人之间，少一些欺骗/套路，多一点真诚，任何事都坦然面对，拥抱变化、不惧未来

Clone this wiki locally