小程序项目构建（二）

1. 多环境切换

接上文：因为小程序只会存在一个预览版本，所以测试同学需要在其他环境测试时，都需要找到开发同学手动更改环境并重新发布体验版，非常之麻烦。
可以利用微信摇一摇来实现环境的切换。

let Env_config = require('./index')
let envList = Object.keys(Env_config)
import envObj from './env'

module.exports = function shake() {
  let flag = true;
  wx.onAccelerometerChange(function (res) {
    let pages = getCurrentPages()
    let page = pages[pages.length - 1].route
    // 只能在首页切换环境
    if (page.indexOf('pages/index/index') === -1) return
    if (!flag) return
    if ((res.x > 1) || (res.y > 1) || (res.z > 1)) {
      flag = false;
      setTimeout(() => {
        flag = true
        // 2s 内只触发一次
      }, 2000)
      wx.vibrateLong()
      wx.showModal({
        title: '摇一摇切环境',
        content: '选择环境',
        success(res) {
          if (res.confirm) {
            wx.showActionSheet({
              itemList: envList,
              success(res) {
                changeEnv(envList[res.tapIndex])
              },
              fail(res) {
                console.log(res.errMsg)
              }
            })
          }
        }
      })
    }
  })
}

function changeEnv(curEnv) {
  envObj.env = curEnv
}

app.js 也要进行处理，在线上环境不应该有切换环境的功能。

if (envObj.env !== 'production') {
  const shake = require('./env/shake')
  shake()
}

还有个问题，如果每次打包时需要手动修改 env 环境变量的值，也挺麻烦的。我们可以利用 gulp-replace 在 gulp 打包的时候进行环境自动切换：

const  watch = require('gulp-watch');
const  replace = require('gulp-replace');
const  gulpSequence = require('gulp-sequence');
const  Alias = require('gulp-wechat-weapp-src-alisa');

// js task 不处理 env.js 文件的打包
gulp.task('js', function() {
    return gulp.src(['src/**/*.js', `!src/env/env.js`])
        .pipe(Alias(aliasConfig))
        .pipe(gulp.dest('dist/'))
})

// envCompile task 对 env.js 进行打包
gulp.task('envCompile:dev', function () {
  return gulp.src(['src/env/env.js'])
      // 把匹配到的环境变量替换成 'dev'
      .pipe(replace(/['"](.+)['"]/, function(match) {
        console.log('match', match)
        return "'dev'"
      }))
      .pipe(gulp.dest('dist/env'))
})

gulp.task('envCompile:production', function () {
  return gulp.src(['src/env/env.js'])
      // 把匹配到的环境变量替换成 'production'
      .pipe(replace(/['"](.+)['"]/, function(match) {
        console.log('match', match)
        return "'production'"
      }))
      .pipe(gulp.dest('dist/env'))
})

// ... 省略一些 task

gulp.task('watch', function() {
    function w(path, task) {
      watch(path, function () {
        gulp.start(task);
      })
    }
    w('src/**/*', ['wxss']);
    w('src/**/*.js', ['js']);
    w('src/**/*.html', ['wxml']);
    w('src/**/*.png', ['image']);
    w('src/**/*.json', ['json']);
});


gulp.task('dev', function(cb) {
  gulpSequence('del', 'image', 'wxss', 'js', 'wxml', 'json', 'envCompile:dev', 'watch', cb);
});

gulp.task('production', function(cb) {
  gulpSequence('del', 'image', 'wxss', 'js', 'wxml', 'json', 'envCompile:production', 'watch', cb);
});

这样运行 gulp dev 就是跑的就是 dev 环境下的接口，gulp production 就是 production 环境下的接口。

最后，为了防止上线前没有运行 gulp production，需要在微信开发者工具里增加自定义处理命令，在每次上传前运行 gulp envCompile:production:

// project.config.json 文件
	"scripts": {
		"beforeCompile": "",
		"beforePreview": "",
		"beforeUpload": "gulp envCompile:production"
	},

至此，小程序项目就构建得差不多啦。
下次给大家带来的是小程序性能方面的相关话题。