来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过，HTML5 Web APP的出现能否在未来取代移动应用，就目前来说，还是个未知数。那么，有什么办法，既可以使用HTMl5开发应 用，又可以将其简单封装成APK文件呢？

一、Android SDK中的WebView

1.在要Activity中实例化WebView组件：WebView webView = new WebView(this);

2.调用WebView的loadUrl()方法，设置WevView要显示的网页：

  互联网用：webView.loadUrl("http://www.qietu.com");

  本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

3.调用Activity的setContentView( )方法来显示网页视图

4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面

5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。

  <uses-permission android:name="android.permission.INTERNET" />

缺点：如果是载入的是普通网页，没有什么问题，但如果是html5,封装后，在android2.3以上才能正常访问，android2.2及以下，SDK中的WebView还没完全支持HTML5

下面是具体例子：

MainActivity.java

    package com.android.webview.activity;  

    import android.app.Activity;  

    import android.os.Bundle;  

    import android.view.KeyEvent;  

    import android.webkit.WebView;  

    public class MainActivity extends Activity {  

        private WebView webview;  

        @Override

        public void onCreate(Bundle savedInstanceState) {  

            super.onCreate(savedInstanceState);  

            //实例化WebView对象  

            webview = new WebView(this);  

            //设置WebView属性，能够执行Javascript脚本  

            webview.getSettings().setJavaScriptEnabled(true);  

            //加载需要显示的网页  

            webview.loadUrl("http://www.qietu.com/");  

            //设置Web视图  

            setContentView(webview);  

        }  

        @Override

        //设置回退  

        //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法  

        public boolean onKeyDown(int keyCode, KeyEvent event) {  

            if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {  

                webview.goBack(); //goBack()表示返回WebView的上一页面  

                return true;  

            }  

            return false;  

    }

在AndroidManifest.xml文件中添加权限

    <?xml version="1.0" encoding="utf-8"?>

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"

          package="com.android.webview.activity"

          android:versionCode="1"

          android:versionName="1.0">

        <uses-sdk android:minSdkVersion="10" />

        <application android:icon="@drawable/icon" android:label="@string/app_name">

            <activity android:name=".MainActivity"

                      android:label="@string/app_name">

                <intent-filter>

                    <action android:name="android.intent.action.MAIN" />

                    <category android:name="android.intent.category.LAUNCHER" />

                </intent-filter>

            </activity>

        </application>

        <uses-permission android:name="android.permission.INTERNET"/>

    </manifest>

二、使用PhoneGap

    PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系 人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如 iPhone的iPhone SDK，Android的Android SDK等，

详细方法请见：http://phonegap.com/start#android

优点：在Eclipse中加入SDK，编程自由，完美适应不同设备屏幕大小，适合高手使用。

缺点：没有使用布局，直接加载网页，不能添加广告。

----------------

切图网（qietu.com）最早将psd转html服务模式带到国内，并首个提供响应式、webapp前端开发的公司。专注web前端开发技术，关注用户体验，加我们公众微信账号：qietuwang（长按复制）

速入门uni-app，把想看的网站变APP。

下载hbuildx，这里官方提供了几种安装包，有完全版，还有beta版，还有标准版，随便下一个吧，或者直接下载标准版的，因为它最小。

1.创建uni-app，直接选择uni-app 默认模版（hello-app项目可以拿来看看，不建议开发时使用，wap2app是针对wap转app端的，5+app 使用htmlplus，uni-app对html5+ 进行了整合，并建议直接使用uni-app即可，小程序那就是小程序咯，让我们心大一点，练习多端吧）

关于目录结构，可以在开放规范中看到或者直接创建一个heoll 模版项目看看，各个文件夹之间的关系和作用都比较明确，对于uni-app的配置文件需要仔细看看。

2.配置

manifest.json 这个文件在移动应用中屡见不鲜，在uni-app也有关这个文件的解释https://developer.mozilla.org/zh-CN/docs/Web/Manifest

文件是应用的配置文件，用于指定应用的名称、图标、权限等。个人觉得就是映射，在不同的环境下具体的左右略有不同，比如webpack 中是指向原始文件的映射关系等。

uni-app 中有一些自定义属性比如appid，是用来标识云端编译用的。https://ask.dcloud.net.cn/article/35907

在ide中打开这个文件，会有一个新的视图，是中文的，如果你要详细了解关系，可以到文件目录下打开这个文件查看或者直接点击最下方的源码视图进行查看。另外有一些配置可能找不到，但是在源码视图中可以找到，还有一些配置，默认项目是没有的，比如超时时间的设置。

启动图：配置.9 图片制作流程 https://ask.dcloud.net.cn/article/35527

打开下载工具 draw9patch.bat（这里我没有打开，处理文件报错，不去深究了，看第二种方法，通过as，打开as）

新建一个as项目，找一个png图片丢到as中，右键创建.9 图片

打开这个文件，点击鼠标坐标在边上即可调整拉伸区域与内容区域，类似下面这种，关于四个边的概念大家去看下文档，类似下面这种内容居中的图片（一般都是这样），拉伸的时候左右两侧和上下两侧拉伸空白，在操作的时候需要先control选择拉伸区域，然后再shift 去掉一部分的拉伸器区域~

像这样搞定后就行了，然后根据uni-app的规定指定图片大小上传。

另外：此用法只适用与android，ios就一个个上传吧。

查看json源码，其中有一项为第三方sdk，配置后可使用第三方sdk的集成，一些常用的第三方sdk已集成，比如授权登录、分享、支付等。

更多的配置自行看吧，再此不表。

第二个配置文件 pages.json 看名字就看的出来是配置页面用的

关于pages，新增的页面需要追到到page文件中，定义全局样式后，每个page可以单独的配置其style。

另外在pages目录下新增页面的时候，配置文件中会自动追加和删除相关page。

其中关于导航栏，官方建议使用原生又uni-app提供的原生导航，如果自定义导航，可能会有很多问题，https://ask.dcloud.net.cn/article/34921

尤其是前端导航与下拉刷新之间的冲突。

关于subNVue，这里解释一下nvue，刚开始看的时候我也有点懵，啥意思，vue提供的新扩展吗？并不是，nvue 是与native.js 结合的一种组件规范，它可以直接调用原生代码中的api，官方建议是只是在有特定需求的地方使用nvue，

而这里提到的subNVue 指的是通过nvue 创建的一种子窗口组件，它使用的是原生渲染的方式，通过窗口进行的实现，在做一些浮动的时候，比如遮罩蒙板，视频弹幕这种的时候用得上。

所以使用nvue的时候想要调试必须在终端环境，模拟器或者微信工具。如果运行之前应该有记录，这里不表。

多页面通讯：有两种，官方推荐新的方式，注册监听

uni.$on('page-popup', (data) => { 
 vm.title = data.title; 
 vm.content = data.content; 
}) 
uni.$emit('page-popup', { 
 title: '我是一个title', 
 content: '我试data content'
}); 
另，官方提供了一些建议：所以不要滥用它为好

还有就是关于subNVue的style 并不是我们平时理解的所有样式表，它自有规则，具体请看官网，其中有几个重要的属性，比如type、position、dock。

conditon：

指定页面，也就说不要不用每次启动都要重新点一遍来看，只需要指定我们当前调试的页面即可，这个配置只在开发时候生效，正式编译打包后不起作用。

"condition":{ "current":0, "list":[ { "name":"me", "path":"pages/me/me", "query":"" } ] }

分包：这里是针对小程序的，因为小程序对包的大小有限制，所以在上传小程序的时候需要对包进行管理，小程序允许分包的存在。

另外在配置这个文档中还有package.json ，vue-config.json , uni.scss 的介绍

package.json ：因为uni-app 是基于vue的，在编译时又是依赖与node的，所以可以添加打包文件，若是通过cli创建的项目，必须自己进行配置，对于通过ide创建的项目，则看需求。

vue.config.js 类似webpack它们都有配置文件或直接通过cli进行打包或编译。其中有一些uni-app不支持，知晓即可。

对于内置的scss，可以进行应用与修改，其中的变量通过在style标签中指定lang 即可进行引用。

另外日志什么的，有的集中类型不多说了，在HBuilder里可以使用代码块，可以快速补全。

生命周期：

这个标题标红，个人认为生命周期对于一个框架来说非常的重要。

1.应用生命周期：最后一个监听，比如之前说的nvue和vue之间交互就用它。

应用生命周期监听一般都在APP.VUE 中进行注册监听，作为app的主入口。

应用启动会，监听的回调执行相关逻辑。

h5 打印效果如下：

2.页面监听函数

相比应用监听函数，页面监听函数使用的是最多的，uni-app 提供了很多内置钩子，不截图了，比较多。

这里的onLoad 和onShow 给我感觉特别好，相比apicloud 每次新的页面打开，除非设置强制刷新，否则会进行缓存，要么每次打开的时候发送消息事件，一个入口还好，

如果多个入口，会特别痛苦，除非自己再定义一个工具类什么，而uni-app的这2个钩子，可以说完美的避开了这些琐事，再次显示的时候，我们可以做一些其他事情了。

另外对于小程序中的一些固定导航按钮，同样有他们的钩子

并且，页面滚动不要自己再去监听dom什么的了，直接提供了钩子，方便多了。

还有，对于原生搜索框，也就是之前提到的searchInput 也提供了回调

关于nvue的声明周期：基本上与vue保持一致性。

关于各个页面之间通讯：

使用uni-app 提供的事件自定义监听机制可以对其进行监听。（因为是uni所以只能是终端测试）。

全局监听提供了4个函数：

uni.$emit(eventName,OBJECT)uni.$on(eventName,callback)uni.$once(eventName,callback)uni.$off([eventName, callback])// 基本上vue、jqeruy 还有一些第三方库都有类似的函数