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

目录

• 一、安装NPM工具
• 二、小程序目录结构
• 三、安装依赖库
• 三、编写上传命令脚本
• 四、上传小程序
• 五、可能存在的问题

上一篇写了微信云函数之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，小程序即上传。

五、可能存在的问题

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