APICloud 跟 DCloud 的开发模式思路有些地方是相通的。
H5套壳快速开发调试
直接修改 config.xml
的启动页的值;比方我们用 Vue
开发的一个项目,直接填写我们本地的 devServer
地址即可;
执行上下文
APICloud
会给Webview
的window
对象注入api
对象;iframe
嵌套的网页就不会被注入api
对象;
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 的返回按钮事件处理
- 如果没有自定义
navigationBar.leftButtons
,那么是不需要自行处理 返回按钮 的逻辑的。 - 如果自定义了
navigationBar.leftButtons
,就会导致 返回按钮 点击无效,只能开发者自己实现返回的逻辑了。相关帖子:https://developer.yonyou.com/thread-127124-1-1.html - 顺便提一句
navigationBar.leftButtons.iconPath
可以时本地地址也可以是一个网络地址,比方:http://example/back.png
。
在入口处对返回按钮进行监听并做出相关的处理:
需要注意的时,以下给出的方案的代码只适合
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,使用了 html2canvs 和 jspdf 这两个库,但是由于
- 微信公众号 以及 APICloud 开发的 APP 不能使用 jspdf 实例的
save()
进行方法保存及下载; - 微信公众号 以及 APICloud 开发的 APP 使用
window.location.href = downloadURL
在 iPhone 手机不能拉起浏览器进行下载; - APICloud 开发的 APP 内使用 jspdf 实例的
save()
方法会导致黑屏、或白屏、或一直downloading...
如果是 微信 内,或者 APP 内,则不使用 jspdf 的 save()
做保存下载,而是通过上次接口生成下载链接,然后再访问 下载链接, 具体方案查询这里: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))
})