简介
TouchUI-WX是一套完全免费的微信小程序开发框架，包含丰富的UI控件用于官方组件的补充。与TouchUI开发方式很相似，也是通过VSCode编辑器+插件的方式开发，经过编译后输出小程序代码。与其他小程序框架最主要的区别在于：TouchUI-WX完全是基于小程序官方的自定义组件机制实现，输出的是小程序原始代码，而不是输出开发者完全无法阅读的编译代码。这样当遇到问题时，开发者可以很方便的定位问题所在，还可以基于输出的原始代码继续开发。当你用TouchUI开发了H5应用，可以直接导入到TouchUI-WX进行转换，稍作调整就能生成小程序。反之也同样，当你TouchUI-WX开发了微信小程序，可以导出为TouchUI工程来生成H5应用。
地址：http://www.touchui.io/wx.html
GitHub : https://github.com/uileader/touchuiwx
特点
1、组件扩充：
增加了30多种常用的组件用于官方组件的补充。
2、功能扩充：
兼容阿里的iconfont图标库，海量矢量图标随意使用；补充了常用样式库、支持less语法、支持全局配置主题色等
3、开发体验改善：
四文件方式改为单文件方式，通过VSCode编辑器+插件的方式开发，拥有web开发体验；
4、小程序转为H5应用：
可以与H5开发框架TouchUI工程相互转换，发布成webApp。开发一套代码，拥有两套应用。
这套框架的原理是：
将TouchUI-WX工程中所写的代码进行编译，直接输出为微信小程序工程原始代码。扩充的30多种组件，完全是基于小程序官方的自定义组件机制实现（row&col除外）。
所以它支持小程序的全部语法，怎么开发小程序，就怎么开发TouchUI-WX。
不过因为是单文件的开发方式，在文件的代码结构上稍有不同。请注意这一点。
这样好处在于：
1、开发者迁移成本很小。
可以轻松的将已有的小程序移植为TouchUI-WX工程，来使用它的扩展能力；
2、便于排查错误。
当遇到问题时，开发者也可以随时查看输出的小程序原始代码来定位问题所在。不会搞不清楚到底是框架问题还是自己代码的问题；
3、按需编译
由于小程序对体积有限制，在使用框架开发时，只有使用到的组件才会编译输出为小程序源码。没用到的不会输出。
4、不会对框架产生依赖。
以后不想用了这套框架，可以直接对已经输出的小程序工程进行维护。
源码下载：
https://github.com/uileader/touchuiwx
注意事项：
在安装环境导入工程后，由于此工程没有包含项目依赖，需要先识别为TouchUI WX工程并使用右键菜单安装项目依赖。
环境安装
TouchUI WX支持在Windows上开发或者在Mac开发。
在使用TouchUI WX前，我们需要安装node以及开发工具。
微信开发者工具安装
下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
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 来验证是否安装成功。安装成功会弹出如图所示：
开发工具下载
进入官网进行下载。Visual Studio Code下载地址：https://code.visualstudio.com
TouchUI WX构成
TouchUI WX插件，提供右键菜单，通过可视化的方式来执行命令
touchui-wx-cli 脚手架环境 ，需要手动全局安装
touchui-wx-components组件库， 在使用插件创建工程时会自动安装项目依赖，其中包含了这部分。
安装插件
1、下载安装完成后，打开Visual Studio Code。我们需要安装一些插件来帮助我们更好的进行开发。
TouchUI WX框架提供的插件：TouchUI WX，提供启动／停止开发服务、编译、转换等功能。
接下来，我们来学习如果在Visual Studio Code中如何安装插件。
首先我们需要点击扩展，如下图所示的红框位置。
在这里可以搜索我们想要安装的插件，找到TouchUI WX ，然后点击安装。
2、安装完成后，会显示重新加载。我们点击重新加载，这个插件就可以使用了。
3、除了TouchUI WX之外，还需要安装Vue相关的插件。比如Vetur E。Vetur E是我们基于vue语法插件Vetur进行了扩展，具有微信小程序API语法提示功能。
插件安装的方法，和之前安装TouchUI WX的方法一致。
因为TouchUI WX是基于Vue来做的。在我们的框架中，使用.wx和.wxa为后缀，安装Vue相关的插件后，我们会自动将.wx和.wxa文件以Vue语言识别。
4、由于连接的是微软服务器下载插件，国内网络有可能会出现无法正常下载的情况。如果长时间无法下载插件可以尝试使用手机热点连接wifi下载。
全局安装touchui-wx-cli
windows电脑可以通过cmd，macOS可以通过终端。或者直接启动Visual Studio Code在终端栏目里输入以下：
npm install -g touchui-wx-cli
如果没有终端栏目，可通过以下方式打开。
查看是否安装成功
tui -v
如果windows系统无法成功安装touchui-wx-cli，可能需要以管理员身份启动命令行工具（如果是win10也可以直接打开PowerShell）
全局更新touchui-wx-cli
当开发过程中，如果插件提示需要更新touchui-wx-cli。
或者在更新说明的文档中，有较高版本。
则需要使用以下命令进行更新。
全局更新。【如果该命令未成功更新到想要的版本，可以通过下面的命令。】
npm update touchui-wx-cli -g
全局安装指定版本。例如安装1.0.89
npm install touchui-wx-cli@1.0.89 -g
安装成功后可通过以下命令查看版本
tui -v
更新touchui-wx-components
当开发过程中，如果插件提示需要更新touchui-wx-components。或者在更新说明的文档中，有较高版本，则需要使用以下命令进行更新。
更新。【如果该命令未成功更新到想要的版本，可以通过下面的命令。】
npm update touchui-wx-components
安装指定版本。例如安装1.0.89
npm install touchui-wx-components@1.0.89
安装成功后可以通过以下命令查看版本
npm list touchui-wx-components第一个微信小程序
在安装好需要的开发工具后，就可以使用工具开始创建我们的第一个应用啦！
使用TouchUI WX创建基础工程
1、首先需要手动创建一个空文件夹，作为演示，我们创建一个touchuiwx-test文件夹
2、创建完成后，使用Visual Studio Code打开该文件。在文件夹箭头展开的情况下，点击右键，选择 TouchUI WX创建基础工程。
3、这时候会要求输入一个项目名称。
4、 输入名称后回车进行下一步。
这时主要会做三件事情。
4.1、创建了基础工程所需要的文件。
4.2、自动安装项目依赖。
可以看到输出栏目输出了一些信息，这时候需要稍等片刻。
4.3、自动编译输出dist文件目录。当看到输出下图所示内容后，表示内容文件创建完毕。可以看到我们创建的项目有一个dist目录。
dist目录中存放的是TouchUI WX工程编译后的小程序项目工程。可直接通过微信开发者工具打开预览。
预览TouchUI WX工程
1、按照提示，打开微信开发者工具新建一个小程序项目。在如图所示的项目目录里，指向创建的touchuiwx-test工程中的dist目录，填入对应的信息。
选择dist目录
2、填写完成，点击确认后。就可以看到我们创建的基础工程。如图所示：
启动TouchUI WX工程
创建基础工程后，会在dist目录中，生成小程序的初始工程文件。当你在开发的时候，需要先启动开发服务，这样每次在新增或修改页面时，会将文件差量的输出到dist目录中。
1、右键，选择TouchUI 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中的路由配置列表中。
TouchUI WX识别为TouchUI WX工程
在多人开发中，可能会遇到我们的项目并不是自己创建的，而是通过他人传输，或者是git／svn来克隆下来的，在这种情况下，项目基础目录已经完整，但是可能会出现右键菜单并没有 TouchUI WX 启动开发服务 这一项。这是因为我们的项目并没有识别为 TouchUI WX工程。 所以需要展开项目，右键并选择 TouchUI WX 识别为TouchUI WX工程 。
另外，如果已经安装了vetur E插件， 但代码页面没有颜色，如下图所示：
这同样也是由于项目未识别为TouchUI WX导致。识别为TouchUI WX工程后，会生成一个.vscode目录。
在settings.json文件中，写入了以下配置。
{
"touchuiwx.enable": true,
"vetur.extensions": [
".wxa",
".wx"
],
"files.associations": {
"*.wxa": "vue",
"*.wx": "vue"
},
"git.ignoreLimitWarning": true
}
识别为TouchUI WX工程后，项目代码会按照vue格式来进行识别，进行着色。
一般在git或者其他的代码库里，我们会对node_modules文件进行忽略。 所以在识别为TouchUI WX项目后，需要安装依赖。
导入与导出
当你用TouchUI开发了H5应用，可以直接导入到TouchUI-WX进行转换，稍作调整就能生成小程序。
反之也同样，当你TouchUI-WX开发了微信小程序，可以导出为TouchUI工程来生成H5应用。
工程目录结构
TouchUI WX项目目录：
dist用于放TouchUI WX工程编译后的文件，可直接使用微信开发者工具打开。
node_modules用于放依赖。
pages用于放示例页面。
static用于放常用库和静态资源等。
.vscode目录里写入了一些设置。例如将wx,wxa识别为vue等。
package.json是描述安装依赖信息。
app.wxa是主框架文件。
每个界面都是由.wx文件构成。可以放在根目录也可以放在子目录。一般可以将第一个界面的.wx文件放在根目录，其他文件放在子目录。
主框架页面
如果你开发过微信小程序，会知道微信小程序工程的根目录有3个文件：app.js app.wxss app.json。
在TouchUI-WX工程中，使用app.wxa来代替这3个文件。该文件是TouchUI-WX的主框架文件，也只能放在根目录，并且不能改名。
微信小程序中，原来写在app.json的配置现在都在app.wxa中进行配置，原来写在app.js的代码也都写在app.wxa的scrpt标签中。如下：
在使用开发工具新建页面时，会自动在config的pages节点中插入路径。
只有在pages节点下添加了路径，才会输出小程序页面到dist中，没有添加路径则不会输出小程序页面
内容页面
在TouchUI-WX中采用单文件的开发方式， 一个基本的page.wx文件代码如下：
<template>
<view>
内容部分
</view>
</template>
<script>
export default {
config: {
navigationBarTitleText: '页面标题'
},
data: {
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
</style>
原来微信小程序4个文件都合并到了这一个文件中。其中：
page.wxml的内容写在template节点下方，最好用一个view作为根节点；
page.js 的内容写在export default { }中。一个.wx页面只能有一个export default { }，所有JS逻辑都要写在这里；
page.json 的配置项内容写在export default { }中的config节点下；
page.wxss的样式写在<style lang="less">里面，支持Less语法。
