Android 混合app开发之Hybird app（1）

       经过Android原生开发，然后自学了html ，css， js ，jquery ，ajax 以及h5 ，css3，现在终于迎来了我的混合app开发的第一步。关于这个第一步，开始的时候我很迷茫，不知道这个学习的过程。之间也接触过 react native 和 mui 移动web app 的开发但是感觉不是我想要的。因为我本是纯Android开发的 他们却都是纯 web 开发的整个app全是html 没有原生，和我们的Android apk 不是一家的。和我的最初的想法不服，我就没有继续学习。我想要学习的那是 以Android 框架为基础，html为辅的apk的开发形式，其实淘宝，京东 等app总的来说还是原生的页面多包括首页基本都是原生。而百度糯米 却使用了大量的 html的页面效果。但是还是以原生框架为基础的。 

      现在移动应用分为三种形式：1.原生app（Android ，ios），2.纯web的 （react native ，mui）包括开发工具都不一样HBuild等，3.就是以我们原生 app为框架通过webview加载html --HyBird app开发。

         最近看了一个潭州学院的公开课，讲的关于h5的播放器的开发，我就从头到尾写了一遍从html 到 Android webview的整个过程。先看一下Android手机上运行的效果图

                                                                                  

        整个界面都是由html+css做得，逻辑都是用的jquery来写的，包括播放圆圈的旋转用的是 css3 的 animation 动画，歌词的同步显示以及歌词上移都是用jquery控制的。音频的播放用的是 html5 的 audio 标签 。

       做得过程中也有一些问题，我刚开始用的是本地的mp3 文件在浏览器上是可以播放的，但是当我用webview加载时 audio 就播放不了，我估计是我的mp3在Android项目中的路径有问题，可是我的图片就能正常加载就是 音频 播放不了。然后我就 把 本地的文件 换成了网络的 url 播放的网络歌曲。是可以的。本地mp3播放不了，我还在找原因。

代码我就不贴了，想要代码的在评论里面发qq我给你发过去。等后期这个项目再增加一些新功能我会传到csdn上。