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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

五个半柠檬 2018-08-23 16:50:34 浏览1008
展开阅读全文

简介

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、不会对框架产生依赖。

以后不想用了这套框架,可以直接对已经输出的小程序工程进行维护。

095415_9fc3_3472480.png

源码下载:

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 ,然后点击安装。

7d5d8077-cb45-4a9c-8752-bcaa4802dc80.png

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

如果没有终端栏目,可通过以下方式打开。

4529c306-8825-4adb-ab15-6b4d04a8539b.png

2ab1b2ff-6b72-4175-80f3-f7eb38e8871c.png

查看是否安装成功

tui -v

24850fa6-3f3d-43cf-86ca-d4f89ffd4244.png

如果windows系统无法成功安装touchui-wx-cli,可能需要以管理员身份启动命令行工具(如果是win10也可以直接打开PowerShell)

全局更新touchui-wx-cli

当开发过程中,如果插件提示需要更新touchui-wx-cli。

0e186319-c053-428b-b414-c7a3eea8a7b7.png

或者在更新说明的文档中,有较高版本。

5b240db2-cc8a-4044-9190-1c8287a7c874.png

则需要使用以下命令进行更新。

全局更新。【如果该命令未成功更新到想要的版本,可以通过下面的命令。】

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文件夹

63408feb-515d-4a76-87a5-5400f292ddf3.png

2、创建完成后,使用Visual Studio Code打开该文件。在文件夹箭头展开的情况下,点击右键,选择 TouchUI WX创建基础工程。

86049ab3-3cef-4536-bc38-1d0acc494974.png

3、这时候会要求输入一个项目名称。

e2480450-095d-4f28-85cb-136b82b9f578.png

4、 输入名称后回车进行下一步。

这时主要会做三件事情。

4.1、创建了基础工程所需要的文件。

4.2、自动安装项目依赖。

可以看到输出栏目输出了一些信息,这时候需要稍等片刻。

b84d3a6b-fff3-4297-a59d-026dab512bd2.png

4.3、自动编译输出dist文件目录。当看到输出下图所示内容后,表示内容文件创建完毕。可以看到我们创建的项目有一个dist目录。

2caef2b5-eb16-4b87-9c6d-26ee57dbf960.png

dist目录中存放的是TouchUI WX工程编译后的小程序项目工程。可直接通过微信开发者工具打开预览。

54d48cc6-7178-425f-801a-92e1cc37bf31.png

预览TouchUI WX工程

1、按照提示,打开微信开发者工具新建一个小程序项目。在如图所示的项目目录里,指向创建的touchuiwx-test工程中的dist目录,填入对应的信息。

f3c08320-d210-4997-88c0-dad2d263f9e6.png

选择dist目录

5ce5faad-2b65-4878-85dd-7f2f3bae459a.png

2、填写完成,点击确认后。就可以看到我们创建的基础工程。如图所示:

f4fe6da0-30e5-4491-8aed-8e1e5237f709.png

启动TouchUI WX工程

创建基础工程后,会在dist目录中,生成小程序的初始工程文件。当你在开发的时候,需要先启动开发服务,这样每次在新增或修改页面时,会将文件差量的输出到dist目录中。

1、右键,选择TouchUI WX启动开发服务。会自动跳至终端栏目执行tui dev 命令。

ad7b0997-f430-4230-91ed-20fd5f40a81c.png

2、当启动开发服务后,假设我们修改了index.wx文件。保存后,会将修改后的该文件编译成index.html、index.js、index.json、index.wxss至对应dist目录中。

73aeb1a4-6c17-487a-8716-5e805ff3346f.png

3、如果是修改app.wxa文件,会全部重新输出到dist中

新建页面

1、新建页面时,希望创建在哪个目录,就在目录位置右键。

c2f56d2d-0f33-49b7-a94b-55e2361a2ba4.png

2、弹出以下窗口。要求输入文件名称,以test为例。输入文件名称后回车。

8e257c87-f446-4348-9290-c3267748f74e.png

3、会继续要求输入文件标题,以测试为例。输入的文件标题会作为“navigationBarTitleText”显示。

e8032998-6053-4387-8537-89da145c8d8c.png

4、回车确认后,创建test.wx文件,并且会将该页面的路径自动加入到app.wxa中的路由配置列表中。

45dacb4a-6813-418e-bca5-04b043bfb11b.png

TouchUI WX识别为TouchUI WX工程

在多人开发中,可能会遇到我们的项目并不是自己创建的,而是通过他人传输,或者是git/svn来克隆下来的,在这种情况下,项目基础目录已经完整,但是可能会出现右键菜单并没有 TouchUI WX 启动开发服务 这一项。这是因为我们的项目并没有识别为 TouchUI WX工程。 所以需要展开项目,右键并选择 TouchUI WX 识别为TouchUI WX工程 。

b999ee41-dd3b-47e1-a888-714b453dd727.png

另外,如果已经安装了vetur E插件, 但代码页面没有颜色,如下图所示:

595621c3-2c0a-4dc8-910e-99ec52866772.png

这同样也是由于项目未识别为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项目后,需要安装依赖。

34e7e6cf-da4e-4bf0-94cb-0dea71c30f06.png

导入与导出

05408fc3-49a7-487c-9be4-86eb01c8aeb5.png

当你用TouchUI开发了H5应用,可以直接导入到TouchUI-WX进行转换,稍作调整就能生成小程序。

反之也同样,当你TouchUI-WX开发了微信小程序,可以导出为TouchUI工程来生成H5应用。

工程目录结构

TouchUI WX项目目录:

7c1c759c-b65f-4ae6-954f-7f612a697763.png

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标签中。如下:

c825d353-903e-4772-b090-2ab1edf0ac3c.png

在使用开发工具新建页面时,会自动在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语法。

网友评论

登录后评论
0/500
评论
五个半柠檬
+ 关注