APICloud 跟 DCloud 的开发模式思路有些地方是相通的。

H5套壳快速开发调试

直接修改 config.xml 的启动页的值;比方我们用 Vue 开发的一个项目,直接填写我们本地的 devServer 地址即可;

执行上下文

openWin() 方法无效

如果在苹果手机环境下,没有给 params.name 指定一个值,那么就会无效。Android手机真机测试在没有 指定 params.name 时,该方法有效,但是为安全起见,最好指定一个值,并且文档中说明了该参数是非可选项

判断 WebAPP 或网页是否在 APICloud 的下运行

只需要判断 window 对象上是否有 api 属性即可,更好的做法可以使用 apiready 事件来做判断:

// main.js

window.apiready = function() {
    Vue.prototype.$isApp = true
}

但是有一种情况下是不能判断出来的,比方在被 iframe 嵌套的网页就无法访问到 api 这个对象,即使是在 APICloud 的 APP 里。至于为什么被 iframe 嵌套的网页就不会被注入 api 对象,目前暂时搞不清原理,哪位知道的可以跟我交流以下。

H5套壳APP开发时,openTabLayout 的返回按钮事件处理

在入口处对返回按钮进行监听并做出相关的处理:

需要注意的时,以下给出的方案的代码只适合 history 路由模式,hash 路由模式未做处理。

// main.js

window.apiready = function() {
    api.addEventListener({
        name: 'navitembtn',
    }, (ret, err) => {
        if (location.pathname === '/') {
            api.closeWin()
        } else {
            history.back()
        }
    })
}

原本是想直接判断 history.state 是否为 null ,然后做逻辑处理的。但是发现在 APICloud 下,在首页下 history.state 一直有值,不等于 null,这跟在浏览器运行有点差异,因为在浏览器运行时,在首页的时候,history.state === null 的,因为这个差异,只能改用 location.pathname 来做判断,并作对应的逻辑处理,即如果已经是在 首页 了,即关闭当前的 Webview,否则则调用 history.back() 后退。

如果使用 Vue 开发的,或者可以试下 Vue Router 的相关API来做这部分的逻辑处理;

APICloud 调用默认浏览器访问网页或下载文件

为什么我要大费周章的要用 openApp 这个API来调用浏览器呢?主要还是兼容问题,因为我需要实现的功能是 导出PDF,使用了 html2canvsjspdf 这两个库,但是由于

如果是 微信 内,或者 APP 内,则不使用 jspdfsave() 做保存下载,而是通过上次接口生成下载链接,然后再访问 下载链接, 具体方案查询这里:https://blog.csdn.net/qq_38594056/article/details/118212082

Col1 普通浏览器 微信Android 微信iPhone APICloud Android APICloud iPhone
jspdf.save() × × × ×
window.location.href
拉起浏览器
× ×
window.api.openApp({
    androidPkg : 'android.intent.action.VIEW',
    mimeType : 'text/html',
    iosUrl: downloadURL,
    uri: downloadURL,
}, (ret, err) => {
    console.log('ret', JSON.stringify(ret))
})