简介
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语法。