微信小程序之VS Code开发笔记

上一篇写了微信云函数之VS Code开发笔记，这次介绍微信小程序的命令行开发方式，总之这两篇都未使用“微信开发者工具”这款软件，因为目录官方还未出Linux版^_。
这次我使用的是miniprogram-ci工具，可移步微信小程序官方下载，官方讲解得很清楚，我这里只用到了上传功能。

一、安装NPM工具

• VS Code安装如图所示工具，可以辅助进行自动化操作
• 安装npm命令行工具，上一篇文章已介绍

二、小程序目录结构

- miniprogram
    - aes-decrypt //我的小程序文件夹
        - pages //页面
        - components //组件
        - app.js
        - app.json
        - app.wxss
        - package.json
    - miniprogram-ci //命令行脚本目录
        - ci.js
        - 上传小程序密钥.key
    - node_modules //依赖库目录
    - package.json
    -project.config.json //项目配置文件

注意有2个package.json，如果没有，请在对应的目录内用npm init1个。app.js用微信开发者工具示例代码的就行。

三、安装依赖库

cd进miniprogram目录，使用命令npm install miniprogram-ci --save即为当前项目安装了ci工具，miniprogram/package.json自动变成如下：

{
  "name": "你自己定",
  "private": true,
  "scripts": {
    "upload": "node miniprogram-ci/ci.js"
  },
  "dependencies": {
    "miniprogram-ci": "~2.0.10"
  },
  "author": "",
  "license": "ISC"
}

其中script那一段是我自己加的，目的就是为了npm插件可以自动运行上传脚本。

三、编写上传命令脚本

即ci.js:

const ci = require("miniprogram-ci"); //依赖cli工具
const path  = require("path"); //node自带
const config  = require("../project.config.json"); //项目配置文件
const package  = require("../aes-decrypt/package.json"); //你的小程序配置包文件

const project = new ci.Project({
    appid: config.appid,
    type: "miniProgram",
    projectPath: path.join(process.cwd(),"/aes-decrypt"), //小程序目录
    privateKeyPath: path.join(process.cwd(), "/miniprogram-ci/上传小程序密钥.key"),
    //不上传依赖库，因为这个依赖库是上传脚本所需，不是我的小程序所需，所以也就没必须云端安装依赖库了
    ignores: ["node_modules", "node_modules/**/*", ".git"] 
});

(async () => {
    try {
        // 构建版本号和描述
        const version = package.version;
        const desc = package.description;
        console.log("当前目录:",process.cwd());
        console.log("开始上传...");
        console.log("上传版本号：",version);
        console.log("上传描述:",desc);
        const uploadResult = await ci.upload({
            project,
            version,
            desc,
            setting: {
                es6: true,
                minify: true,
            },
            onProgressUpdate: console.log,
        });
        console.log("上传结果:", uploadResult);
        process.exit();
    } catch (error) {
        console.error("上传失败", error);
        process.exit(1);
    }
})();

四、上传小程序

如图所示，npm插件自动识别了miniprogram/package.json里的脚本，移动到upload那个上面点击run，小程序即上传。

五、可能存在的问题

可能出现上传不成功的问题，这时最大的可能就是密钥失效，请移步小程序/开发管理下载最新的上传密钥。