Touch WX 开发文档

Touch WX 开发文档

第一个微信小程序

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

使用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目录。

img

在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、在项目根目录进行右键无法出现插件菜单,需要点击在空白处。