2023年6月28日发(作者：)

实现webView和⼩程序通讯，webView和iframe通讯，⽽后以webView作为。。。之前领导要求就打通webView、⼩程序和iframs三者之间的通讯做⼀份技术⽂档说明，功能是做出来了，结果后⾯没有接到那个项⽬，也就没有继续开发下去，但也值得记录⼀下。项⽬⽬标实现webView和⼩程序通讯，webView和iframe通讯，⽽后以webView作为中转站，实现webView中的iframe和⼩程序通讯。需求确定在商城⼩程序中以webView的形式引⼊客服聊天页⾯IM，在IM中以iframe的形式嵌⼊第三⽅页⾯，内容和样式第三⽅⾃定义。iframe的操作需求整理如下：1. 跳转到⽂章详情2. 链接到另⼀个客服3. 跳转到商品详情4. 跳转到商品购物车页5. 跳转到订单详情6. 发送消息可以整理为三⼤类：1.⼩程序页⾯跳转2.向某⼀个客服发起会话3.在当前会话发送消息实现1. webView和⼩程序通讯官⽅⽂档对于web-view组件的描述是：承载⽹页的容器。会⾃动铺满整个⼩程序页⾯，个⼈类型的⼩程序暂不⽀持使⽤。所以在⼩程序中webView是不能以弹窗的形式或者占据页⾯⼀部分和其它内容共存，这个特点微信⼩程序和⽀付宝⼩程序都具备。webView组件和⼩程序只能通过bindmessage事件绑定进⾏通讯，对于这个事件官⽅的描述是这样的：⽹页向⼩程序 postMessage时，会在特定时机（⼩程序后退、组件销毁、分享）触发并收到消息。也就是说⽆论webView通过postMessage向⼩程序发送多少次消息，只要不是在特定的时机（⼩程序后退、组件销毁、分享），⼩程序就不会收到webView的消息。通过以上两点，我们可以确定⼩程序的当前页⾯只有⼀个webView是有效内容，那⼩程序和webView之间的通讯最常⽤的也就是⼩程序进⾏页⾯的跳转了。// 在webView页⾯中引⼊微信JS⽂件// 进⾏页⾯跳转teTo({ url: '/pages/home2/index', // ⼩程序页⾯路径})　　2. webView和内嵌的iframe页⾯通讯　　 两者通过postMessage进⾏通讯，主要代码如下ntListener('message', (event) => { if ( !== ) { return } (event, 'event'); //接收到的信息 ssage("发送给⽗级页⾯的信息，可以为对象", '⽗级页⾯url或者*');}, false);

完整主要代码1. ⼩程序2. webView客服聊天页⾯IM// 在webView页⾯中引⼊微信JS⽂件let ua = rCase();if ((/MicroMessenger/i) == "micromessenger") { //ios的ua中⽆miniProgram，但都有MicroMessenger（表⽰是微信浏览器） ((res) => { if (ogram) { ("在⼩程序⾥"); // 接收到消息 ntListener('message', , false); } else { ("不在⼩程序⾥"); } })} else { ('不在微信⾥');}fnTest = (event) => { let data = ; if (ion === 'msg') { // 在当前会话发送消息 let r = (() * 100000) let uuid = Id + () + r; let sendData = ''; // 0视频，1图⽚，2⽂件，4⽂本，8富⽂本，103iframe switch () { // 消息类型处理 case 103: sendData = Url; break; } // ssage IM中发送消息函数 ssage(sendData, , uuid); } else if (ion === 'action') { // ⼩程序页⾯跳转 teTo({ url: //'/pages/home2/index' }) } else if (ion === 'chat') { let code = ryString('code') let url = `?code=${code}&otherId=7&sessionScope=1&userCode=${de}` // 向某⼀个客服发起会话 (url) }}　　3. 第三⽅iframe页⾯发送消息跳转页⾯跟他聊聊ntListener('message', (event) => { if ( !== ) { return } (event, 'event'); //接收到的信息 ssage("发送给⽗级页⾯的信息，可以为对象", '⽗级页⾯url或者*');}, false);// operation 操作类型string msg：发送消息 ，action：跳转页⾯，chat：发起聊天// type 消息类型string operation为msg时，0视频，1图⽚，2⽂件，4⽂本，8富⽂本，103iframe// 其他具体参数另定$('.btn').on('click', function () { ssage({ operation: 'msg', data: { data: '消息内容', type: 103, //Number类型 size: 110, //Number类型 name: '', //⽂件名称 iframeUrl: '/i-service/dev/iservice-customer-web-pc/' }, }, '*')});$('.action').on('click', function () { ssage({ operation: 'action', data: { url: '/pages/home2/index?xxx=xx', // 需要跳转页⾯ } }, '*')});$('.chat').on('click', function () { ssage({ operation: 'chat', data: { userCode: '007', // 客服⼯号 } }, '*')});定义参数参数名datadata参数类型是否必填object是

描述枚举值：1. msg：发送消息 ：跳转页⾯ ：发起聊天operationstring是参数名typesizenamedataurl类型是否必填⽂件⼤⼩，默认为0⽂件名称，默认为空iframe路径⼩程序跳转路径客服⼯号描述0视频，1图⽚，2⽂件，4⽂本，8富⽂本，103iframenumberoperation为msg时必填numbertype为2时必填stringstringstringtype为2时必填type为103时必填operation为action时必填operation为chat时必填iframeUrlstringoperation为msg且type不为103时必填type为0,1,2时，为视频、图⽚、⽂件的路径，type为4,8时，为发送的内容userCodestring⽀付宝⼩程序⼩程序代码// .axml // .jsPage({ onmessage(e){ // 拿到webView数据，进⾏⼀系列事件处理 (e,'e') }});webView代码// 引⼊jscomponentWillUnmount() { // 离开页⾯，清除监听 EventListener('message', , false);}fnTest = (event) => { // alert(ify(event), 'event') let data = ; if (ion === 'msg') { // 在当前会话发送消息 let r = (() * 100000) let uuid = Id + () + r; let sendData = ''; // 0视频，1图⽚，2⽂件，4⽂本，8富⽂本，103iframe switch () { // 消息类型处理 case 103: sendData = Url; break; } // ssage IM中发送消息函数 ssage(sendData, , uuid); } else if (ion === 'action') { // ⼩程序页⾯跳转 // teTo({ url: `../../${}` }); teTo({ url: `../test/test` }); } else if (ion === 'chat') { let code = ryString('code') let url = `?code=${code}&otherId=7&sessionScope=1&userCode=${de}` // 向某⼀个客服发起会话 (url) }}componentDidMount() { ntListener('message', , false);}

特别说明：webView向⽀付宝⼩程序发送消息时，并没有微信⼩程序接收webView消息的限制【需要在特定时机（⼩程序后退、组件销毁、分享）触发才能收到消息】，只要webView通过

ssage(obj)向⼩程序发送消息，⼩程序就能接收到消息，⽀付宝⼩程序和webView的通讯更⽅便灵活。

流程图