lofter-navigate

LOFTER 统一跳转方法

背景

目前LOFTER APP内支持使用scheme唤起新WebView打开指定的H5 url，该功能带来的浏览体验比使用location.href跳转要好（页面滚动位置的保留、手势支持、过场动画等），所以在端内页面的跳转推荐优先使用scheme方案。 同时，需要与客户端约定能够同时打开WebView的最大个数，以防占用过大内存或者性能造成APP崩溃、卡顿等问题。

方案

• 与客户端约定，最大能够同时打开WebView的个数为10个，超过10个的情况下，再次调用scheme，打开新WebView的同时关闭最早的一个WebView。
• 客户端增加一个JSBridge协议，支持H5通过该协议获取当前App已打开的WebView数量。
• 前端封装统一的跳转方法，端外及不支持上述JSBridge协议的客户端内使用location.href跳转新url，在支持该协议的App端内使用Scheme触发新WebView打开
• 前端统一跳转方法在通过JSBridge协议获取到当前WebView栈个数达到10个时，回退到location.href的方式进行跳转，防止出现预期之外的WebView页面栈丢失

使用

es module引入

import {
  go,
  close,
  openWithLocation,
  openWithWebview,
} from 'lofter-navigate'

go('https://www.lofter.com')

浏览器直接引入

<button id="control" style="display: block; margin: 20px 0">带有页面栈数量控制的跳转按钮</button>
<script src="https://lofter.lf127.net/1658719740509/lofternavigate.umd.production.min.js"></script>
<script>
  $('#control').on('click', function(e) {
    e.preventDefault();
    const url = location.href + '?t=' + new Date.getTime();
    window.lofterNavigate.go(url);
  })
</script>

注意

• 可以单独引用本SDK提供的close、openWithLocation、openWithWebview方法，但是要自行控制好页面栈数量和使用时机。
• 不是所有的场景都适用新WebView打开这一客户端功能，需要注意区分和鉴别。
• go方法可以传递第二个参数maxCount，正整数类型，表示当前最大允许打开的WebView数量，默认不传时为10
• openWithWebview可以传递第二个参数params，不传默认为{inside: true}，如果需要在7.5.6版本打开透明WebView，可以传{inside: true, opacity: true},如果需要添加webview 背景颜色,不带#的色值，可以传{inside: true, opacity: true, bgColor: '213213'}