前言
最近在使用BUI Webapp开发的一个小商城项目在微信上遇到一些坑及变态需求, 层层深入, 整理一下给后来人参考. 一定有你还不知道的!
调试缓存
问题描述: 微信打开的web页面默认是会缓存的,这是为了加载更快,本来是好事,但对于用来调试的我们就比较痛苦了,每每更改一些js,html, 刷新以后,怎么样都去不掉.
解决办法: 每次修改html 在后面增加? 参数, 每次修改js, 在页面引入的时候, 增加问号加时间戳的方式..但依然很痛苦.
BUI Webapp 的处理方案:
index.js
// 去除模块缓存
window.loader = bui.loader({
cache: false
})在路由初始化之前,先去掉模块的缓存, 这样每次进入页面,都会是一个新的脚本, 也就没有缓存问题了.
后退页面刷新
问题描述: 跟前面的缓存有点关系,正常web页面第一次加载以后就会被缓存下来, 所以你想要后退并刷新,那是不好处理的.
BUI Webapp 的处理方案:
// 方案: 后退全局刷新
router.back({
callback: function(){
router.refresh()
}
})
后退局部刷新
问题描述: 如果说后退刷新还比较简单,那如果页面需要局部刷新呢, 客户就不想出现闪白.
BUI Webapp 的处理方案:
// 方案: 后退局部刷新
router.back({
callback: function(mod){
// mod为后退以后页面抛出来的模块. 你可以自定义你的局部方法处理.
mod.init()
}
})后退多层刷新
问题描述: 比方当前路由状态: 首页->列表页->表单页->成功失败-->列表页, 成功失败页以后要跳回列表页.
BUI Webapp 的处理方案:
// 方案: 后退2层刷新
router.back({
index: -2,
callback: function(mod){
// mod为后退以后当前页面抛出来的list模块. 你可以自定义你的刷新处理.
mod.init()
}
})
后退到指定页面
问题描述: 当你的页面有多个入口,入口的层级不一致, 通过索引后退的方式就不能用了,
比方表单页, 入口1: 首页->列表页->表单页 入口2: 首页->表单页, 这时表单页的后退怎样才能后退到首页?
BUI Webapp 的处理方案:
// 方案: 通过指定模块名后退,模块名默认为页面的路径. `main` 则为首页已经声明的默认模块.
router.back({
name: "main",
callback: function(mod){
// mod为后退以后当前页面抛出来的模块. 你可以自定义你的刷新处理.
mod.init()
}
})
后退指定页面并指定第几个TAB
问题描述: 首页底部有5个TAB, 我在表单页后退的时候,想后退到首页第4个tab-购物车 .
BUI Webapp 的处理方案:
main.js
loader.define(function(){
var pageview = {};
// slide 控件为BUI的TAB选项卡
pageview.slide = bui.slide();
pageview.init = function(){}
pageview.init();
// 抛出main模块的方法
return pageview;
})form.js
// 方案: 通过指定模块名后退,模块名默认为页面的路径. `main` 则为首页已经声明的默认模块.
router.back({
name: "main",
callback: function(mod){
// mod为后退以后当前页面抛出来的main模块. 拿到slide调用控件的to方法,索引从0开始.
mod.slide.to(2);
}
})
物理按键后退刷新
问题描述: 开发移动webapp少不了要对移动物理按键的监听,通过上面的方案我们可以实现按钮点击的时候后退刷新, 而用户如果点击的是安卓的物理后退按键呢?
BUI Webapp 的处理方案: 通过在首页监听全局后退事件处理.
index.js
router.on("back",function(e){
var nowPid = e.target.pid,
prevPid = e.prevTarget.pid;
// 如果后退到首页则刷新
if( nowPid === "main" ){
// 加载首页模块的方法
loader.require(nowPid,function(mod){
mod.init();
})
}
})
苹果微信的底部导航条遮挡
问题描述: 首页底部有4个TAB,当点击进入第2个页面的时候, 如果第2个页面也有TAB, 会被微信底部的工具栏遮挡, 这是苹果版微信独有的.
BUI Webapp 的处理方案: 这个坑是因为历史记录引起的, 针对IOS的路由初始化时去除历史纪录.
index.js
bui.ready(function () {
// IOS版的微信,不需要同步历史记录
var needHistory = bui.platform.isIos() && bui.platform.isWeiXin() ? false : true;
// 初始化路由
router.init({
id: "#bui-router",
syncHistory: needHistory,
})
})页面跳转到指定TAB
问题描述: A页面有2个按钮, 点击分别跳转到B页面的2个TAB选项卡.
BUI Webapp 的处理方案:
A.js
$("#btn1").on("click",function(){
bui.load({
url: "pages/b.html",
param: {
index: 0
}
})
})
$("#btn2").on("click",function(){
bui.load({
url: "pages/b.html",
param: {
index: 1
}
})
})B.js
// 接收页面传过来的参数
var param = router.getPageParams();
// 初始化选项卡在第几个
var slide = bui.slide({
index: param.index || 0,
...
})
更多吐槽
欢迎一起吐槽你遇到过的变态需求!!
关于BUI Webapp
BUI Webapp是一个基于Zeptojs或jQuery的UI交互框架, 专注Webapp开发, 提供丰富的组件,灵活的定制,超多的模板及参考案例, 帮助开发者快速构建Webapp, 最终可以在浏览器,微信公众号运行,以及结合Dcloud,ApiCloud,Appcan 等第三方平台打包成 Hybrid App, 完美适配, 一次开发, 多端运行, 并保持一致体验.
