小程序代码构建初探：如何继续使用html与css开发小程序

如何看待微信公开课小程序热门讨论「小程序代码构建初探：如何继续使用html与css开发小程序」
摘要：小程序代码构建初探：如何继续使用html与css开发小程序
展开：原文来自掘金，已获授权，地址为授权地址以下为部分本文有用评论：@1棵拼搏的寂静草vscode自带修改文件的语言，files.associations，直接wxml指向html，wxss指向css就好了。@linshuaiwebstorm设置一下html关联.wxml格式文件，一样可以像html一样使用emmet正文：微信小程序似乎会给互联网带来一场非比寻常的变革。随处可见关于小程序的文章也让我们感受到它正在刮起一阵风暴，所以呢，抽空研究研究它，还是非常有必要的，加上最近小程序公测，通过注册未认证的小程序，我们可以得到一个appid，下载最新的开发工具，就可以开始尝试编写一些demo了。但是在开发小程序的时候，由于我们比较常用的编辑器对于.wxml,.wxss后缀的文件并没有多少支持，目前我所知道的，除了vscode有一个叫做vswxml的插件之外，几乎没有其他插件了，因此，没有代码补全，没有emmet支持，没有代码高亮，这极大的影响了开发效率，我也知道有很多来尝试小程序开发的同学为此而非常困扰。好在，办法总是有的。大家都知道大多数编辑器对于html与css的支持非常全面完善，特别是emmet插件，对于html和css来说，已经变得必不可少了。而微信的wxml与wxss其实与html与css差别并不大。因此，我们只需要在开发时，将代码写在html与css中，在保存时，通过构建工具，将文件的后缀名改成.wxml与.wxss即可。这样一来，我们就不用在内置工具中开发，不用到处找对于小程序支持良好的IDE，也不用等各位大佬出新的插件了，就用我们各自最喜欢最熟悉的编辑器就可以。下面我以我最熟悉的gulp为例，与大家分享一下具体如何实现。准备我们知道小程序的页面都在pages文件夹下，首先创建一个demo文件夹，这里将会放置我们的新页面，并在demo文件夹里创建一个dev文件夹，用于存放html与css文件，大概的目录结构如下//+表示文件夹表示文件+pages+demo+dev+htmldemo.htmldemo2.html+stylesdemo.scss_reset.scss_libs.scss+scriptsdemo.js因为在平时开发中，常常将scss编译为css使用，因此这里我们也用scss来进行开发编译之后，得到的结构大约如下+pages+demo+devdemo.wxmldemo.wxssdemo.jsgulpfile.js我们的目的，就是将dev中的html，js，scss，通过gulp，编译成为小程序能够支持的wxml，js与wxss，在清楚了目的之后，我们就来添加gulp任务就行了。首先在gulpfile.js中定义一个路径对象，以方便后续的使用//设置相关路径varpaths{wxml:html,wxss:styles,js:scripts,img:images};具体要使用那些gulp插件，大家在使用的时候根据提示安装即可，因为是根据之前的老文件修改，比较懒没有去区分具体使用了那些插件，见谅。HTML对于html的处理比较简单，只有2个操作，修改后缀名与在你希望的位置生成新的wxml文件gulp.task(wxml,function(){varsrc[paths.wxml+//.html];returngulp.src(src).pipe(plumber({errorHandler:handleError})).pipe(foreach(function(stream,file){returnstream.pipe(rename(file.relative.replace(/.html/gi,.wxml)));})).pipe(gulp.dest(../)).pipe(notify({onLast:true,message:transformwxmlsuccess!}));});JSjs就更简单了，由于开发工具自己内置了编译方式，我们只需要按照commonJs的方式处理自己的代码就行，不需要进行额外的处理，但是为了统一，也将开发代码放在dev文件中，编译时在你想要的位置重新生成即可gulp.task(wxjs,function(){varsrc[paths.js+//.js];returngulp.src(src).pipe(plumber({errorHandler:handleError})).pipe(gulp.dest(../)).pipe(notify({onLast:true,message:transformwxjssuccess!}))});SCSS对于scss的处理工作稍微要多一点，我们的主要目的是要继续使用scss的语法与特性，并最终编译成.wxss文件gulp.task(wxss,function(){varsrc[paths.wxss+//!(_).scss];returngulp.src(src).pipe(plumber({errorHandler:handleError})).pipe(foreach(function(stream,file){returnstream.pipe(path.extname(file.relative).less?less():sass().on(error,sass.logError));})).pipe(csscomb()).pipe(minifycss({aggressiveMerging:false,advanced:false,compatibility:ie7,keepBreaks:true})).pipe(cssbeautify({autosemicolon:true})).pipe(foreach(function(stream,file){returnstream.pipe(rename(file.relative.replace(/.css/gi,.wxss)));})).pipe(gulp.dest(../)).pipe(notify({onLast:true,message:browserreloadforcss}));});ok，这样就大功告成了，熟悉gulp的同学可以动手尝试一下了，熟悉其他构建工具的同学也可以根据我提供的思路实现同样的效果。想来也是不难的。当然，这只是代码构建的一些小的尝试，当面临具体项目时，还需要更多更严谨的考虑才行。完整代码usestrict;varrfrequire(fs);varpathrequire(path);varthroughrequire(through2);vargulprequire(gulp);varconcatrequire(gulpconcat);varuglifyrequire(gulpuglify);vardelrequire(del);vargutilrequire(gulputil);varlessrequire(gulpless);varminifycssrequire(gulpminifycss);varautoprefixerrequire(gulpautoprefixer);varcsscombrequire(gulpcsscomb);varcssbeautifyrequire(gulpcssbeautify);varrenamerequire(gulprename);varchangedrequire(gulpchanged);varheaderrequire(gulpheader);varfooterrequire(gulpfooter);varlivereloadrequire(gulplivereload);varwatchrequire(gulpwatch);varimgcacherequire(gulpimgcache);varnotifyrequire(gulpnotify);varforeachrequire(gulpforeach);varsassrequire(gulpsass);varsortrequire(gulpsort);varreplacerequire(gulpreplace);//图像处理varimageminrequire(gulpimagemin);varpngquantrequire(imageminpngquant);varspritesmithrequire(gulp.spritesmith);//错误捕获varplumberrequire(gulpplumber);//设置相关路径varpaths{wxml:html,wxss:styles,js:scripts,img:images};gulp.task(wxml,function(){varsrc[paths.wxml+//.html];returngulp.src(src).pipe(plumber({errorHandler:handleError})).pipe(foreach(function(stream,file){returnstream.pipe(rename(file.relative.replace(/.html/gi,.wxml)));})).pipe(gulp.dest(../)).pipe(notify({onLast:true,message:transformwxmlsuccess!}));});gulp.task(wxjs,function(){varsrc[paths.js+//.js];returngulp.src(src).pipe(plumber({errorHandler:handleError})).pipe(gulp.dest(../)).pipe(notify({onLast:true,message:transformwxjssuccess!}))});gulp.task(wxss,function(){varsrc[paths.wxss+//!(_).scss];returngulp.src(src).pipe(plumber({errorHandler:handleError})).pipe(foreach(function(stream,file){returnstream.pipe(path.extname(file.relative).less?less():sass().on(error,sass.logError));})).pipe(csscomb()).pipe(minifycss({aggressiveMerging:false,advanced:false,compatibility:ie7,keepBreaks:true})).pipe(cssbeautify({autosemicolon:true})).pipe(foreach(function(stream,file){returnstream.pipe(rename(file.relative.replace(/.css/gi,.wxss)));})).pipe(gulp.dest(../)).pipe(notify({onLast:true,message:browserreloadforcss}));});gulp.task(watch,function(){//监听文件改变触发相应任务gulp.watch([paths.wxml+//.html],[wxml]);gulp.watch([paths.js+//.js],[wxjs]);gulp.watch([paths.wxss+//.scss],[wxss]);});gulp.task(default,[watch]);functionhandleError(err){gutil.beep();gutil.log(err.toString());notify.onError(Error:%error.message%)(err);this.emit(end);}代码会有冗余的部分没有仔细删除，忽略即可。使用时需要根据提示安装必要的插件关于微信小程序，如果基础不错的同学，可以去积极尝试一下的，感觉官方文档写的很清晰，模块化经验比较丰富的应该会很容易上手。对于基础比较薄弱的同学保持关注也是非常必要的，抓紧时间掌握基础才是关键啊。原作者:遇见波同学来自:http://gold.xitu.io/post/581f0028a0bb9f0058b4c029