微信小程序开发-touchuiwx

touch开发文档：http://www.wetouch.net/touchwx_doc/

微信开发者工具安装

下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

开发工具下载

进入官网进行下载。Visual Studio Code下载地址：https://code.visualstudio.com

touch WX构成：

Touch WX插件，提供右键菜单，通过可视化的方式来执行命令

touchui-wx-cli 脚手架环境 ，需要手动全局安装

touchui-wx-components组件库， 在使用插件创建工程时会自动安装项目依赖，其中包含了这部分。

安装插件：

因为Touch WX是基于Vue来做的。在我们的框架中，使用.wx和.wxa为后缀，安装Vue相关的插件后，我们会自动将.wx和.wxa文件以Vue语言识别。

npm install -g touchui-wx-cli

查看是否安装成功 

tui -v

安装成功后可以通过以下命令查看版本

npm list touchui-wx-components

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

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

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

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

tui build

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

 

启动服务：tui dev

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

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

在多人开发中，可能会遇到我们的项目并不是自己创建的，而是通过他人传输，或者是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项目后，需要安装依赖。