vscode 开发uni-app

总结：在vsocde中命令行运行uni-app项目并调起微信开发者工具，
关键字： vscode，uni-app，命令行

前言

用习惯了Vscode,觉得HBuilder太难用。
虽uni-app提供了cli项目可以用vscode开发时，但又需要手动打开微信开发者工具。
想 yarn dev运行项目并自动打开微信开发者工具（类似Hbuilder）

步骤

微信提供了命令行调用开发者工具方式
编写node脚本调起来开发者工具，并加入package.json
运行yarn dev 启动项目,并打开微信开发者工具进行愉快的开发了

第一步：启动脚本

第二步：脚本调起开发者工具

目录结构

env.js ：微信开发者工具所在目录，每个成员可能不同，需要单独配置
openIDE.js ：主要脚本位置
project.config.json : yarn dev:mp-weixin 后,产物中的配置文件，避免微信开发者工具打开报错

// 目录 script/openIDE.js
const cp = require('child_process');
const path = require('path');
const fs = require('fs');
const fse = require('fs-extra');

// 生成的小程序代码路径
const devPath = path.join(__dirname, '..', 'dist/dev/mp-weixin');

fse.removeSync('../dist');

// 微信开发者工具所在目录，每个成员可能不同，需要单独配置
//env.js 文件 exports.exec_path = '"D:\\Program Files (x86)\\Tencent\\微信web开发者工具\\cli.bat"';
// 注意路径需要用双引号包围，避免空格和中文执行错误
const exec_path = require('./env').exec_path;


// 避免微信开发者工具打开不存在，报错
if (!fs.existsSync(devPath)) {
  fs.mkdirSync(devPath, { recursive: true });
}

// project.config.json 不存在，开发者工具会报错，所以搞一个默认的移动过去
fs.copyFileSync(__dirname + '/project.config.json', devPath + '/project.config.json');


// 调用cli工具打开微信开发者工具 并指定目录。
function executor() {
  const args = 'open --project ' + devPath;
  cp.exec(`${exec_path} ${args}`, (error, stdout, stderr) => {
    if (error) {
      console.error(`执行错误: ${error}`);
      return;
    }
    console.log(`stdout: ${stdout}`);
    console.error(`stderr: ${stderr}`);
  });
}

executor();

vscode 开发uniapp 处理

vscode 开发uni-app

前言

步骤