微信小程序似乎會給互聯(lián)網(wǎng)帶來一場非比尋常的變革。愛掏網(wǎng) - it200.com隨處可見關(guān)于小程序的文章也讓我們感受到它正在刮起一陣風(fēng)暴&＃xff0c;所以呢&＃xff0c;抽空研究研究它&＃xff0c;還是非常有必要的&＃xff0c;加上最近小程序公測&＃xff0c;通過注冊未認(rèn)證的小程序&＃xff0c;我們可以得到一個appid&＃xff0c;下載最新的開發(fā)工具&＃xff0c;就可以開始嘗試編寫一些demo了。愛掏網(wǎng) - it200.com
但是在開發(fā)小程序的時候&＃xff0c;由于我們比較常用的編輯器對于.wxml, .wxss后綴的文件并沒有多少支持&＃xff0c;目前我所知道的&＃xff0c;除了vs code有一個叫做vs wxml的插件之外&＃xff0c;幾乎沒有其他插件了&＃xff0c;因此&＃xff0c;沒有代碼補(bǔ)全&＃xff0c;沒有emmet支持&＃xff0c;沒有代碼高亮&＃xff0c;這極大的影響了開發(fā)效率&＃xff0c;我也知道有很多來嘗試小程序開發(fā)的同學(xué)為此而非常困擾。愛掏網(wǎng) - it200.com
好在&＃xff0c;辦法總是有的。愛掏網(wǎng) - it200.com
大家都知道大多數(shù)編輯器對于html與css的支持非常全面完善&＃xff0c;特別是emmet插件&＃xff0c;對于html和css來說&＃xff0c;已經(jīng)變得必不可少了。愛掏網(wǎng) - it200.com而微信的wxml與wxss其實(shí)與html與css差別并不大。愛掏網(wǎng) - it200.com因此&＃xff0c;我們只需要在開發(fā)時&＃xff0c;將代碼寫在html與css中&＃xff0c;在保存時&＃xff0c;通過構(gòu)建工具&＃xff0c;將文件的后綴名改成.wxml與.wxss即可。愛掏網(wǎng) - it200.com這樣一來&＃xff0c;我們就不用在內(nèi)置工具中開發(fā)&＃xff0c;不用到處找對于小程序支持良好的IDE&＃xff0c;也不用等各位大佬出新的插件了&＃xff0c;就用我們各自最喜歡最熟悉的編輯器就可以。愛掏網(wǎng) - it200.com下面我以我最熟悉的gulp為例&＃xff0c;與大家分享一下具體如何實(shí)現(xiàn)。愛掏網(wǎng) - it200.com
準(zhǔn)備
我們知道小程序的頁面都在pages文件夾下&＃xff0c;首先創(chuàng)建一個demo文件夾&＃xff0c;這里將會放置我們的新頁面&＃xff0c;并在demo文件夾里創(chuàng)建一個dev文件夾&＃xff0c;用于存放html與css文件&＃xff0c;大概的目錄結(jié)構(gòu)如下
// &＃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
因?yàn)樵谄綍r開發(fā)中&＃xff0c;常常將scss編譯為css使用&＃xff0c;因此這里我們也用scss來進(jìn)行開發(fā)
編譯之后&＃xff0c;得到的結(jié)構(gòu)大約如下
&＃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任務(wù)就行了。愛掏網(wǎng) - it200.com
首先在gulpfile.js中定義一個路徑對象&＃xff0c;以方便后續(xù)的使用
// 設(shè)置相關(guān)路徑
var paths &＃61; {wxml: &＃39;html&＃39;,wxss: &＃39;styles&＃39;,js: &＃39;scripts&＃39;,img: &＃39;images&＃39;
};
具體要使用那些gulp插件&＃xff0c;大家在使用的時候根據(jù)提示安裝即可&＃xff0c;因?yàn)槭歉鶕?jù)之前的老文件修改&＃xff0c;比較懶沒有去區(qū)分具體使用了那些插件&＃xff0c;見諒。愛掏網(wǎng) - 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;由于開發(fā)工具自己內(nèi)置了編譯方式&＃xff0c;我們只需要按照commonJs的方式處理自己的代碼就行&＃xff0c;不需要進(jìn)行額外的處理&＃xff0c;但是為了統(tǒng)一&＃xff0c;也將開發(fā)代碼放在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的處理工作稍微要多一點(diǎn)&＃xff0c;我們的主要目的是要繼續(xù)使用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的同學(xué)可以動手嘗試一下了&＃xff0c;熟悉其他構(gòu)建工具的同學(xué)也可以根據(jù)我提供的思路實(shí)現(xiàn)同樣的效果。愛掏網(wǎng) - it200.com想來也是不難的。愛掏網(wǎng) - it200.com當(dāng)然&＃xff0c;這只是代碼構(gòu)建的一些小的嘗試&＃xff0c;當(dāng)面臨具體項(xiàng)目時&＃xff0c;還需要更多更嚴(yán)謹(jǐn)?shù)目紤]才行。愛掏網(wǎng) - 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;);// 設(shè)置相關(guān)路徑
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() { //監(jiān)聽文件改變觸發(fā)相應(yīng)任務(wù)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;);
}
代碼會有冗余的部分沒有仔細(xì)刪除&＃xff0c;忽略即可。愛掏網(wǎng) - it200.com使用時需要根據(jù)提示安裝必要的插件
關(guān)于微信小程序&＃xff0c;如果基礎(chǔ)不錯的同學(xué)&＃xff0c;可以去積極嘗試一下的&＃xff0c;感覺官方文檔寫的很清晰&＃xff0c;模塊化經(jīng)驗(yàn)比較豐富的應(yīng)該會很容易上手。愛掏網(wǎng) - it200.com對于基礎(chǔ)比較薄弱的同學(xué)保持關(guān)注也是非常必要的&＃xff0c;抓緊時間掌握基礎(chǔ)才是關(guān)鍵啊。愛掏網(wǎng) - it200.com
因?yàn)樾〕绦虼蠹叶继幱趯W(xué)習(xí)階段&＃xff0c;所以大家都在探索嘛&＃xff0c;希望大家多多發(fā)文章&＃xff0c;相互交流學(xué)習(xí)&＃xff0c;一起進(jìn)步^_^。愛掏網(wǎng) - it200.com最近我也會持續(xù)更新自己在學(xué)習(xí)中的收獲與一些實(shí)踐demo&＃xff0c;歡迎關(guān)注我的公眾號&＃xff0c;一起交流。愛掏網(wǎng) - it200.com