移动webapp前端ui用哪个框架好

2023-03-05 00:10:02html-css012

移动webapp前端ui用哪个框架好,第1张

UI的话，分为基础样式和基础组件两部分。

基础样式:

建议这一部分可以用一些轻量级的库如Purecss（http://purecss.io），采用其Grid的部分即可，需要定制的部分，建议自行配置，或者是直接采用grid.css，grid960.css这样的栅格来处理。

基础组件:

基础组件主要是button,input,form等，可以在http://bootcss.com看到很多的组件库，按照需要选择一部分，在做下自定义修改配色，阴影，边框什么的，动画的话就用animate.css吧。

交互设计:

是webapp的难点和问题所在，个人建议，在移动端还是尽可能的减少复杂的交互内容，更多的做内容呈现和基础的功能实现（考虑兼容问题和移动网络流量，移动网络质量等因素）

附加内容:

响应式设计也是要分场合的，在简单的内容呈现如博客，可以考虑响应式，不过针对业务系统，还是建议做一套移动版本和对应的桌面版本，这是个人的一些看法，希望有用。

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的引用路径，如下：

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 ✰ 样板

目前主流的移动WEB开发框架有哪些？Web框架也可以理解为B/S(Brouser/Server)框架，是一种基于浏览器载体的框架，包含前端、后端和数据库三个大的方向，各个方向的工具技术都不一样。现在主流的工具技术包含.NET、SqlServer、Bootstrap等，开发工具也会不一样。