第一个微信小程序

在安装好需要的开发工具后，就可以使用工具开始创建我们的第一个应用啦！

使用Touch WX创建基础工程

1、首先需要手动创建一个空文件夹，作为演示，我们创建一个touchuiwx-test文件夹

2、创建完成后，使用Visual Studio Code打开该文件。在文件夹箭头展开的情况下，在空白处点击右键，选择 Touch WX创建基础工程。

3、这时候会要求输入一个项目名称。

4、 输入名称后回车进行下一步。

这时主要会做三件事情。

4.1、创建了基础工程所需要的文件。

4.2、自动安装项目依赖。

可以看到输出栏目输出了一些信息，这时候需要稍等片刻。

4.3、自动编译输出dist文件目录。当看到输出下图所示内容后，表示内容文件创建完毕。可以看到我们创建的项目有一个dist目录。

dist目录中存放的是Touch WX工程编译后的小程序项目工程。可直接通过微信开发者工具打开预览。

预览Touch WX工程

1、按照提示，打开微信开发者工具新建一个小程序项目。在如图所示的项目目录里，指向创建的touchuiwx-test工程中的dist目录，填入对应的信息。

选择dist目录

2、填写完成，点击确认后。就可以看到我们创建的基础工程。如图所示：

启动Touch WX工程

创建基础工程后，会在dist目录中，生成小程序的初始工程文件。当你在开发的时候，需要先启动开发服务，这样每次在新增或修改页面时，会将文件差量地输出到dist目录中。

1、右键，选择Touch WX启动开发服务。会自动跳至终端栏目执行tui dev 命令。

2、当启动开发服务后，假设我们修改了index.wx文件。保存后，会将修改后的该文件编译成index.html、index.js、index.json、index.wxss至对应dist目录中。

3、如果是修改app.wxa文件，会全部重新输出到dist中

新建页面

1、新建页面时，希望创建在哪个目录，就在目录位置右键。

2、弹出以下窗口。要求输入文件名称，以test为例。输入文件名称后回车。

3、会继续要求输入文件标题，以测试为例。输入的文件标题会作为“navigationBarTitleText”显示。

4、回车确认后，创建test.wx文件，并且会将该页面的路径自动加入到app.wxa中的路由配置列表中。

Touch WX识别为Touch WX工程

在多人开发中，可能会遇到我们的项目并不是自己创建的，而是通过他人传输，或者是git／svn来克隆下来的，在这种情况下，项目基础目录已经完整，但是可能会出现右键菜单并没有 Touch WX 启动开发服务 这一项。这是因为我们的项目并没有识别为 Touch WX工程。 所以需要展开项目，右键并选择 Touch WX 识别为Touch WX工程 。

另外，如果已经安装了vetur E插件， 但代码页面没有颜色，如下图所示：

这同样也是由于项目未识别为Touch WX导致。识别为Touch WX工程后，会生成一个.vscode目录。

在settings.json文件中，写入了以下配置。

{
    "touchuiwx.enable": true,
    "vetur.extensions": [
        ".wxa",
        ".wx"
    ],
    "files.associations": {
        "*.wxa": "vue",
        "*.wx": "vue"
    },
    "git.ignoreLimitWarning": true
}

识别为Touch WX工程后，项目代码会按照vue格式来进行识别，进行着色。

一般在git或者其他的代码库里，我们会对node_modules文件进行忽略。 所以在识别为Touch WX项目后，需要安装依赖。

导入与导出

当你用Touch UI开发了H5应用，可以直接导入到Touch WX进行转换，稍作调整就能生成小程序。

反之也同样，当你Touch WX开发了微信小程序，可以导出为Touch UI工程来生成H5应用。

详解文档的：转换H5

注意事项

1、一个工作区内不能同时有多个文件夹，否则创建基础工程会失败；

2、错误的目录层级会导致编译不通过。不能在项目的目录外，又套了一层目录；

3、项目文件夹图标合起时，右键无法出现插件菜单。必须展开小三角；

4、在项目根目录进行右键无法出现插件菜单，需要点击在空白处。