使用 WebMaker 快速预览 Ionic 页面效果

发布于: 2020 年 06 月 18 日

Ionic Framework 是一个HTML5跨平台应用程序开发框架(HTML5 Hybrid Mobile App Framework),能够使用HTML、CSS和Javascript构建接近原生体验的移动应用程序。

在进行Ionic应用程序开发过程中,频繁调整和预览页面效果是必须经历的开发过程,虽然Ionic支持热更新技术并能够在修改完代码后自动编译并刷新重现页面,但这也需要花费数秒时间才能完成。对于调试页面显示来说这是无法忍受的。

WebMaker是一款基于浏览器的可离线的前端即时预览工具,功能类似CodePen,与之不同的是WebMaker可以使用在线版本或自行部署在私有服务器中,并且是开源的。

使用WebMaker调试Ionic页面只需要通过"Add Library"按钮,引用如下Ionic前端类库即可,修改代码后页面立刻更新。

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

几个Ionic官方文档中的例子

Ionic是基于Angular基础上构建的,2.0以后的版本采用TypeScript脚本语言,WebMaker不支持Angular的数据绑定,所以无法展示绑定数据。

虽然按照Ionic官方教程,我们可以使用Visual Studio Code或使用Stackblitz在线编写代码,但是都需要等待几秒钟的编译时间才能看到修改代码所产生的变化,升级机器配置可以缩短等待时间,但如果觉得升级机器配置不划算的话不妨试试本文中的方法。

发布于: 2020 年 06 月 18 日 阅读数: 5
用户头像

davidce

关注

还未添加个人签名 2018.10.14 加入

还未添加个人简介

评论

发布
暂无评论
使用WebMaker快速预览Ionic页面效果