实现小程序与HTML5应用互转框架之TouchUI-WX推荐

简介:

简介

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下载地址:

  1. https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x64.msi Windows64位下载

  2. https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x86.msi Windows32位下载

  3. https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0.pkg macOS系统下载

    安装成功后,windows电脑可以通过cmd,macOS可以通过终端 输入 node -v 来验证是否安装成功。安装成功会弹出如图所示:

    img

开发工具下载

进入官网进行下载。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中如何安装插件。

首先我们需要点击扩展,如下图所示的红框位置。

img

在这里可以搜索我们想要安装的插件,找到TouchUI WX ,然后点击安装。

2、安装完成后,会显示重新加载。我们点击重新加载,这个插件就可以使用了。

3、除了TouchUI WX之外,还需要安装Vue相关的插件。比如Vetur E。Vetur E是我们基于vue语法插件Vetur进行了扩展,具有微信小程序API语法提示功能。

img

插件安装的方法,和之前安装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目录。

img

在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语法。

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
HTML 框架高阶用法
HTML框架,或前端框架,如Bootstrap、Vue.js等,显著提升了Web应用开发的速度与用户体验。本文介绍了一些高级技巧,如自定义样式与组件、响应式设计实践、JavaScript功能增强及性能优化策略等,帮助开发者更好地利用这些工具,实现高效开发并提升应用性能与灵活性。
|
1天前
|
存储 缓存 开发框架
提高微信小程序的应用速度
【10月更文挑战第21天】提高微信小程序的应用速度需要从多个方面入手,综合运用各种优化手段。通过不断地优化和改进,能够显著提升小程序的性能,为用户带来更流畅、更高效的使用体验。
14 3
|
5天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
12 2
|
2月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
275 60
|
9天前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
11 1
|
3月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
172 65
|
23天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
42 5
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能,显著提升了用户体验和界面趣味性。例如,颜色选择器可动态改变网站主题色;滑块控制适用于音量或亮度调节;日期和时间输入便于预约系统的设计;互动式表单结合多种输入类型实现高效的数据收集;猜数字游戏增加用户参与度;实时搜索建议优化网站搜索功能;图像预览功能让用户上传图片前预览效果;密码可见性切换按钮提升表单的可用性;结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力,还增强了用户的互动体验。
|
2月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
2月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。