如果打算把webapp打包成nativeapp框架

Posted 2023-04-30

1、首先我们需要先新建一个WebApp项目，目录结构为：

index.html 项目首页html入口文件

--html 项目文件夹

--html/css 用于存放用到的css文件

--html/js 用于存放用到的js文件

2、index.html我们可以用Dreamweaver CC来新建，操作如下：点击文件菜单，再点新建，在弹出的窗口中点流体网格布局，再点创建。

3、创建好html文件后，点击文件-另存为，将文件名改为：index.html，保存到我们新建的WebApp项目根目录下。如下图：

4、这时会弹出一个对话框，提示内容如下：

这时，我们将用到的boilerplate.css文件和Untitled-2.css文件，复制到WebApp项目html/css目录下，将用到的respond.min.js文件复制到WebApp项目html/js目录下。

这里解释下，boilerplate.css是定义跨浏览器兼容性的样式文件，Untitled-2.css是定义自适应媒体查询的样式文件，respond.min.js扩展IE8以下浏览器支持css3的js文件，如果不需要考虑支持IE8以下浏览器，可以删除掉。这里由于我们是打包生成手机端的APP，不需要用到respond.min.js，我们把它删除掉，然后再修改下CSS的引用路径，如下：

<link href="html/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="html/css/Untitled-1.css" rel="stylesheet" type="text/css">
5、这样一个简单的WebApp项目就新建好了。优化下html代码，如下图：

6、接着我们来使用KM盒子将这个WebApp项目打包生成手机APP应用。

打开KM盒子软件，点击安卓设备按钮，在弹出的菜单中选择 自定义打包。

接着，在弹出的对话框，设置 APK名称，安装包ID，文件路径选择我们刚才的WeApp文件夹目录，然后点击编译文件。

接着，在弹出的对话框中，双击三个图片，分别设置APK的竖向启动画面、横向启动画面和桌面图标文件，图片格式为PNG图片文件。

最后，在弹出的对话框，点击生成APK安装包，这样一个WebApp项目打包生成手机APP就完成了。

我们来看下安装到手机上的效果：

最后，我们学习下Dreamweaver CC生成的流体网格布局CSS文件，具体看源文件，我加了中文注释：

@charset "utf-8";
/** HTML5 ✰ Boilerplate color:rgb(144 255 173)">v3.0.2
/*
* HTML5 ✰ 样板
* 参考技术A 如果打算把webapp打包成nativeapp框架？
用一些框架可以直接使用网页来开发native App，比如cordova，不过需要框架学习成本，你有时间可以试试。如果想简单，直接使用webView加载你需要的网站。

做webapp开发，性能和效率最好的框架和打包app平台分别是哪个

参考技术A 第一款：SenchaTouchSenchaTouch是世界上第一个支持HTML5和CSS3标准的移动应用框架，你可以使用HTML5来编写音频和视频组件，还可以使用LocalStorageProxy来存储离线数据，同时，大量CSS3样式表为你提供了创建健壮样式层的可能。优点用户体验最接近NativeApp，具有整体的UI组件、布局解决方案；统一的编程代码结构和要求，良好组织的代码易于维护；继承ExtJS4的应用程序MVC架构；完善的API文档，示例；活跃的社区，网上有大量的文档书籍帮助学习；缺点兼容性差，仅支持webkit内核的浏览器；框架比较重量级，学习成本比较高；商业化使用有版权问题；第二款：jQueryMobilejQueryMobile是创建移动web应用程序的框架。适用于所有流行的智能手机和平板电脑。使用HTML5和CSS3通过尽可能少的脚本对页面进行布局。优点跨浏览器兼容性最好，几乎兼容所有的平台和浏览器；入门简单，语法简洁，编码灵活，一些简单的应用直接用HTML既可实现，无需Javascript；开源插件与第三方扩展网上资源丰富；完善的API文档，示例；活跃的社区，网上有大量的文档书籍帮助学习；缺点jQueryMobile对代码没有特定的要求，后期维护难度较大；第三款：ZeptoZepto就是一个jQuery的轻量级替代品，几乎完全一样的API，但是专门为Mobile或者HTML5浏览器设计和优化。优点学习成本低，Zepto保持了与jQuery几乎一样的功能，使用gzip压缩只有5-10k；缺点Zepto不支持WindowsPhone下的IE；第四款：WinkToolkit优点Wink的核心库是轻量级的，支持AMD规范的模块化加载，功能接口相比Zepto更丰富；提供很酷的2D、3D效果UI组件；缺点组件对Android的支持程度不好，3D组件无法使用；第五款：Ionic：高级的HTML5移动APP（WebApp）开发框架Ionic是一个用HTML,CSS跟JS开发的一个用于移动设备的混合APP开发框架，采用Sass与AngularJS开发。目前，Ionic仍然处于临测试状态（alpha）。相信未来会成为开发者开发HTML5应用的一个不错的选择。第六款：AmazeUI中国首个开源HTML5跨屏前端框架AmazeUI是一个移动优先的跨屏前端框架。易学易用。