Touch WX 开发文档

Touch WX 开发文档

环境安装

Touch WX支持在Windows上开发或者在Mac开发。

在使用Touch 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

Touch WX构成

Touch WX插件,提供右键菜单,通过可视化的方式来执行命令

touchui-wx-cli 脚手架环境 ,需要手动全局安装

touchui-wx-components组件库, 在使用插件创建工程时会自动安装项目依赖,其中包含了这部分。

安装插件

1、下载安装完成后,打开Visual Studio Code。我们需要安装一些插件来帮助我们更好的进行开发。

Touch WX框架提供的插件:Touch WX,提供启动/停止开发服务、编译、转换等功能。

接下来,我们来学习如果在Visual Studio Code中如何安装插件。

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

img

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

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

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

img

插件安装的方法,和之前安装Touch WX的方法一致。

因为Touch 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