微信Webapp开发的各种{{BANNED}}路由需求及解决办法!

laoLiueizo 发布于2019-08-22 18:31 / 1516人阅读

摘要：前言最近在使用开发的一个小商城项目在微信上遇到一些坑及{{BANNED}}需求层层深入整理一下给后来人参考一定有你还不知道的调试缓存问题描述微信打开的页面默认是会缓存的这是为了加载更快本来是好事但对于用来调试的我们就比较痛苦了每每更改一些刷新以后怎么样都去

前言

最近在使用BUI Webapp开发的一个小商城项目在微信上遇到一些坑及{{BANNED}}需求, 层层深入, 整理一下给后来人参考. 一定有你还不知道的!

调试缓存

问题描述: 微信打开的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,
    ...
})

更多吐槽

欢迎一起吐槽你遇到过的{{BANNED}}需求!!

关于BUI Webapp

BUI Webapp是一个基于Zeptojs或jQuery的UI交互框架, 专注Webapp开发, 提供丰富的组件,灵活的定制,超多的模板及参考案例, 帮助开发者快速构建Webapp, 最终可以在浏览器,微信公众号运行,以及结合Dcloud,ApiCloud,Appcan 等第三方平台打包成 Hybrid App, 完美适配, 一次开发, 多端运行, 并保持一致体验.

云服务器 GPU云服务器的解决办法微软的解决办法 use的解决办法换ip的解决办法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95961.html

一张脑图看懂BUI Webapp移动快速开发框架【下】--快速入门指引

摘要：例如改成例如改成以上两种开发方式都可以结合原生平台打包成独立应用。继上一篇一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源大纲在线查看大纲思路更佳清晰 1. 框架设计框架介绍简介 BUI 是用来快速构建界面交互的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( Li...

hzx 2019-08-26 10:16 评论0 收藏0
一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源

摘要：后续我们还会增加一些实战类的移动开发案例，欢迎关注专栏。进入官网新版预览在线预览需要使用开启设备模拟，效果更佳。前言之前写过一篇 2018开发最快的Webapp框架--BUI交互框架，如果你还没看过，可以简单看一下，主要介绍了BUI的基本功能，有多少控件，以及实现的思路，BUI 1.5版本以后变化很大，统一新的风格，新的规范750，新增基于Dom的数据驱动，完善了页面的生命周期等...

wuyumin 2019-08-26 10:16 评论0 收藏0
好快, 1分钟开发好一个下拉刷新,滚动加载列表

摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。好快, 1分钟写好下拉刷新,滚动加载自动分页列表前言欢迎关注BUI Webapp专栏或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! ...

wemall 2019-08-30 15:56 评论0 收藏0
好快, 1分钟开发好一个下拉刷新,滚动加载列表

摘要：但本活又己交给音长争标识我。八说前它特用达圆是路看江才。开次他争从点军容给油很出。成育料技所心并精北酸间办元。除现七团一历积动两水矿花始线党党她。好快, 1分钟写好下拉刷新,滚动加载自动分页列表前言欢迎关注BUI Webapp专栏或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! ...

468122151 2019-08-30 15:44 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

Lowky 2019-08-30 11:07 评论0 收藏0