前言：
apicloud中最常用的两种打开新页面的方式是 openWin 和 openFrame
而apicloud提供的api：
api.addEventListener({
name: 'keyback'
}, function(ret, err){
alert('按了返回键');
});
必须在 Window 中注册才有效，Frame 中注册无效，并且只在当前屏幕上的 window 才能收到回调。
但是 openWin 占用的资源比 openFrame 高太多，稍微打开几个页面就会有明显的卡顿。
因此这里简单的实现了一个通过拦截 openFrame，在缓存中实现一个简单的historyList，来实现点击物理返回实现返回上一页
准备：
新打开一个页面：
api.openFrame({
name: name, // 新打开的Frame的名字，apicloud会根据名字来判断到底是哪个frame
url: path. // 打开页面的地址
});
设置缓存：
api.setGlobalData({
key: 'historyList', // 存放的缓存的 key
value: JSON.stringify(historyList), // 官方文档说介意放json对象，但是数组放不了，所以转换成字符串
});
获取缓存：
api.getGlobalData({
key: 'historyList' // 根据ke来获取缓存
})
实现：
首先新建一个 tools.js 文件，里面放上下边代码：
let whiteList = ['login', 'home'] // 按下返回键退出程序的页面，若不在whiteList中则是返回上一页
// 跳转 参数： 新打开frame的名字 | 新打开页面的路径 | 需要传递的参数
function goto (name, path, pageParam) {
// 保存历史记录
let historyList = api.getGlobalData({
key: 'historyList'
}) || '[]'; // 历史记录 首次进入是没有值的 所以赋值为字符串 ‘[]’
historyList = JSON.parse(historyList) // 转换为数组
historyList.push(name) // 将新页面放进history
api.setGlobalData({ // 将history 存入缓存
key: 'historyList',
value: JSON.stringify(historyList)
});
api.openFrame({ // 打开新页面
name: name,
url: path,
bounces: false,
rect: {
w: 'auto'
},
animation: {
type: 'push',
subType: 'from_bottom'
},
pageParam: pageParam // 需要传递的参数
});
}
// 返回上一页
function back () {
let historyList = api.getGlobalData({
key: 'historyList'
}); // 获取历史记录
historyList = JSON.parse(historyList) // 转换为数组
let frame = historyList[historyList.length - 1] // 获取到当前页面的name，即最后打开的这个页面
if (whiteList.includes(frame)) { // 如果是在 whiteList 中则执行 关闭app 的操作
api.closeWidget({
id: appID // 这里替换成你的appid
});
} else { // 若没在whiteList中 则执行返回上一页操作
historyList.pop() // 将本页从history中移除
api.setGlobalData({
key: 'historyList',
value: JSON.stringify(historyList) // 更新historyList
});
api.closeFrame({ // 关闭本页，apicloud自动打开上一个frame，实现返回上一页的效果
name: frame
})
}
}
最后，在程序入口页面 index.html中先引入 tools.js， 然后放入以下代码：
apiready = function() {
goto('login', 'html/login.html') // 进入程序跳转到登录页，根据自己情况调整
// 拦截返回键
api.addEventListener({
name: 'keyback'
}, function(ret, err) {
back() // 执行返回操作
return
});
};
后言：
goto 和 back 方法中可以拓展很多内容，
比如返回是否刷新上一页，实现自定义router等等
我这个程序比较简单就深入了。
文中如果有地方讲的不对，欢迎指正，欢迎交流。
网友评论