关于webapp:手机网站一键秒变App详细教程来了

App 开发大家都耳熟能详，可如果要把一个网站变成 app，须要怎么操作？一款利器为大家奉上。

应用 APICloud 开发平台能够在线云编译，将已有 HTML5 网站一键打包生成 iOS、Android App，并且能够随同 HTML5 网站的更新自动更新。不过有一点须要留神，网站须要进行过挪动端适配。

首先，进入 APICloud 官网 www.apicloud.com 并实现注册。进入开发控制台，点击创立利用，抉择 Web App，填入利用名称和网址，就能够轻松创立利用。

而后在控制台云编译界面上传图标和启动页，就能够编译 App 的正式包，下载或者扫码装置就能够间接应用了。当然在打包之前，HTML5 网站须要做手机端的适配。

下图是以 APICloud 官网为例，在安卓模拟器上的效果图。

另外，应用 APICloud 开发平台能够在网址打包的根底上，接入局部性能，在控制台间接应用 Web App 是没有代码的，只有一个 apk 包，如果想接入平台的模块，就须要在控制台创立 Native App, Native App 能够增加模块并检出代码，而后在代码中进行革新，引入相干代码，上传后从新编译。就能够应用了。

而后在 APICloud Studio 3（可在 https://www.apicloud.com/studio3 下载）中检出检出代码，在 main.html 用 api.openFrame 关上网址，如图所示：

开发 App 常见的统计和推送等性能都能够接入，依照 APICloud 开发平台的官网文档，接入即可。这里就简略介绍一下这两个模块如何接入。相干的示例代码如下，在应用模块之前，须要在模块库中搜寻相干模块，而后增加到利用中，编译。

接入友盟统计

须要配置文件中须要增加：

    <feature name="umAnalytics">

        <param name="android_appkey" value="**************"/>

    </feature>

其中 android_appkey 是在友盟后盾创立利用申请的 AppKey；在 main.html 中增加一下相干代码：

var umAnalytics = api.require('umAnalytics');

        umAnalytics.config();

        umAnalytics.init();

        api.addEventListener({name: 'resume'}, function (ret, err) {umAnalytics.onResume();

        });

        api.addEventListener({name: 'pause'}, function (ret, err) {umAnalytics.onPause();

        });

这样就能够接入友盟统计了，通过友盟的后盾，能够对启动次数、事件、页面等 app 数据的统计，更具体的接入文档请参考 APICloud 官网文档：https://docs.apicloud.com/Client-API/Open-SDK/umAnalytics

接入极光推送

接入极光推送，也须要在极光官网注册帐号，并创立利用，获取 APP\_KEY。在 config.xml 中配置 meta-data，填写 JPUSH\_APPKEY 及 JPUSH_CHANNEL 参数。

配置文件中代码如下：

<meta-data name=”JPUSH_CHANNEL” value=” 渠道号 ”/>

<meta-data name=”JPUSH_APPKEY” value=” 通过极光推送网站取得 appkey” />

而后在增加初始化代码就能够应用了，这里须要留神的是初始化办法只 Android 无效，iOS 上会主动初始化

var jpushVip = api.require('jpushVip');

 jpushVip.init(function(ret) {if (ret && ret.status){//success}

 }

);

离线推送，须要配置极光厂商通道，具体的办法能够参考：https://docs.apicloud.com/Client-API/Open-SDK/jpushVip

此外也能够接入其余性能，详细情况能够到 APICloud 官网进行理解。