写点什么

手机网站一键秒变 App?详细教程来了

作者:APICloud
  • 2022 年 5 月 13 日
  • 本文字数:1318 字

    阅读完需:约 4 分钟

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


使用 APICloud 开发平台可以在线云编译,将已有 HTML5 网站一键打包生成 iOS、Android App,并且可以伴随 HTML5 网站的更新自动更新。不过有一点需要注意,网站需要进行过移动端适配。


首先,进入 APICloud 并完成注册。进入开发控制台,点击创建应用,选择 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 官网进行了解。

发布于: 刚刚阅读数: 2
用户头像

APICloud

关注

一次编码多端运行,移动应用低代码开发平台 2020.12.22 加入

用友YonBuilder移动端低代码开发平台,快速构建高性能多端应用

评论

发布
暂无评论
手机网站一键秒变App?详细教程来了_APP开发_APICloud_InfoQ写作社区