微信小程序之代碼構(gòu)建初探:如何繼續(xù)使用html與css開發(fā)小程序

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

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

    好在,辦法總是有的。愛掏網(wǎng) - it200.com

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

    準(zhǔn)備

    我們知道小程序的頁面都在pages文件夾下,首先創(chuàng)建一個demo文件夾,這里將會放置我們的新頁面,并在demo文件夾里創(chuàng)建一個dev文件夾,用于存放html與css文件,大概的目錄結(jié)構(gòu)如下

    // + 表示文件夾 - 表示文件
    + pages+ demo+ dev+ html- demo.html- demo2.html+ styles- demo.scss- _reset.scss- _libs.scss+ scripts- demo.js

    因?yàn)樵谄綍r開發(fā)中,常常將scss編譯為css使用,因此這里我們也用scss來進(jìn)行開發(fā)

    編譯之后,得到的結(jié)構(gòu)大約如下

    + pages+ demo+ dev- demo.wxml- demo.wxss- demo.js- gulpfile.js

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

    首先在gulpfile.js中定義一個路徑對象,以方便后續(xù)的使用

    // 設(shè)置相關(guān)路徑
    var paths = {wxml: 'html',wxss: 'styles',js: 'scripts',img: 'images'
    };

    具體要使用那些gulp插件,大家在使用的時候根據(jù)提示安裝即可,因?yàn)槭歉鶕?jù)之前的老文件修改,比較懶沒有去區(qū)分具體使用了那些插件,見諒。愛掏網(wǎng) - it200.com

    HTML

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

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

    JS

    js就更簡單了,由于開發(fā)工具自己內(nèi)置了編譯方式,我們只需要按照commonJs的方式處理自己的代碼就行,不需要進(jìn)行額外的處理,但是為了統(tǒng)一,也將開發(fā)代碼放在dev文件中,編譯時在你想要的位置重新生成即可

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

    SCSS

    對于scss的處理工作稍微要多一點(diǎn),我們的主要目的是要繼續(xù)使用scss的語法與特性,并最終編譯成.wxss文件

    gulp.task('wxss', function() {var src = [paths.wxss + '/**/*!(_).scss'];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(foreach(function(stream, file) {return stream.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) {return stream.pipe(rename(file.relative.replace(/\.css/gi, '.wxss')));})).pipe(gulp.dest('../')).pipe(notify({onLast: true,message: "browser reload for css"}));
    });

    ok,這樣就大功告成了,熟悉gulp的同學(xué)可以動手嘗試一下了,熟悉其他構(gòu)建工具的同學(xué)也可以根據(jù)我提供的思路實(shí)現(xiàn)同樣的效果。愛掏網(wǎng) - it200.com想來也是不難的。愛掏網(wǎng) - it200.com當(dāng)然,這只是代碼構(gòu)建的一些小的嘗試,當(dāng)面臨具體項(xiàng)目時,還需要更多更嚴(yán)謹(jǐn)?shù)目紤]才行。愛掏網(wǎng) - it200.com

    完整代碼

    'use strict';var rf = require("fs");
    var path = require("path");
    var through = require("through2");
    var gulp = require('gulp');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var del = require('del');
    var gutil = require('gulp-util');
    var less = require('gulp-less');
    var minifycss = require('gulp-minify-css');
    var autoprefixer = require('gulp-autoprefixer');
    var csscomb = require('gulp-csscomb');
    var cssbeautify = require('gulp-cssbeautify');
    var rename = require('gulp-rename');
    var changed = require('gulp-changed');
    var header = require('gulp-header');
    var footer = require('gulp-footer');
    var livereload = require('gulp-livereload');
    var watch = require('gulp-watch');
    var imgcache = require('gulp-imgcache');
    var notify = require("gulp-notify");
    var foreach = require("gulp-foreach");
    var sass = require("gulp-sass");
    var sort = require('gulp-sort');
    var replace = require('gulp-replace');// 圖像處理
    var imagemin = require('gulp-imagemin');
    var pngquant = require('imagemin-pngquant');
    var spritesmith = require('gulp.spritesmith');//錯誤捕獲
    var plumber = require('gulp-plumber');// 設(shè)置相關(guān)路徑
    var paths = {wxml: 'html',wxss: 'styles',js: 'scripts',img: 'images'
    };gulp.task('wxml', function() {var src = [paths.wxml + '/**/*.html'];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(foreach(function(stream, file) {return stream.pipe(rename(file.relative.replace(/\.html/gi, '.wxml')));})).pipe(gulp.dest('../')).pipe(notify({onLast: true,message: "transform wxml success!"}));
    });gulp.task('wxjs', function() {var src = [paths.js + '/**/*.js'];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(gulp.dest('../')).pipe(notify({onLast: true,message: "transform wxjs success!"}))
    });gulp.task('wxss', function() {var src = [paths.wxss + '/**/*!(_).scss'];return gulp.src(src).pipe(plumber({errorHandler: handleError})).pipe(foreach(function(stream, file) {return stream.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) {return stream.pipe(rename(file.relative.replace(/\.css/gi, '.wxss')));})).pipe(gulp.dest('../')).pipe(notify({onLast: true,message: "browser reload for css"}));
    });gulp.task('watch', function() { //監(jiān)聽文件改變觸發(fā)相應(yīng)任務(wù)gulp.watch([paths.wxml + '/**/*.html'], ['wxml']);gulp.watch([paths.js + '/**/*.js'], ['wxjs']);gulp.watch([paths.wxss + '/**/*.scss'], ['wxss']);
    });gulp.task('default', ['watch']);function handleError(err) {gutil.beep();gutil.log(err.toString());notify.onError("Error: "%=>)(err);this.emit('end');
    }

    代碼會有冗余的部分沒有仔細(xì)刪除,忽略即可。愛掏網(wǎng) - it200.com使用時需要根據(jù)提示安裝必要的插件

    關(guān)于微信小程序,如果基礎(chǔ)不錯的同學(xué),可以去積極嘗試一下的,感覺官方文檔寫的很清晰,模塊化經(jīng)驗(yàn)比較豐富的應(yīng)該會很容易上手。愛掏網(wǎng) - it200.com對于基礎(chǔ)比較薄弱的同學(xué)保持關(guān)注也是非常必要的,抓緊時間掌握基礎(chǔ)才是關(guān)鍵啊。愛掏網(wǎng) - it200.com

    因?yàn)樾〕绦虼蠹叶继幱趯W(xué)習(xí)階段,所以大家都在探索嘛,希望大家多多發(fā)文章,相互交流學(xué)習(xí),一起進(jìn)步^_^。愛掏網(wǎng) - it200.com最近我也會持續(xù)更新自己在學(xué)習(xí)中的收獲與一些實(shí)踐demo,歡迎關(guān)注我的公眾號,一起交流。愛掏網(wǎng) - it200.com




    聲明:所有內(nèi)容來自互聯(lián)網(wǎng)搜索結(jié)果,不保證100%準(zhǔn)確性,僅供參考。如若本站內(nèi)容侵犯了原著者的合法權(quán)益,可聯(lián)系我們進(jìn)行處理。
    發(fā)表評論
    更多 網(wǎng)友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 国模无码视频一区| 国产伦理一区二区| 日韩精品一区二区三区大桥未久| 中文字幕日韩一区| 精品视频一区二区三区四区五区| 无码国产精品久久一区免费| 国产午夜精品一区二区三区| 三级韩国一区久久二区综合| 无码人妻精品一区二区三区久久久 | 在线视频国产一区| 日韩一区精品视频一区二区| 国产观看精品一区二区三区| 日韩精品一区在线| 天天视频一区二区三区| 蜜桃传媒一区二区亚洲AV| 3D动漫精品一区二区三区| 日韩精品区一区二区三VR| 国产在线精品一区二区三区直播| 国产a久久精品一区二区三区| 国产精品99精品一区二区三区| 97久久精品无码一区二区天美| 农村乱人伦一区二区| 久久久久人妻精品一区二区三区 | 无码一区二区三区爆白浆| 久久综合亚洲色一区二区三区| 国模丽丽啪啪一区二区| 久久久久国产一区二区三区| 国产福利电影一区二区三区久久老子无码午夜伦不 | 手机看片福利一区二区三区| 手机看片福利一区二区三区| 亚洲色婷婷一区二区三区| 久久久久一区二区三区| 久久一本一区二区三区| 久久一本一区二区三区| 少妇人妻精品一区二区三区| 免费无码VA一区二区三区| 亚洲av日韩综合一区二区三区| 成人丝袜激情一区二区| 亚洲国产一区二区三区| 亚洲一区精品无码| 99精品国产高清一区二区|