编程技术

Document

网站套壳应用开发

1 概述

当前APP应用市场，除了使用原生语言进行开发的原生应用、使用跨平台技术开发的混合应用外，还有一种直接封装运行在Web端H5网站的套壳应用。YonBuilder移动开发本身属于跨平台开发技术，即支持使用HTML、CSS、JavaScript语言配合原生API引擎的混合应用开发，也通过AVM全翻译引擎框架支持原生应用开发、同时还支持直接在平台工作台填写H5网站的网址，快速构建套壳的原生APP应用。

在YonBuilder移动开发平台，H5网站套壳APP的实现有三种方式：工作台快速构建、config.xml快速构建、openWin快速构建。

  • 工作台快速构建：可以通过在YonBuilder移动开发平台工作台提供的相关页面，填写H5网站网址的方式，完成套壳APP的封装；
  • config.xml快速构建：通过修改config.xml文件中index（入口页参数）的参数值方式，引入加载H5网站，完成套壳APP的封装；
  • openWin快速构建：通过引擎API提供的openWin函数方法，打开H5网站的方式，完成套壳APP的封装。

大多数开发者最常使用的是第一种方式——工作台快速构建。其实，在很多的特殊需求场景中，充分利用剩下的两种构建方式，能获取更好的适配和增强效果。

下面我们来逐一展开，详细讲解一下相关方式的具体开发实现

2 开发流程

2.1 通用前置准备

2.1.1 创建应用（必做）

访问开发者中心官网，登录后点击右上角昵称位置的下拉菜单「工作台」，进入开发者工作台。切换到「移动应用开发」版块，点击「新建应用」按钮，创建一个新的空白应用。

在这里插入图片描述

2.1.2 创建或上传证书（必做）

点击创建好的应用，进入应用详情页，切换到「APP证书」页面，上传应用证书。

平台提供android证书的自动创建功能，可以快速创建android证书。

在这里插入图片描述

2.1.3 设置应用的桌面图标及启动页（选做）

点击创建好的应用，进入应用详情页，切换到「端设置」页面，可以设置应用的一些基本配置信息。

  • 图标设置：设置APP安装后在手机桌面显示的icon图标；
  • 横竖屏设置：设置APP在手机上启动后是横屏显示还是竖屏限制；
  • 状态栏显示：设置APP运行后，界面顶部是否显示状态栏信息；
  • 应用启动页图片：APP启动后展示的启动页图片内容；
  • 版本更新：设置后，可以通过在YonBuilder移动开发工作台发布新的升级版本，已安装的APP会自动检测新版本进行更新；
  • 云修复：设置后，可以通过在YonBuilder移动开发工作台发布程序补丁，远程修改程序代码，在无需升级版本的情况下，解决一些紧急Bug或优化某些功能；
  • 统计分析：运营统计功能；
  • 闪屏广告：支持将启动页替换为具备点击跳转广告页的功能，开启后还需要在『运营管理』页面进行相关配置
  • 启动页：设置APP启动后，启动页的展示图片内容

在这里插入图片描述

PS:本步骤选做，一般需要上架的应用需要设置，如果仅仅是测试目的，可以暂时不进行相关配置

2.2 三种方式快速构建开发流程

以下三种方式，任选其一即可

2.2.1 工作台快速构建方式开发流程

这是最简单的一种方式，如果你的网站没有其他特殊的要求，可以选择此方式，快速、简单。

  • 点击创建好的应用，进入应用详情页
  • 切换到「代码上传」页面
  • 在「类型」位置选择「在线网址（Web``APP）」
  • 在「链接地址」处填写想要封装的目标网站的网址即可。

在这里插入图片描述

本阶段工作已完成，可以直接跳转——2.3 编译安装包，完成开发

2.2.2 config.xml快速构建方式开发流程

  • 下载``YonStudio`开发工具

    YonStudio开发工具下载地址

    在这里插入图片描述

  • 导入云端项目代码到本地

    本地启动YonStudio开发工具，登录账号，选择应用所在的租户环境

    在这里插入图片描述

    点击YonStudio顶部菜单的「项目」-「导入项目」（也可以直接点击欢迎页内的「导入项目」快捷按钮）

    在这里插入图片描述

    再选择「云端检出」，选择上面步骤新创建的应用，并选择本地保存路径后，即完成了云端应用的本地导入

    在这里插入图片描述

  • 修改config.xml文件

    在YonStudio开发工具中选择导入项目中的config.xml文件，在「应用信息」页面内，修改「启动页」的参数值为想要封装的目标网站参数值

    在这里插入图片描述

  • 提交修改后的代码到云端

    鼠标右键点击项目顶层的根文件夹，在弹出菜单选择「代码管理」-「上传代码包」

    在这里插入图片描述

本阶段工作已完成，可以直接跳转——2.3 编译安装包，完成开发

2.2.3 openWin快速构建方式开发流程

  • 下载YonStudio开发工具（同上面2.2.2的步骤流程）

  • 导入云端项目代码到本地（同上面2.2.2的步骤流程）

  • 修改编辑启动页——index.html 的代码（如果之前未修改过，默认为index.html页面，可以在config.xml文件中查看「启动页」的值）

    删除原有的script标签内的值，用下面的代码进行替换（PS: 注意 openWin方法中的url:'https://www.number01.cn'值填写你自己的目标网站网址）,修改完成后保存文件。

    <script type="text/javascript">

    apiready = function() {

        addKeyBackListen()

        api.openWin({
            name: '`Web`',
            url:'https://www.number01.cn',  // 此处填写你自己的目标网站网址
            slidBackEnabled: false // 禁用iOS的侧滑返回
        })
    };

    //添加页面监听
    function addKeyBackListen() {
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            //如果当前时间减去标志时间大于2秒，说明是第一次点击返回键，反之为2秒内点了2次，则退出。
            if ((new Date().getTime() - mkeyTime) > 2000) {
                mkeyTime = new Date().getTime();
                api.toast({
                msg: '再按一次退出程序',
                duration: 2000,
                location: 'bottom'
                });
            } else {
                api.closeWidget({
                     silent: true
                });
            }
        });
    }
</script>

  • 提交修改后的代码到云端（同上面2.2.2的步骤流程）

本阶段工作已完成，可以直接跳转——2.3 编译安装包，完成开发

2.3 编译安装包，完成开发

完成上面操作后，访问云端工作台的应用详情页，切换到「移动打包」面板页，进行打包编译即可生成应用的安装包，这样就完成了套壳应用APP的开发。

在这里插入图片描述

3 知识扩展

3.1 三种方式的简单对比

工作台方式 config.xml方式 openWin方式
实现便捷性 简单 中等 困难
修改配置 不支持 支持 支持
添加插件 不支持 支持 支持
添加逻辑 不支持 不支持 支持
脚本嵌入 不支持 不支持 支持
可扩展性 无 一般 高，无上限
开发能力 不需要 一点点 有编程能力

3.1 三种方式在不同场景下的选择

  • 无任何修改需求时，优先选择「工作台」方式进行构建，快速、简单。构建后，安装APP本地测试无Bug，可以在APP内可以正常运行就算OK。

  • 如果需要进行一些配置上的修改，但没有其他额外的需求，可以选择「config.xml」方式进行构建。

    举个例子，最近有个小伙伴反馈了这样一个问题，通过「工作台」方式封装一个横屏运行的H5网站，但是在实际运行时，发现虽然APP是横屏显示，但是屏幕左则会有竖状空白条。

    经过我的查看，是因为APP默认是以非全屏状态运行，在横屏的时候状态栏依然在APP的顶部，但是屏幕的左侧预留给状态栏的空间，并没有消除，导致了这个问题的出现（这应该算是引擎本身的一个小Bug)。

    这个时候，就是选择当前的「config.xml」方式进行构建的最佳选择。

    通过将 config.xml 里配置参数 fullScreen 的值由默认的 false 修改为 true，并提交代码、重新编译，测试此问题已解决。

    在这里插入图片描述

  • 如果原有的网站在APP内无法顺利运行，需要在APP本地加入一些代码逻辑，则可以选择「openWin」方式进行构建。

    如果你的APP有一些需要使用到原生APP的功能时，或者需要对原有的网站代码逻辑、页面样式在APP中进行一些修改，又不方便或者无权修改H5网站的源码时，可以采用本方式。本方式支持你在保留原H5网站代码（即无需修改H5网站源码）的情况下，APP中编写代码逻辑，对原有的H5网站进行网页样式修改、网页运行逻辑修改、功能逻辑增强、增加新的页面或交互等等操作。

    常见场景举例：

    • 第三方平台功能针对Web平台和移动端APP平台有不同的实现方式，并且两者不兼容。例如微信的支付功能，在APP端需要使用 APP 的调用方式执行，原本在Web端时使用 JSSDK 的相关接口功能无法正常执行。 这个时候就需要在APP中引入具体被微信支付功能的原生插件，例如 wxPayPlus ,并在APP本地嵌入相关代码逻辑到原来的支付环节替代原本的Web端支付逻辑。（具体的代码编写较复杂，这里就不进行详细描述了）

    • 对原有网站样式的修改。例如网站原本样式在APP中不兼容，显示有问题，或者觉得网页页面不美观。此时，就可以在APP中嵌入新的CSS样式代码，通过CSS优先级的方式，覆盖原有的样式，从而实现新的样式效果。我之前有试过在APP中加载github.com网站，并将页面风格修改为暗夜风格显示（背景黑色、文字白色）

    • 在原有网页增加新的按钮和交互逻辑。例如在APP端，网页上需要有一个返回上一个页面的「返回」按钮，就可以在本地嵌入新的JS脚本代码，通过操作dom的方式，在H5网站页面加载时，动态的追加到相关页面元素上，实现该功能。

    上面在APP内可以对H5网站实现修改的底层原理，是因为当通过YonBuilder移动开发引擎去打开一个Web端的H5网站时，引擎会在网站运行的浏览器环境内，加载引擎的API对象。引擎的API中，有一个命令函数 execScript, 支持跨页面执行脚本命令。这样就实现了APP本地页面 与在APP内运行的远程H5页面的双向交互，从而可以实现各种各样的对网站代码的嵌入式修改，等同于实现油猴插件在Web浏览器环境运行的脚本的效果。api.execScript 是一个功能上限很高的命令函数，同时也是一个需要具备一定开发技术水平才可以驾驭的功能函数，本文主要是基础性的知识讲解，关于该api.execScript 功能函数使用的高级技巧，不再展开讲解，等以后有机会再单开一个教程和大家沟通交流。

4 总结

本文基础性的讲述了在YonBuilder移动开发平台，如何快速实现对H5网站的套壳开发，封装成原生APP的几种实现方式。同时简单探讨分析几种实现方式之间的不同之处及优缺点、使用场景，方便大家在今后的项目开发中，根据不同的实际场景需求，去选择最为合适的方式。本文的主要目的还是在于帮助新手同学快速了解和掌握YonBuilder移动开发的基础功能使用，限于篇幅，很多地方点到即止，并没有进行更详细的展开（例如api.execScript），欢迎有兴趣的同学去自行进行更深入的了解和学习,加强编程功力。只要具备了深厚的功力，即使是平平无奇的普通招式，也可以实现很强大的效果，在武功上如此，在开发领域同样如此。