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

时间  2019-11-24
标签 微信 程序 代码 构建 初探 如何 继续 使用 html css 开发 栏目 快乐工作 繁體版
原文   原文链接

微信小程序彷佛会给互联网带来一场非比寻常的变革。随处可见关于小程序的文章也让咱们感觉到它正在刮起一阵风暴，因此呢，抽空研究研究它，仍是很是有必要的，加上最近小程序公测，经过注册未认证的小程序，咱们能够获得一个appid，下载最新的开发工具，就能够开始尝试编写一些demo了。css

可是在开发小程序的时候，因为咱们比较经常使用的编辑器对于.wxml, .wxss后缀的文件并无多少支持，目前我所知道的，除了vs code有一个叫作vs wxml的插件以外，几乎没有其余插件了，所以，没有代码补全，没有emmet支持，没有代码高亮，这极大的影响了开发效率，我也知道有不少来尝试小程序开发的同窗为此而很是困扰。html

好在，办法老是有的。gulp

你们都知道大多数编辑器对于html与css的支持很是全面完善，特别是emmet插件，对于html和css来讲，已经变得必不可少了。而微信的wxml与wxss其实与html与css差异并不大。所以，咱们只须要在开发时，将代码写在html与css中，在保存时，经过构建工具，将文件的后缀名改为.wxml与.wxss便可。这样一来，咱们就不用在内置工具中开发，不用处处找对于小程序支持良好的IDE，也不用等各位大佬出新的插件了，就用咱们各自最喜欢最熟悉的编辑器就能够。下面我以我最熟悉的gulp为例，与你们分享一下具体如何实现。小程序

准备

咱们知道小程序的页面都在pages文件夹下，首先建立一个demo文件夹，这里将会放置咱们的新页面，并在demo文件夹里建立一个dev文件夹，用于存放html与css文件，大概的目录结构以下微信小程序

// + 表示文件夹   - 表示文件
+ pages
  + demo
    + dev
      + html
        - demo.html
        - demo2.html
      + styles
        - demo.scss
        - _reset.scss
        - _libs.scss
      + scripts
        - demo.js复制代码

由于在平时开发中，经常将scss编译为css使用，所以这里咱们也用scss来进行开发sass

编译以后，获得的结构大约以下微信

+ pages
  + demo
    + dev
    - demo.wxml
    - demo.wxss
    - demo.js
    - gulpfile.js复制代码

咱们的目的，就是将dev中的html，js，scss，经过gulp，编译成为小程序可以支持的wxml，js与wxss，在清楚了目的以后，咱们就来添加gulp任务就好了。app

首先在gulpfile.js中定义一个路径对象，以方便后续的使用less

// 设置相关路径
var paths = {
    wxml: 'html',
    wxss: 'styles',
    js: 'scripts',
    img: 'images'
};复制代码

具体要使用那些gulp插件，你们在使用的时候根据提示安装便可，由于是根据以前的老文件修改，比较懒没有去区分具体使用了那些插件，见谅。xss

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就更简单了，因为开发工具本身内置了编译方式，咱们只须要按照commonJs的方式处理本身的代码就行，不须要进行额外的处理，可是为了统一，也将开发代码放在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的处理工做稍微要多一点，咱们的主要目的是要继续使用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的同窗能够动手尝试一下了，熟悉其余构建工具的同窗也能够根据我提供的思路实现一样的效果。想来也是不难的。固然，这只是代码构建的一些小的尝试，当面临具体项目时，还须要更多更严谨的考虑才行。

完整代码

'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');

// 设置相关路径
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() { //监听文件改变触发相应任务
    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: <%= error.message="" %="">"
  
  
  

 )(err);
    this.emit('end');
}复制代码

代码会有冗余的部分没有仔细删除，忽略便可。使用时须要根据提示安装必要的插件

关于微信小程序，若是基础不错的同窗，能够去积极尝试一下的，感受官方文档写的很清晰，模块化经验比较丰富的应该会很容易上手。对于基础比较薄弱的同窗保持关注也是很是必要的，抓紧时间掌握基础才是关键啊。

由于小程序你们都处于学习阶段，因此你们都在探索嘛，但愿你们多多发文章，相互交流学习，一块儿进步^_^。最近我也会持续更新本身在学习中的收获与一些实践demo，欢迎关注个人公众号，一块儿交流。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程