扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小程序webview的现状
10年积累的成都做网站、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有吉利免费网站建设让你可以放心的选择与我们合作。
h6页面在小程序中的交互(跳转)场景
主要痛点
在完成相关操作后, 页面状态需要更新,目前常见的更新方式有如下两种:
第一种方案,功能上没有问题,但会导致页面刷新,如果页面操作复杂,需要多次刷新
第二种方案,正向操作时体验比方案一好,但导致了另外一个问题:操作 跳转层级过深,尤其返回的时候简直让人崩溃。
小程序中,h6页面打开新页面方式
我们先来看下小程序中常见的h6跳h6的方式:
我们采用的是方式3,理由如下:
由于这种方案可能会达到小程序的10层限制。所以在一些重要页面建议加入“ 回到首页”的操作,通过这个操作来缩短小程序历史栈
回到首页方案简述
(如果不感兴趣这部分可以直接略过)
wx.miniProgram.reLaunch({ url: '/pages/webview/bridge?url=项目首页地址' })
先声明,我们webview的路径是/pages/webview/webview
/pages/webview/bridge是个中转页,有如下特点: 该页面并 不是最终打开h6页面的webview页,而是一个 中转页。
主要用作返回处理
这个中转页:主要保证reLaunch到某h6页面后,用户仍然可以点击返回到小程序首页。
该方案通常用于:小程序中内嵌了多个业务线的h6页面这种场景。
一个内容发布场景
我们从首页进入发布页,完成发布后,跳转至商品详情页
那么对于一个新用户来讲,整个操作过程是这样的:
这个场景就是同一个页面,里面不同的内容项需要跳转不同的页面去操作,然后再回到原来页面更新状态的问题。
假如商品详情页没有“回到首页”的入口,那么这个用户要想回到首页。。。需要按8次“返回” = =!
经过这个体验后,我想一般的用户是没有勇气再发布内容的。
当然也有另一种这种折中方案
就是商品提到的,在连接中加入某个标志位,比如在url中加入__isonshowrefresh=1,webview在打开连接时候,会去读取这个参数,如果有,则每次在onShow时候,重新加载url,通过刷新页面进行页面状态更新。
这个体验也不爽,就是在复杂的页面会多次刷新。
声明
我下面要讲的这个方案并不是停留在设想阶段,它已经在线上跑了
想看效果的朋友,可以在微信小程序中搜:
“转转二手交易网”-“0元免费领”-(底部)“送闲置赚星星”-进入到发布页后
分类(跳转h6,选中内容后返回,将参数传给之前的h6)
取件地址(跳转native原生地址选择,选中后返回,将参数传给之前的h6)
OK,我们进入今天的主题
小程序中h6页面onShow和跨页面通信的实现
首先想到的就是onShow方法的实现,之前有人提议用visibilitychange来实现onShow方法。
但调研过后,这种方式在ios中表现符合预期,但是在安卓手机里,是不能按预期触发的。所以该方案被我否了。
于是就有了下面的方案
原理介绍
这个方案需要h6和小程序的webview都做处理。
核心思想: 利用webview的hash特性
为什么要执行window.history.go(-1)
这一步是整个方案的精髓:
方案延伸(跨页面数据传递)
小程序里另个一常见的场景就是调用第三业务(或者己方业务),在做完某些操作后需要把选中的数据带回之前的页面。
如前面提到的例子:发布页,需要选择发布类型,然后返回,发布页发布类型局部更新
当然有些同学会说:我可以用setInterval,监控localStorage。在新页面选中内容后,设置localStorage,然后在返回不就可以了。
我这里说的是 通用方案。如果页面都是由己方业务线维护的当然可以随便折腾。
但是一旦涉及到第三方业务线,尤其不同域名页面的业务调用,这种通信方式就尴尬了。
那我的方案怎么处理呢,我总结了一张图
我们来解读一下这张图:
整个过程就是这样
代码示意:
小程序
小程序webview要先做几方面考虑:
小程序端webview.wpy
// 链接处理工具方法 import util from '@/lib/util'; // 全局数据存储操作类 import routeParams from '@/lib/routeParams'; const urlReg = /^(https?\:\/\/[^?#]+)(\?[^#]*)?(#[^\?&]+)?(.+)?$/; let messageData = {}; export default class extends wepy.page { data = { // 页面展示次数 pageShowCount: 0, // 页面url中query部分的参数对象 mQuery: {}, ... } onShow(){ ++this.pageShowCount; // 获取其他页面经过操作后,需要传递给h6的参数 let data = routeParams.getBackFromData() || {}; // webview页面状态更新 if(this.pageShowCount > 1 && this.mQuery.__isonshowpro && this.mQuery.__isonshowpro === '1' || data.refresh){ // 获取需要传递给h6页面的参数 let refreshParam = data.refreshParam; ... // 如果连接中带有需要处理onShow逻辑的参数(通过url的hash和h6交互,而不是刷页面) if (this.pageShowCount > 1 && this.mQuery.__isonshowpro === '1') { let [whole, mainUrl, queryStr, hashStr, hashQueryStr] = urlReg.exec(this.url); // 在url的hash中加入新的参数 hashStr = (hashStr || '#').substring(1); if (refreshParam) { delete refreshParam.refresh; } const messageData = this.getNavigateMessageData(); // 将需要更新的参数传给页面hash hashStr = util.addQuery(hashStr, Object.assign({ // onshow标志位 __isonshow: 1, // wa主动触发hashchange标志位 // 其实目前通过__isonshow就可以判断是wa主动触发hashchange // 设置该字段是为了明确功能,且以后扩展用 __wachangehash: 1, // 时间戳刷新 __hashtimestamp: Date.now() }, messageData, refreshParam)); this.url = mainUrl + queryStr + '#' + hashStr; console.log('【webview-hashchange-url】', this.url); // 这里要加个延迟,否则在webview返回到webview时,无法触发hashchange,应该是小程序bug setTimeout(()=> { this.$apply(); }, 50); // 通过修改query参数,刷新webview } else { ... } ... } } /** * 获取需要发送的消息数据 */ getNavigateMessageData(){ let rst = {}; for(let i in messageData){ /* message结构: message: { key: 'xx', // 消息名称 content: 'xx', // 消息内容 trigger: { // 触发条件 type: '', // 触发类型 - immediately 在下一次onshow或者打开页面中立刻触发, - url 在找到指定h6链接时触发 content: '' // 条件内容 - type=immediately 时为空 - type=url 时候为h6链接地址 } } */ const message = messageData[i]; const trigger = message.trigger || {}; // 立刻发送、路径触发 if(trigger.type === 'immediately' || trigger.type === 'url' && this.url.indexOf(trigger.content) > -1){ // 将key和content集合到一个对象中,便于hash直接设置 rst[message.key] = message.content; // 消息通知后,从缓存中删除 delete messageData[message.key]; } } console.log('【webview-get-message】', rst); console.log('【webview-message-cache】', messageData); return rst; } /** * 存储消息数据 */ storeNavigateMessageData(message){ if(message && message.key){ console.log('【webview-store-message】', message) // 通过key设置每一条消息名称 messageData[message.key] = message; console.log('【webview-message-cache】', messageData); } } methods = { // 接收发送过来的消息 onPostMessage(e){ if(!e.detail.data)return; const detailData = e.detail.data; // 获取消息数据 let messageData = getValueFromMixedArray(detailData, 'messageData', true); if (messageData) { // 存储 this.storeNavigateMessageData(messageData); } ... } } ... }
上面东西看着挺多,总结下来就是几点:
h6端
h6端在做修改时也要考虑几点:
最好能把这些交互逻辑封装起来
让业务方比较简单方便的调用
这里我新定义了2个方法
onShow(callback)
例子:发布页面,需要选择分类,返回时需要更新分类信息
import { isZZWA, onShow } from '@/lib/sdk' import URL from '@/lib/url' ... created () { if (isZZWA()) { onShow(() => { // 地址信息 const addressInfo = URL.getHashParam('zzwaAddress') console.log('addressInfo:', decodeURIComponent(addressInfo)) ... // 分类信息 const selecteCateInfo = URL.getHashParam('selecteCateInfo') console.log('selecteCateInfo:', selecteCateInfo) ... } else { ... } } ...
serviceDone(data, condition)
描述:业务结束,需要将数据传递给指定页面
参数:
data Object 需要传递的数据 {key: 'xx', content: 'xx'}
condition String|Number 触发条件
例子:类型选择页
import { isZZWA, serviceDone } from '@/lib/sdk' // 类型选择点击 typeChooseClick (param, type) { ... if (isZZWA()) { // 需要返回的数据 const data = { key: 'selecteCateInfo', content: JSON.stringify({...}) } // 通过postMessage发送给小程序,-1表示返回上一页面 serviceDone(data, -1) } else { ... } }
ok,我们来看看h6端的sdk是怎么实现的
import util from './util'; class WASDK { /** * Create a instance. * @ignore */ constructor(){ // hashchang事件处理 if('onhashchange' in window && window.addEventListener && !WASDK.hashInfo.isInit){ // 更新标志位 WASDK.hashInfo.isInit = true; // 绑定hashchange window.addEventListener('hashchange', ()=>{ // 如果小程序webview修改的hash,才进行处理 if (util.getHash(window.location.href, '__wachangehash') === '1') { // 这块有个坑: // ios小程序webview在修改完url的hash之后,页面hashchange和更新都可以正常触发 // 但是:h6调用部分小程序能力会失败(如:ios在设置完hash后,调用wx.uploadImg会失败,需要重新设置wx.config) // 因为ios小程序的逻辑是,url只要发生变化,wx.config中的appId就找不到了 // 所以需要重新进行wx.config配置 // 这一步是获取之前设置wx.config的参数(需要从服务端拿,因为之前已经获取过了,这里从缓存直接取) const jsticket = window.native && window.native.adapter && window.native.adapter.jsticket || null; const ua = navigator.userAgent; // 非安卓系统要重新设置wx.config if (jsticket && !(ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1)) { window.wx.config({ debug: false, appId: jsticket.appId, timestamp: jsticket.timestamp, nonceStr: jsticket.noncestr, signature: jsticket.signature, jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo', 'scanQRCode', 'chooseImage', 'uploadImage', 'previewImage', 'getLocation', 'openLocation'] }) } // 触发缓存数组的回调 WASDK.hashInfo.callbackArr.forEach(callback=>{ callback(); }) // 执行返回操作(这一步是重点!!) // 因为webview设置完hash参数后,会使webview历史栈+1 // 而实际并不需要这次多余的历史记录,所以需要执行返回操作把它去掉 // 即便是返回操作,也仅仅是hash层面的变更,所以不会触发页面刷新 // 用setTimeout表示在下一次事件循环进行返回操作。如果后面有对dom操作可以在当前次事件循环完成 setTimeout(()=>{ window.history.go(-1); }, 0); } }, false) } } /** * hash相关信息 */ static hashInfo = { // 是否已经初始化 isInit: false, // hash回调香瓜数组 callbackArr: [] } /** * 页面再次展示时钩子方法 * @param {Function} callback - 必填, callback回调方法, 回传参数为hash部分问号后面的参数解析对象 */ @execLog onShow(callback){ if (typeof callback === 'function') { // 对回调方法进行onshow逻辑包装,并推入缓存数组 WASDK.hashInfo.callbackArr.push(function(){ // 检查是否是指定参数发生变化 if(util.getHash(window.location.href, '__isonshow') === '1'){ // 触发onShow回调 callback(); } }) } else { util.console.error(`参数错误,调用onShow请传入正确callback回调`); } } /** * 业务处理完成并发送消息 * @param {Object} obj - 必填项,消息对象 * @param {String} obj.key - 必填项,消息名称 * @param {String} obj.content - 可选项,消息内容,默认空串,如果是内容对象,请转换成字符串 * @param {String|Number} condition - 可选项,默认仅进行postMessage * String - 可以传指定url的路径,当小程序webview打开指定的url或者onshow时,会触发该消息 * 也可传小程序path,这个为以后预留 * Number - 返回到指定的测试,类似history.go(-1),如: -1,-2 */ @execLog serviceDone(obj, condition){ if(obj && obj.key){ // 消息体 const message = { // 消息名称 key: obj.key, // 消息体 content: obj.content || '', // 触发条件 trigger: { // 类型 'immediately'在下一次onshow中立刻触发, 'url',在找到指定h6链接时触发,'path'在打开指定小程序路径时触发 type: 'immediately', // 条件内容,immediately是为空,url是为h6链接地址,path是为小程序路径 content: '' } }; // 解析触发条件 condition = condition || 0; // 如果是路径 if(typeof condition === 'string' && (condition.indexOf('http') > -1 || condition.indexOf('pages/') > -1)){ // 设置消息触发条件 message.trigger = { type: condition.indexOf('http') > -1 ? 'url' : 'path', content: condition } } // 发送消息 wx.miniProgram.postMessage({ data: { messageData: message } }); // 如果不是url或者path触发,则对conditon是否需要返回进行判断 if(message.trigger.type === 'immediately'){ // 查看是否需要返回指定的层级,兼容传入'-1'字符串这种类型的场景 try{ condition = parseInt(condition, 10); }catch(e){} // 保证返回级数的正确性 if(condition && typeof condition === 'number' && !isNaN(condition)){ this.handler.navigateBack({delta: Math.abs(condition)}); } } }else{ util.console.error(`参数错误,调用serviceDone方法,传入的对象中不包含key值`); } } ... } window.native = new Native(); export default native;
这个看着也挺多,总结下来是两点:
onShow方法的实现
绑定一个hashchange事件(这里做了防止重复绑定事件的处理)
将传入的onShow自定义事件缓存在一个数组中,hashchange触发时,根据特有的标志位__isonshow和__wachangehash确定是否触发
serviceDone方法的实现
ok,整个方案就介绍完了
结语
最早的方案并不完全是这样的,但原理是一样的。在我实现的过程中发现原始方案有很多问题
于是我又做了大量的改造和细节优化,于是形成了上面的最终方案。
这个方案属于侵入式改造方案,需要各业务方改造自己的代码。虽然有一定改造成本,但用户体验的收益非常明显。
ps:我们的QA在测试时都说“这用起来就爽多了”
注意:
采用这个方案需要注意几点:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流