微信小程序似乎會給互聯網帶來一場非比尋常的變革。愛掏網 - it200.com隨處可見關于小程序的文章也讓我們感受到它正在刮起一陣風暴&＃xff0c;所以呢&＃xff0c;抽空研究研究它&＃xff0c;還是非常有必要的&＃xff0c;加上最近小程序公測&＃xff0c;通過注冊未認證的小程序&＃xff0c;我們可以得到一個appid&＃xff0c;下載最新的開發工具&＃xff0c;就可以開始嘗試編寫一些demo了。愛掏網 - it200.com

但是在開發小程序的時候&＃xff0c;由于我們比較常用的編輯器對于.wxml, .wxss后綴的文件并沒有多少支持&＃xff0c;目前我所知道的&＃xff0c;除了vs code有一個叫做vs wxml的插件之外&＃xff0c;幾乎沒有其他插件了&＃xff0c;因此&＃xff0c;沒有代碼補全&＃xff0c;沒有emmet支持&＃xff0c;沒有代碼高亮&＃xff0c;這極大的影響了開發效率&＃xff0c;我也知道有很多來嘗試小程序開發的同學為此而非常困擾。愛掏網 - it200.com

好在&＃xff0c;辦法總是有的。愛掏網 - it200.com

大家都知道大多數編輯器對于html與css的支持非常全面完善&＃xff0c;特別是emmet插件&＃xff0c;對于html和css來說&＃xff0c;已經變得必不可少了。愛掏網 - it200.com而微信的wxml與wxss其實與html與css差別并不大。愛掏網 - it200.com因此&＃xff0c;我們只需要在開發時&＃xff0c;將代碼寫在html與css中&＃xff0c;在保存時&＃xff0c;通過構建工具&＃xff0c;將文件的后綴名改成.wxml與.wxss即可。愛掏網 - it200.com這樣一來&＃xff0c;我們就不用在內置工具中開發&＃xff0c;不用到處找對于小程序支持良好的IDE&＃xff0c;也不用等各位大佬出新的插件了&＃xff0c;就用我們各自最喜歡最熟悉的編輯器就可以。愛掏網 - it200.com下面我以我最熟悉的gulp為例&＃xff0c;與大家分享一下具體如何實現。愛掏網 - it200.com

準備

我們知道小程序的頁面都在pages文件夾下&＃xff0c;首先創建一個demo文件夾&＃xff0c;這里將會放置我們的新頁面&＃xff0c;并在demo文件夾里創建一個dev文件夾&＃xff0c;用于存放html與css文件&＃xff0c;大概的目錄結構如下

// &＃43; 表示文件夾 - 表示文件
&＃43; pages&＃43; demo&＃43; dev&＃43; html- demo.html- demo2.html&＃43; styles- demo.scss- _reset.scss- _libs.scss&＃43; scripts- demo.js

因為在平時開發中&＃xff0c;常常將scss編譯為css使用&＃xff0c;因此這里我們也用scss來進行開發

編譯之后&＃xff0c;得到的結構大約如下

&＃43; pages&＃43; demo&＃43; dev- demo.wxml- demo.wxss- demo.js- gulpfile.js

我們的目的&＃xff0c;就是將dev中的html&＃xff0c;js&＃xff0c;scss&＃xff0c;通過gulp&＃xff0c;編譯成為小程序能夠支持的wxml&＃xff0c;js與wxss&＃xff0c;在清楚了目的之后&＃xff0c;我們就來添加gulp任務就行了。愛掏網 - it200.com

首先在gulpfile.js中定義一個路徑對象&＃xff0c;以方便后續的使用

// 設置相關路徑
var paths &＃61; {wxml: &＃39;html&＃39;,wxss: &＃39;styles&＃39;,js: &＃39;scripts&＃39;,img: &＃39;images&＃39;
};

具體要使用那些gulp插件&＃xff0c;大家在使用的時候根據提示安裝即可&＃xff0c;因為是根據之前的老文件修改&＃xff0c;比較懶沒有去區分具體使用了那些插件&＃xff0c;見諒。愛掏網 - it200.com

HTML

對于html的處理比較簡單&＃xff0c;只有2個操作&＃xff0c;修改后綴名與在你希望的位置生成新的wxml文件

gulp.task(&＃39;wxml&＃39;, function() {var src &＃61; [paths.wxml &＃43; &＃39;/**/*.html&＃39;];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(foreach(function(stream, file) {return stream.pipe(rename(file.relative.replace(/\.html/gi, &＃39;.wxml&＃39;)));})).pipe(gulp.dest(&＃39;../&＃39;)).pipe(notify({onLast: true,message: "transform wxml success!"}));
});

JS

js就更簡單了&＃xff0c;由于開發工具自己內置了編譯方式&＃xff0c;我們只需要按照commonJs的方式處理自己的代碼就行&＃xff0c;不需要進行額外的處理&＃xff0c;但是為了統一&＃xff0c;也將開發代碼放在dev文件中&＃xff0c;編譯時在你想要的位置重新生成即可

gulp.task(&＃39;wxjs&＃39;, function() {var src &＃61; [paths.js &＃43; &＃39;/**/*.js&＃39;];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(gulp.dest(&＃39;../&＃39;)).pipe(notify({onLast: true,message: "transform wxjs success!"}))
});

SCSS

對于scss的處理工作稍微要多一點&＃xff0c;我們的主要目的是要繼續使用scss的語法與特性&＃xff0c;并最終編譯成.wxss文件

gulp.task(&＃39;wxss&＃39;, function() {var src &＃61; [paths.wxss &＃43; &＃39;/**/*!(_).scss&＃39;];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(foreach(function(stream, file) {return stream.pipe(path.extname(file.relative) &＃61;&＃61; &＃39;.less&＃39; ? less() : sass().on(&＃39;error&＃39;, sass.logError));})).pipe(csscomb()).pipe(minifycss({aggressiveMerging: false,advanced: false,compatibility: &＃39;ie7&＃39;,keepBreaks: true})).pipe(cssbeautify({autosemicolon: true})).pipe(foreach(function(stream, file) {return stream.pipe(rename(file.relative.replace(/\.css/gi, &＃39;.wxss&＃39;)));})).pipe(gulp.dest(&＃39;../&＃39;)).pipe(notify({onLast: true,message: "browser reload for css"}));
});

ok&＃xff0c;這樣就大功告成了&＃xff0c;熟悉gulp的同學可以動手嘗試一下了&＃xff0c;熟悉其他構建工具的同學也可以根據我提供的思路實現同樣的效果。愛掏網 - it200.com想來也是不難的。愛掏網 - it200.com當然&＃xff0c;這只是代碼構建的一些小的嘗試&＃xff0c;當面臨具體項目時&＃xff0c;還需要更多更嚴謹的考慮才行。愛掏網 - it200.com

完整代碼

&＃39;use strict&＃39;;var rf &＃61; require("fs");
var path &＃61; require("path");
var through &＃61; require("through2");
var gulp &＃61; require(&＃39;gulp&＃39;);
var concat &＃61; require(&＃39;gulp-concat&＃39;);
var uglify &＃61; require(&＃39;gulp-uglify&＃39;);
var del &＃61; require(&＃39;del&＃39;);
var gutil &＃61; require(&＃39;gulp-util&＃39;);
var less &＃61; require(&＃39;gulp-less&＃39;);
var minifycss &＃61; require(&＃39;gulp-minify-css&＃39;);
var autoprefixer &＃61; require(&＃39;gulp-autoprefixer&＃39;);
var csscomb &＃61; require(&＃39;gulp-csscomb&＃39;);
var cssbeautify &＃61; require(&＃39;gulp-cssbeautify&＃39;);
var rename &＃61; require(&＃39;gulp-rename&＃39;);
var changed &＃61; require(&＃39;gulp-changed&＃39;);
var header &＃61; require(&＃39;gulp-header&＃39;);
var footer &＃61; require(&＃39;gulp-footer&＃39;);
var livereload &＃61; require(&＃39;gulp-livereload&＃39;);
var watch &＃61; require(&＃39;gulp-watch&＃39;);
var imgcache &＃61; require(&＃39;gulp-imgcache&＃39;);
var notify &＃61; require("gulp-notify");
var foreach &＃61; require("gulp-foreach");
var sass &＃61; require("gulp-sass");
var sort &＃61; require(&＃39;gulp-sort&＃39;);
var replace &＃61; require(&＃39;gulp-replace&＃39;);// 圖像處理
var imagemin &＃61; require(&＃39;gulp-imagemin&＃39;);
var pngquant &＃61; require(&＃39;imagemin-pngquant&＃39;);
var spritesmith &＃61; require(&＃39;gulp.spritesmith&＃39;);//錯誤捕獲
var plumber &＃61; require(&＃39;gulp-plumber&＃39;);// 設置相關路徑
var paths &＃61; {wxml: &＃39;html&＃39;,wxss: &＃39;styles&＃39;,js: &＃39;scripts&＃39;,img: &＃39;images&＃39;
};gulp.task(&＃39;wxml&＃39;, function() {var src &＃61; [paths.wxml &＃43; &＃39;/**/*.html&＃39;];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(foreach(function(stream, file) {return stream.pipe(rename(file.relative.replace(/\.html/gi, &＃39;.wxml&＃39;)));})).pipe(gulp.dest(&＃39;../&＃39;)).pipe(notify({onLast: true,message: "transform wxml success!"}));
});gulp.task(&＃39;wxjs&＃39;, function() {var src &＃61; [paths.js &＃43; &＃39;/**/*.js&＃39;];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(gulp.dest(&＃39;../&＃39;)).pipe(notify({onLast: true,message: "transform wxjs success!"}))
});gulp.task(&＃39;wxss&＃39;, function() {var src &＃61; [paths.wxss &＃43; &＃39;/**/*!(_).scss&＃39;];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(foreach(function(stream, file) {return stream.pipe(path.extname(file.relative) &＃61;&＃61; &＃39;.less&＃39; ? less() : sass().on(&＃39;error&＃39;, sass.logError));})).pipe(csscomb()).pipe(minifycss({aggressiveMerging: false,advanced: false,compatibility: &＃39;ie7&＃39;,keepBreaks: true})).pipe(cssbeautify({autosemicolon: true})).pipe(foreach(function(stream, file) {return stream.pipe(rename(file.relative.replace(/\.css/gi, &＃39;.wxss&＃39;)));})).pipe(gulp.dest(&＃39;../&＃39;)).pipe(notify({onLast: true,message: "browser reload for css"}));
});gulp.task(&＃39;watch&＃39;, function() { //監聽文件改變觸發相應任務gulp.watch([paths.wxml &＃43; &＃39;/**/*.html&＃39;], [&＃39;wxml&＃39;]);gulp.watch([paths.js &＃43; &＃39;/**/*.js&＃39;], [&＃39;wxjs&＃39;]);gulp.watch([paths.wxss &＃43; &＃39;/**/*.scss&＃39;], [&＃39;wxss&＃39;]);
});gulp.task(&＃39;default&＃39;, [&＃39;watch&＃39;]);function handleError(err) {gutil.beep();gutil.log(err.toString());notify.onError("Error: "%&＃61;>)(err);this.emit(&＃39;end&＃39;);
}

代碼會有冗余的部分沒有仔細刪除&＃xff0c;忽略即可。愛掏網 - it200.com使用時需要根據提示安裝必要的插件

關于微信小程序&＃xff0c;如果基礎不錯的同學&＃xff0c;可以去積極嘗試一下的&＃xff0c;感覺官方文檔寫的很清晰&＃xff0c;模塊化經驗比較豐富的應該會很容易上手。愛掏網 - it200.com對于基礎比較薄弱的同學保持關注也是非常必要的&＃xff0c;抓緊時間掌握基礎才是關鍵啊。愛掏網 - it200.com

因為小程序大家都處于學習階段&＃xff0c;所以大家都在探索嘛&＃xff0c;希望大家多多發文章&＃xff0c;相互交流學習&＃xff0c;一起進步^_^。愛掏網 - it200.com最近我也會持續更新自己在學習中的收獲與一些實踐demo&＃xff0c;歡迎關注我的公眾號&＃xff0c;一起交流。愛掏網 - it200.com