TouchWX 入门教程(1)
TouchWX的安装
--1.node安装
推荐使用node 6.10.0，node下载地址：
- https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x64.msi Windows64位下载
- https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x86.msi Windows32位下载
- https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0.pkg macOS系统下载
安装成功后，windows电脑可以通过cmd，macOS可以通过终端 输入 node -v 来验证是否安装成功。安装成功会弹出如图所示：
--2.开发工具VS Code下载
Visual Studio Code下载地址：https://code.visualstudio.com
Vs Code安装插件
Touch WX框架提供的插件：Touch WX，提供启动／停止开发服务、编译、转换等功能。
（1）安装touchWX插件
（2）安装Vue相关插件Vetur E, Vetur E是我们基于vue语法插件Vetur进行了扩展，具有微信小程序API语法提示功能。
因为Touch WX是基于Vue来做的。在我们的框架中，使用.wx和.wxa为后缀，安装Vue相关的插件后，我们会自动将.wx和.wxa文件以Vue语言识别。
（3）全局安装touchui-wx-cli
输入指令：npm install -g touchui-wx-cli
tui -v 查看是否安装成功
如果windows系统无法成功安装touchui-wx-cli，可能需要以管理员身份启动命令行工具（如果是win10也可以直接打开PowerShell）
扩展知识点：
全局更新： npm update touchui-wx-cli -g
全局安装指定版本，例如安装1.0.89： npm install [email protected] -g
更新touchui-wx-components： npm update touchui-wx-components
安装指定版本。例如安装1.0.89: npm install touchui-wx-components@1.0.89
安装成功后可以通过以下命令查看版本: npm list touchui-wx-components
--3.微信开发者工具安装
下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
--4.导入阿里云仓库的项目：
(1)下载之后，安装依赖：npm install
(2) 自动编译输出dist文件目录: tui build
当看到输出下图所示内容后，表示内容文件创建完毕。可以看到我们创建的项目有一个dist目录。
（3）dist目录中存放的是Touch WX工程编译后的小程序项目工程。可直接通过微信开发者工具打开预览。
（4）预览Touch WX工程
--1.打开微信开发者工具，新建一个小程序项目，项目目录里，指向创建的文件目录工程（我这里项目文件夹为：）中的dist目录，填入对应的信息。
--2.导入项目：
--3.项目展示：
点击导入之后。就可以看到我们创建的基础工程。如图所示：
--4.启动Touch WX 工程
创建基础工程后，会在dist目录中，生成小程序的初始工程文件。当你在开发的时候，需要先启动开发服务，这样每次在新增或修改页面时，会将文件差量的输出到dist目录中。
右键，选择Touch WX启动开发服务。会自动跳至终端栏目执行tui dev 命令。
--5.测试更改
如果是修改app.wxa文件，会全部重新输出到dist中
（下面只是index.html、index.js、index.json、index.wxss文件编译至对应dist目录中）
效果展示：
（6）创建新页面
--1.新建页面时，希望创建在哪个目录，就在目录位置右键。弹出以下窗口。要求输入文件名称，输入文件名称后回车。
输入完页面名称之后，会继续要求输入文件标题，以测试为例。输入的文件标题会作为“navigationBarTitleText”显示。
回车确认后，创建test.wx文件，并且会将该页面的路径自动加入到app.wxa中的路由配置列表中。
--5.拓展知识点：
安装了vetur E插件， 但代码页面没有颜色：使用Touch WX识别为Touch WX工程
H5与小程序相互转换
注意事项
1、一个工作区内不能同时有多个文件夹，否则创建基础工程会失败；
2、错误的目录层级会导致编译不通过。不能在项目的目录外，又套了一层目录；
3、项目文件夹图标合起时，右键无法出现插件菜单。必须展开小三角；
4、在项目根目录进行右键无法出现插件菜单，需要点击在空白处。