callapp功能如何使用

开发流程

注意:开发完Android或ios其中一个,需要将相同功能在另一个版本的文件中也实现一份。如果是特某个平台特有功能,需要在文档中说明。

不依赖本地安装cordova环境流程

  1. 查看插件api

  2. 向打包负责人申请插件安装

  3. 使用wide打包, 获取安装了对应插件的 app 开发版

  4. 添加 callapp 相关代码

  5. 向打包负责人申请代码更新

  6. 重新打包获取添加了新 callapp 功能的 app 开发版

  7. 安装到测试机, 测试功能

  8. 如功能不正确, 返回到第四步操作. 如功能正确, 则结束

本地安装 cordova 依赖

  1. 查看插件api

  2. 安装插件

  3. 开发代码

  4. 使用 cordova 打包

  5. 安装到测试机, 进行测试

打包 app 的原理

app 的实质:打包的 app 实际是固定首页的自定义浏览器,打开 app 即打开浏览器访问页面。这就是 wide 解决各个平台版本的方式,我们使用 ​ cordova 进行打包。

打包出来的app,会在打开应用时打开内置的首页(类似 file://index.html),是打包进app的页面,我们在该页面上进行处理,使之显示我们需要显示的页面。这个处理在 Android 平台和 ios平台上有区别。

ios 平台,打开内置首页后,执行一个页面跳转,跳转到需要访问的页面。

Android 平台,内置首页中有一个全屏的iframe,该iframe打开需要访问的页面。

什么时候需要 callApp 辅助实现功能

移动平台下的项目往往需要获取该设备的私有信息,调用设备的功能,或联通其他app。这类功能浏览器目前未完全支持,原生 app 是支持的。因此需要让原生 app 进行对应操作,然后向我们的页面返回结果。 如果浏览器支持,优先使用浏览器支持的方式,以获得最大兼容性。

wide 打包做的基本动作

使用者使用打包功能中的基本过程

  • wide打包界面

  • 创建打包配置,相关代码 siteditor.js siteditor.html

  • 创建打包配置文件,在项目文件夹的 tpl/workspace/mobile/build.json

  • 打包,打包是打包服务器在做,不是自己的虚拟机

  • 生成app,放入项目文件夹的 static/apps/ 文件夹中,请自行根据文件名区分不同平台

打包的Android包可以直接安装,但是ios的包是不可以直接安装的,需要找运维团队。发布ios app其它部门有对应文档。

相关源码简介

  • client/src/wware/wwclass.js

    • 提供了 $.wwclass.callApp 方法, 该方法在首次调用时加载不同平台的桥接功能模块

  • client/src/wware/wwapp.js

    • Android 平台的桥接功能模块

    • 用于当客户端调用 callApp 时, 接受其调用内容, 通知原生 app 部分进行对应处理, 并返回处理结果

    • 通过 postMessage 进行内容传递. 因此仅可传字符串或者可被stringfy的对象(Blob这种就不可以)

  • client/src/wware/wwappios.js

    • ios 平台的交接功能模块

    • 功能与Android差不多, 区别是该文件包含了callapp的具体功能代码. 而Android的仅做桥接功能, 具体代码在server/src/libs/tools/android/www/js/index.js

  • server/src/libs/tools/android/www 和 server/src/libs/tools/ios/www

    • 两个文件夹存放 Android 平台和 ios 平台的首页部分内容

    • 其中 index.html就是该浏览器启动时, 固定打开的页面. index.html 中加载的 index.js 文件

    • 该 js 文件运行可当作在原生 app 中运行

  • server/src/libs/tools/android/www/index.html

    • 这仅是一个模板文件, 使用dotjs语法的模板. 如果本文件需要修改, 修改完成之后在 ​dotjs生产模板函数, 然后替代对应函数. 详情查看代码中的注释说明

    • app打开是展示的页面, 这个页面一旦运行, 就会打开我们设置的首页地址

    • 本文件使用占整个窗口大小的 iframe 打开我们设置的页面. (因此用户视觉上认为app打开的页面)

  • server/src/libs/tools/ios/www/index.html

    • 这仅是一个模板文件, 使用dotjs语法的模板, 如果本文件需要修改, 修改完成之后在​ dotjs生产模板函数, 然后替代对应函数. 详情查看代码中的注释说明

    • app打开是展示的页面, 这个页面一旦运行, 就会打开我们设置的首页地址

    • 本文件通过页面跳转, 打开我们设置的页面

  • server/src/libs/tools/android/www/js/index.js

    • 具体的callapp功能函数代码

如何开发 callApp 辅助功能

开发 Android 环境中的功能:主要相关文件 server/src/libs/tools/android/www/js/index.js

开发 ios 环境中的功能:主要相关文件 client/src/wware/wwappios.js

已支持插件列表

询问负责打包脚本的人或 @masol