小程序項目構建（二）

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"
	},
複製代碼

至此，小程序項目就構建得差很少啦。 下次給你們帶來的是小程序性能方面的相關話題。