微信Webapp开发的各种变态路由需求及解决办法!

前言

最近在使用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, 完美适配, 一次开发, 多端运行, 并保持一致体验.

BUI单页路由