转战WebApp: 最适合Android开发者的WebApp框架_H5之家 - 中国HTML5教程资源分享第一站
转战WebApp: 最适合Android开发者的WebApp框架
作者：林法鑫
原文：//转战WebApp-最适合Android开发者的WebApp框架/ 作者：林法鑫 微信近期宣布将推出应用号，以后直接做WebApp即可在微信里聚拢用户，不必同时开发Android与iOS Native App，省了开发成本与推广成本，有媒体称这是微信要干
原文：//转战WebApp-最适合Android开发者的WebApp框架/
作者：林法鑫
微信近期宣布将推出应用号，以后直接做WebApp即可在微信里聚拢用户，不必同时开发Android与iOS Native App，省了开发成本与推广成本，有媒体称这是微信要干掉App, 一时间关于WebApp的讨论不绝于耳，不少Android开发同学调侃要失业了。
我个人以为，从来就没有一劳永逸的技能，无论将来的趋势如何，首先都要把握好现在，把手头上的工作做好，其次也需要开始着眼于将来，多了解一些新的技术趋势与方向。而Web开发无疑是流行趋势之一，作为Android开发，也要开始点一点这方面的技能了。
今天这篇文章就是介绍一位Android开发同学为大家开发的一款WebApp框架，以符合Android开发习惯的编码方式，从容切换到WebApp开发。作者林法鑫同学自2015年10月起默默地开发维护这个项目，截止目前已初具规模，我想无论这个项目的前景如何，也得为他，为国内众多开源贡献者的默默坚持点个赞。
随着移动端设备越来越多，微信应用号即将发布， 越来越多的页面需要被移动浏览器承载，HTML5开发大热，我们需要掌握Web开发的技能来适应时代变化。
AndroidUI4Web是一个高性能的WebApp框架， 在移动浏览器上有与原生App一致的体验。
对Android开发者们来说，更重要的是：
框架移植自Android，开发方式和API调用与Android开发保持一致，Android开发者们可以低成本快速上手开发。
在线Sample地址： /AndroidUI4Web/sample/main.html
Android中的视图是通过Android的Canvas对象渲染的， AndroidUI4Web框架接管Android的视图层，所有渲染最终由Web Canvas实现。
主流的Web开发是DOM开发，而DOM节点的性能是公认的慢的，其他框架不能胜任一个复杂的WebApp开发。
参考：http://www.csdn.net/article//2824083-Canvas-UI
整个WebApp的开发流程与AndroidApp基本一致。HTML语法布局：
&FrameLayout& &TextView android:text=&Hello world& android:gravity=&center& &&/TextView&
&/FrameLayout&
TypeScript代码：
module my.app {
import Activity = android.app.A export class MainActivity extends Activity {
protected onCreate(savedInstanceState?:android.os.Bundle):void {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.activity_main); } } }
Note：代码使用TypeScript书写，风格和语法与Java相似， 就算没有接触过TypeScript，可以很快上手： http://www.typescriptlang.org/Handbook
目录/文件说明：
需要先起一个本地服务器，然后打开app.html文件的地址。如果使用WebStorm，可以直接对app.html文件右键-&Open In Browser 就可以查看。
打开页面后，需要打开浏览器的开发者模式和手机模拟器，具体参考这里：/webapp/15.html
与Android工程一致，布局文件存放在res/layout文件夹，目前仅支持&.html&后缀的布局文件。
布局代码内容与Android工程一致，如HelloWorld工程中的activity_main.html文件：
需要注意的是目前不支持self-closing，如上例中的TextView不能写成：
&FrameLayout& &TextView android:text=&Hello world& android:gravity=&center& /&
&/FrameLayout&
另外layout_width和layout_height属性不是必须项，如果没有定义则以父节点的默认定义为准。参考ViewGroup.generateDefaultLayoutParams
如果新增了布局文件，需要先手动执行build脚本，才可以在代码中以 R.layout.xxx 方式引用到这个布局：
./build.sh
代码存放在src目录，使用TypeScript书写，代码风格和语法和Java较为接近，可以很快上手并书写代码。
框架的API和Android的一致，上手TypeScript后，就可以立马开始使用框架了。
需要注意的一些事项是：
修改代码后必须手动执行build脚本：
./build.sh
然后刷新浏览器看到最新结果。
WebStorm + TypeScript 使得代码提示和错误检查十分友好，代码书写的效率不会低于目前Android开发。
布局开发暂无属性提示补全和错误属性检查，建议先在AndroidStudio里写好复制过来。后期会以WebStorm插件方式提供支持。
在Chrome开发台的调试和断点能力比原生开发体验更优，界面和代码的调试都比原生Android开发更友好。
界面调试：
实时查看View属性：
代码调试：
目前可以使用Cordova(PhoneGap)打包方案，同时建议Android端打包进CrossWalk内核保证4.x系统的流畅度。
在&android-ui&标签加上debug属性，所有Android视图节点都会以DOM节点的形式输出到&android-ui&标签里，可以看到每个节点的大小位置。
Chrome开发台里选中对应节点后，可以在节点的Properties里看到DOM节点的字段值，所有Android节点的信息都在AndroidView字段里。
如果喜欢这篇文章，记得点赞与分享给好友。
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
运用HTML5+CSS3(rem) 轻松构建webAPP移动端网站、手机web网站开发案
轻量级的移动 webapp 框架Jingle - jerrylsxu
dl,dt,dd在什么时候适合使用呢？_HTML教程
WebApp之Meta标签
关注微信公众号，了解最新精彩内容移动端h5开源框架 - 喧嚣求静 - ITeye技术网站
博客分类：
含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率
Bootstrap是基于和开发的，它在的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
浏览: 264678 次
来自: 广州
按照楼主这样是可以页面是可以完成效果，但是后台依旧会报错打印出 ...
sunshaoqun 写道二次元 写道希望能分享下.so文件编 ...
二次元 写道希望能分享下.so文件编译源码！求.so源码。。。 ...
多谢，网上说的 “选择你要生成Build.xml文件的项目,右 ...
哥们，用你的demo。android 端录制的amr格式这边播 ...[HTML5] ReactMix框架，让你实现一套js代码，基于ReactNative在H5，App都能完美跑起来，WriteOnce,RunAnywhere | IT知识库
-& 正文阅读
[HTML5]ReactMix框架，让你实现一套js代码，基于ReactNative在H5，App都能完美跑起来，WriteOnce,RunAnywhere
ReactMix框架，让你实现一套js代码，基于ReactNative在H5，App都能完美跑起来，WriteOnce,RunAnywhere
ReactNative框架推出已经有一段时间了，相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想，比如淘宝的ReactWeb等等，但是这些框架都局限于因为ReactNative本省的局限性，比如不支持CSS，不支持DOM操作，不支持选择器等等，而没有办法实现Js代码的全平台统一，现在通过全新的ReactMix框架，你可以让你的代码不仅可以在ReactNative上跑起来，实现安卓和iOS代码的统一，而且同样一份代码也可以在PC，H5上跑起来，到底有多神气？让我们来一探ReactMix框架(/xueduany/react-mix)的奥秘吧！ReactMix框架是基于ReactNative框架实现的，目标是完全兼容现有的H5开发方式的新一代框架ReactMix, 相信大家已经使用ReactNative去开发各自的应用有一段时间了，在这段时间，因为ReactNative的API频繁变动，且文档不全，而对于已经习惯写js,css开发的前端工作者来说，ReactNative又是一种新的开发模式，现在ReactMix就是为了解决大家现在遇到的这些问题而来了。我们通过中间层，来使得ReactNative，能支持现有的HTML5的js+ dom api + css的开发模式，完美的支持常用的css className
支持了css基本单位px, pt, rem
彻底解决了ios安卓尺寸样式不统一的问题，基于rem的度量方式，而且自适应不同的屏幕和分辨率，再也不用为未来更大屏的设备写兼容代码了
多个className的组合，或者className继承关系
css选择器，支持id, className, tag选择器
支持Dom选择器，你可以使用#id, .className, TagName去定位和查找节点
支持常用的js dom event api，支持例如onclick
支持常用的dom操作api，比如insertBefore, html等等，你经常使用的api
支持ReactNative代码的分割打包，这样你可以把reactnative的框架代码保存在app本地，但是业务代码通过在线直连的方法更新，保证网络传输量最小首先我们来看一个例子在ReactNative里面，在不同的设备，比如安卓或者iOS，都要有一个入口文件，比如iOS叫做index.ios.js，安卓叫做index.android.js，这个是默认的入口，当然你可以修改，对于reactmix来说，入口文件就是index.js
我们首先定义了一个navigator作为全局导航的存在，对于H5来说，我们实现了navigator控件的兼容
这样我们可以保证一套代码，只要API一致，就可以实现一样的功能，类似这样的原理，我们同步翻译常用的reactnative在h5开发中需要使用的控件
而在H5的实现上分别调用不同的对应实现
因为reactnative没有window对象，首先我们要给他实现一个window对象，然后把我们需要的常用的控件，挂到window上，这样我们在使用的时候就不需要再在具体的页面里面require了比如Div 和Span
我们把这些常用的tag都挂在window之后，在我们的具体的页面里面，我们就可以不require，直接调用，就像这样
在H5开发里面，最常用的是block元素和inline元素，就是div和span，但是在reactnative里面没有，那么怎么办，我们就造一个
类似于shadow dom的做法，我们把自定义的组件Div同步翻译成reactnative的view，把span同步翻译成为text然后我们还要解决className的兼容问题，要让reactnative支持常用的选择器，我们实现了
比如说这样的css，有id选择器，有className选择器，有className的继承，className的合并，我们要在reactnative里面实现，那么我们就要重构reactnative的自定义函数的render方法，在里面做文章首先我们要让所有的元素都继承与一个基类，类似HTML的Dom Element
然后在render方法里面对于绕过reactnative自生的style，做增强的解析，来实现类似的CSS体系同理Dom API也是一样，另外对于reactnative来说，click是没有的，touch也是没有的，但是有类似的，需要2次封装，所以我们统一包装起来，对于h5开发者来说，就当做正常html+js开发既可以，只要正常实现touch的注册，我们给你类似于标准的Event Object
另外对于app开发和h5开发来说，每次设备的分辨率变大，或者出了新设备，都有一项工作叫做适配？对吧，而reactnative的样式是没有单位的，我们给他实现了单位比如px,pt,rem而基于rem又实现了全平台统一的度量系统，就是说只要你是按照rem的定义的和模型，在同样大小分辨率的设备上，保证你的代码出来的效果是完全一样的
怎么样？对于这套框架，是不是有点动心了，快来体验一下吧，后续我们会陆续给大家详细解密ReactNative的核心原理，以及继续完善ReactMix，让标准的js代码可以平滑的在app中跑起来！
加: 23:29:07&
更: 23:29:09&
&&网站联系: qq: email:&