iwiilsay 基touch ui开发
软件架构
Touch WX是一套完全免费的微信小程序开发框架,扩展了小程序的能力。特点如下:
1、组件扩充:
增加了30多种常用的组件用于官方组件的补充。
2、功能扩充:
兼容阿里的iconfont图标库,海量矢量图标随意使用;补充了常用样式库、支持less语法、支持全局配置主题色等
3、开发体验改善:
四文件方式改为单文件方式,通过VSCode编辑器+插件的方式开发,拥有web开发体验;
4、小程序转为H5应用:
可以与H5开发框架Touch UI工程相互转换,发布成webApp。开发一套代码,拥有两套应用。
这套框架的原理是:
将Touch WX工程中所写的代码进行编译,直接输出为微信小程序工程原始代码。扩充的30多种组件,完全是基于小程序官方的自定义组件机制实现(row&col除外)。
所以它支持小程序的全部语法,怎么开发小程序,就怎么开发Touch WX。
不过因为是单文件的开发方式,在文件的代码结构上稍有不同。请注意这一点。
这样好处在于:
1、开发者迁移成本很小。
可以轻松的将已有的小程序移植为Touch WX工程,来使用它的扩展能力;
2、便于排查错误。
当遇到问题时,开发者也可以随时查看输出的小程序原始代码来定位问题所在。不会搞不清楚到底是框架问题还是自己代码的问题;
3、按需编译
由于小程序对体积有限制,在使用框架开发时,只有使用到的组件才会编译输出为小程序源码。没用到的不会输出。
4、不会对框架产生依赖。
以后不想用了这套框架,可以直接对已经输出的小程序工程进行维护。
安装教程
微信开发者工具安装
下载地址: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系统下载
开发工具下载
进入官网进行下载。Visual Studio Code下载地址:https://code.visualstudio.com
Touch WX构成
Touch WX插件,提供右键菜单,通过可视化的方式来执行命令
touchui-wx-cli 脚手架环境 ,需要手动全局安装
touchui-wx-components组件库, 在使用插件创建工程时会自动安装项目依赖,其中包含了这部分。
安装插件
1、下载安装完成后,打开Visual Studio Code。我们需要安装一些插件来帮助我们更好的进行开发。
Touch WX框架提供的插件:Touch WX,提供启动/停止开发服务、编译、转换等功能。