AppCan微应用开发工具使用指南

AppCan微应用开发工具是基于vscode开发的插件。

使用方式

命令方式
1. 打开查看 - 命令面板
2. 输入 AppCanUI 选择要执行的命令并回车
右键方式
1. 在左侧资源管理器右击
2. 点击弹出菜单中的以 AppCanUI 开头的选项

安装插件

使用vscode进行开发，需要下载安装插件AppCanUI。如下图：

安装完成后，我们就可以使用这个插件进行开发AppCan微应用了。

本插件为AppCan 的微应用的开发环境，可以创建微应用demo工程、创建基础工程、新建页面，对接开放平台，上传开发包并发布到开放平台上，也可以运行及调试。

使用过程：
1、新建文件夹
2、使用vscode打开这个文件夹
3、点击左下角开放平台菜单进入登录页面进行登录
4、在资源管理器右键创建demo工程\基础工程
5、如果创建的是基础工程，那么就在弹出的选择应用和选择微应用页面中选择，点击完成后代码生成加载
6、右键点击菜单安装依赖
7、右键点击菜单编译并启动开发服务
8、F5，进入调试环境，在vscode的代码中添加断点进行断点调试
9、右键点击菜单新建页面，进行编码开发
10、右键点击菜单编译并导出工程，输出dist文件夹
11、在dist文件夹上右键点击菜单打包，输出output文件夹，此文件夹下存在dist.zip
12、在dist.zip文件上右键点击菜单上传版本至开放平台，在上传发布版本页面填写相关信息上传
13、右键点击菜单微应用信息，在打开的微应用信息页面上查看微应用信息，在此页面上可以更换微应用
14、在应用调试器上查看微应用，首先右键点击菜单下载应用调试器，在打开的页面上下载安装应用调试器app到手机上，然后右键点击菜单查看 WiFi 真机同步 IP 和端口号，再启动微手机上的应用调试器app，点击圆圈，输入IP及端口号，连接成功后，右键点击菜单WiFi 真机同步，将dist文件夹的代码同步到手机上进行预览
15、右键点击转换菜单项，生成微应用转微信小程序的中间过程
16、右键点击生成微信小程序菜单项，进行中间过程转换为微信小程序

部分功能菜单截图如下：

打开微应用的文件夹

新建一个文件夹，并打开它。如下图：

上图是创建了一个test的文件夹，并且打开了它

登录开放平台

点击左下角开放平台的登录按钮，在登录页面输入账号信息，并且登录。如下图：

上图中登录时需要开发者首先在发放平台进行注册并且有服务商，否则无法创建微应用。

在登录页面同时需要填写注册的开放平台的url地址。

创建微应用

在未创建微应用的情况下，开发者可以在资源管理器区域右键，查看此时的菜单，如下图：

如果点击创建demo工程，将直接展示加载demo工程；如果点击创建基础工程，则会先显示选择应用页面，再显示选择微应用页面，选择完微应用后才会加载基础工程。如果在未登录状态下，则会先进入登录页面，再进行之后的流程。如下图展示：

上图中最后的一张图即为初始化的默认工程文件及默认的菜单。

新建页面

开发者可以在要创建页面的文件夹上右键点击菜单新建页面，创建新的页面时会先弹出输入框要求输入新建页面的文件名，输入完成确认后再输入页面的title之后页面会自动生成，同时路由也会自动加入到main.js文件中。

编译并启动开发服务

开发者开发过程中，右键点击菜单编译并启动开发服务后，默认访问地址为：http://localhost:8080，如下图：

模拟器调试

编译启动开发服务后，按F5，会自动启动浏览器加载http://localhost:8080，如果编译启动开发服务的端口号变更请先修改launch.json文件中的url，如下图：

启动调试后，我们可以调整浏览器的大小，或者调试模式的移动设备形式，便于查看。在vscode中我们可以在需要的位置上添加断点进行调试。

编译并导出web工程

开发者右键点击菜单编译并导出web工程，代码编译后输出dist文件夹，如下图：

打包

在导出的web工程dist文件夹上，右键点击菜单打包，代码将压缩成dist.zip文件输出到output文件夹中。如下图：

上传版本至开放平台

在dist.zip文件上右键点击菜单上传版本至开放平台，在上传发布版本页面填写相关信息上传。如下图：

查看微应用信息

开发者右键点击菜单微应用信息，可以查看当前微应用工程关联的微应用信息，如果未关联或者微应用在开放平台已删除，则会跳转到变更微应用页面进行重新关联操作。如下图：

点击上传中的更换微应用信息按钮，可以切换关联的微应用。

真机同步代码

开发者可以使用真机同步编译好的代码到手机上，在应用调试器app上可以查看真机效果。操作流程：

1.右键点击菜单应用调试器，用手机扫描弹出的页面上的二维码进行下载安装应用调试器app。
2.右键点击菜单查看 WiFi 真机同步 IP 和端口号，再启动微手机上的应用调试器app，点击圆圈，输入获取到的IP及端口号。
3.连接成功后（同一网段），右键点击菜单WiFi 真机同步，将dist文件夹的代码同步到手机上进行预览。

如上图所示，应用调试器将dist文件夹下的代码都同步到手机上进行运行，开发过程中，我们需要每次查看都需要重新编译并同步代码才能看到最新的代码效果。为了解决这个问题，我们可以将下图中的config.xml文件中的框出的index.html变更为调试服务的地址如：http://localhost:8080，再将此变更后的config.xml同步到手机上，这样就能实时查看效果了。

生成微信小程序

开发者可以把微应用转换为微信小程序。具体操作流程如下所示：

1.右键点击转换菜单项，用于把微应用转换为中间过程（wx目录）。
2.右键点击生成微信小程序菜单项，用于把中间过程（wx目录）转换为微信小程序（wx/dist目录）。
3.转换程序注意事项请参考相关文档，生成的dist目录可以用微信开发者工具打开，查看相应效果。

AppCanUI

appcan