iOS混合开发库(GICXMLLayout)四、脚手架、IDE

在前一篇文章中介绍了如何一步一步创建GIC应用,并且给出了一个大概的工程结构的参考,而这一篇文章将会介绍如何使用脚手架直接创建GIC工程以及如何使用使用VSCode来开发项目。

GICXMLLayout现在已经有了配套的脚手架工具,以及IDE的支持。这将进一步的提升你的开发效率。

脚手架

脚手架是基于Node.js开发的,首先需要确保您的电脑上安装了node.js以及npm

然后执行如下指令安装脚手架。

sudo npm install gicxmllayout-cli -g
复制代码

然后执行如下指令创建一个GIC工程。

gic init YourProject
复制代码

这时候脚手架会提供5种不同的工程模板供你选择。

  1. 基础工程模板。

    这个模板是一个最基础的模板,仅仅提供了最基础的项目结构。没有hotreloadhotupdate等功能。不建议使用

  2. HotReload。

    这个模板在基本的项目结构以外增加了HotReload功能,创建完项目后按照脚手架的提示就能使用。

  3. HotReload & VSCode。

    这个模板在模板2的基础上,增加对VSCode的支持。这个模板需要你使用VSCode来开发,搭配gic提供的VSCode插件GICVSCodeExtension进行开发。

  4. HotReload & VSCode & HotUpdate (推荐)

    这个模板在模板3的基础上进一步的增加了HotUpdate功能,这个模板也是GIC推荐的模板,根据脚手架的提示,你可以很容易的获得HotReloadHotUpdate功能。

  5. Tabs

    这个模板在模板4的基础上提供了Tabs功能。可以直接使用XML来创建一个具备Tabs功能的应用。而且你也会发现,tabs功能是通过自定义元素的方式来实现的。

IDE支持

我个人推荐使用VSCode作为XMLJavaScript等文件的开发工具,并且针对VSCode已经配套开发了一个插件GICVSCodeExtension,利用这个插件你可以获得如下几个功能。

  1. 针对XML文件,元素属性的智能提示。
  2. 针对JavaScript代码具备将ES6编译成ES5的功能,也就是意味着你可以直接写ES6规范的代码,而无需担心兼容性问题(事实上不同的iOS版本对于ES6的支持是不一样的)。最新版本已经加入了对ES8中的asyncawait的编译支持。
  3. 提供了HotReload功能所需的http服务器。你也可以通过配置文件来修改http端口。
  4. 提供了HotUpdate测试功能。

安装插件。

首先使用VSCode打开GIC工程的目录。

然后在VSCode的插件市场中搜索安装GICVSCodeExtension插件。如下图:

最后,enjoy your project

HotReload 功能

使用HotReload功能的话建议使用脚手架通过模板3或者模板3以上的模板来创建项目。 GICVSCodeExtension插件在启动http server的同时会创建一个websocket server,以便在project中通过websockt获取HotReload命令

当你在VSCode中使用cmd+r快捷键后,插件就会发出一个HotReload指令,所有连接到websockt server的设备都能收到该指令,进而重新加载整个应用。你无需使用XCode重新编译应用就能获得实时查看修改的能力。

HotUpdate

如果你使用脚手架通过模板4或以上的模板来创建项目,那么配合VSCode的插件就能获得HotUpdate的功能。

运行应用后,修改你project中的package.json文件中的version字段,并且修改项目中的任意样式,然后点击应用中的检查更新按钮,你会发现刚刚的修改生效了,并且显示的版本号也修改了。

HotUpdate功能不同于HotReloadHotReload仅仅适用于开发,方便你在开发的时候无需重新编译整个iOS工程就能实时查看修改的UI、逻辑。而HotUpdate适用于app已经发布后的热更新热修复

插件配置

首先按照下图所示打开VSCode的配置页面。

然后进入GICXMLLayout的配置选项。如下图。

GICXMLLayout目前提供了4个配置项。

  1. Behaviors

    这个配置项用于你提供自定义的behavior配置,通过这个配置,可以使得VSCode可以识别你定义的behavior元素以及属性。主要是提供智能提示功能。

  2. Elements

    这个配置项用于你提供自定义元素的配置,通过这个配置,可以使得VSCode可以识别你定义的元素以及属性。主要是提供智能提示功能。

  3. Http Server Port

    这个配置用来提供在使用HotReloading功能的时候Http服务器的端口。

  4. Project Folder Name。(不建议配置)

    这个配置用于,如果你的项目不是从脚手架创建的,而是自己创建的,并且项目结构也不是按照范例创建的,这个配置就允许你自定义工程文件夹,以便插件能够提供完整的功能。

以上配置默认都是全局配置,如果你需要对某个工程单独进行设置,那么就需要在workspace setting一栏设置,如下图。

修改完配置以后右键选择初始化,使得配置生效

创建页面/JS文件

你可以使用ctr+cmd+n的快捷键来创建新的页面,或者通过在explorer中右键选择来创建新的页面或者JS文件,如下图。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值