vscode开发微信小程序插件-vscode微信小程序

开发手册

快手小程序平台提供快手小程序VSCode插件vscode开发微信小程序插件，支持智能代码提示、快速创建页面/组件、KMA Task自定义等功能。

借助快手小程序VSCode插件，开发者可以使用VSCode开发快手小程序，支持原生KSML、第三方框架（如uni-app）两种开发方式，使用kma命令行（打开新窗口）和开发面板运行模拟器调试、代码预览和发布。

插件安装

尖端：

一、VSCode安装下载：VSCode安装(opens new window)

2、可以在.vscode/extensions.json中添加如下配置，向团队成员推荐快手小程序VSCode插件

{
    "recommendations": [
        "kuaishou-miniapp.kuaishou-miniapp"
    ]
}

复制

开发流程 1.项目初始化

平台提供了三种初始化方式：项目创建、项目导入、项目搬迁：

1.创建项目

1）原生KSML项目

创建方法具体操作

开发者工具

命令行

2）第三方框架项目

需要使用第三方框架脚手架来创建。

以uni-app为例，可以执行如下命令：

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

复制

2.导入项目

原生KSML项目和第三方框架项目都支持以下两种导入方式：

导入方法具体操作

开发者工具

命令行

3、现有项目搬迁

对于已有的微信和字节原生小程序，支持通过项目搬迁快速转为快手小程序：

导入方法具体操作

开发者工具

命令行

2.VSCode编码

TIPS：打码前请完成快手小程序VSCode插件安装

1.创建页面和组件

1）原生KSML小程序项目

在VSCode文件管理器中，右键页面或任意目录vscode开发微信小程序插件，选择新建快手小程序页面或新建快手小程序组件，创建原生KSML页面或组件。

2）第三方框架项目

使用第三方框架脚手架或手动创建页面/组件。

2.编写KSML和JS代码/第三方框架代码

1）对于KSML原生小程序项目，可以使用以下插件：

2）对于第三方框架（如uni-app）项目，推荐使用以下插件：

TIPS：快手小程序VSCode插件功能说明(opens new window)

三、运行调试 1、模拟器运行调试 2、代码预览 3、远程调试 4、提交git代码 5、小程序发布前评估

六、小程序代码上传发布进阶开发一、KMA Task的使用

VSCode 提供了一种 Task 机制来运行脚本而不依赖于命令行调用。 快手小程序VSCode插件使用VSCode Task Provider将KMA Task注入到VSCode中，同时支持预定义类型和自定义类型供开发者使用。

1. 使用预定义的 KMA 任务 2. 自定义 KMA 任务

对于预定义的KMA Task，参数修改过程如下：

参数 参数类型 参数说明 备注

脚本

细绳

要执行的命令标识符

执行 kma --help 查看所有可用命令

小程序根目录

细绳

快手小程序项目根目录

kma login/islogin/logout/new/import/transform命令不需要指定该参数

选项

大批

要执行的命令标识符

附加到命令的可选选项

2、示例：使用KMA Task一键发布uni-app快手小程序

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm",

			"script": "build:mp-kuaishou",
			"problemMatcher": [],
			"label": "npm: dev:mp-kuaishou",
		},
		{
			"type": "kma",
			"script": "upload",
			"miniAppRoot": "./dist/build/mp-kuaishou",
			"problemMatcher": [],
			"label": "发布uniapp小程序",
			"detail": "发布上传至快手小程序开放平台",
			"dependsOn": ["npm: dev:mp-kuaishou"]
		}
	]
}

复制