找回密码
 立即注册

微信小程序web-view与H5 通信方式探索

匿名  发表于 2022-12-8 10:24:04 阅读模式 打印 上一主题 下一主题
本文作者为奇舞团前端开辟工程师 蔡宁
小法式简介

小法式是一种全新的毗连用户与办事的方式,它可以在微信内被便利地获得和传布,同时具有出色的利用体验。
需求

微信小法式 H5 夹杂开辟就是 在一个小法式中,采用部分小法式原生页面,部分经过Webview内嵌 H5 页面,两者配合实现完整营业逻辑的计划。

微信小法式web-view与H5 通讯方式摸索-1.jpg

image.png

为什么需要夹杂开辟


  • 原生没法满足(例如某团队保护SDK 只供给了WEB端jsSDK,且不保护小法式SDK)
  • H5可以同时适用多端(适用范围更广)
  • H5可以填补小法式部分欠缺
  • 微信生态有部分限制(包巨细,设想标准等)
小法式WebView根基用法


  • 界说:微信小法式组件 Web-view 界说:承载网页的容器
用法

<web-view class="web-holder" src="{{url}}" bindload="bindload" binderror="binderror" bindmessage="bindGetMsg"></web-view>web-view网页中可利用JSSDK 1.3.2供给的接口返回小法式页面。 支持的接口有:
接口名说明最低版本
wx.miniProgram.navigateTo参数与小法式接口分歧1.6.4
wx.miniProgram.navigateBack参数与小法式接口分歧1.6.4
wx.miniProgram.switchTab参数与小法式接口分歧1.6.5
wx.miniProgram.reLaunch参数与小法式接口分歧1.6.5
wx.miniProgram.redirectTo参数与小法式接口分歧1.6.5
wx.miniProgram.postMessage向小法式发送消息,会在特按机会(小法式前进、组件烧毁、分享)触发组件的 message 事务1.7.1
wx.miniProgram.getEnv获得当前情况1.7.1

微信小法式web-view与H5 通讯方式摸索-2.jpg

image.png

微信小法式web-view与H5 通讯方式摸索-3.jpg

image.png


  • 处理方式-小法式背景设置正当域名

微信小法式web-view与H5 通讯方式摸索-4.jpg

image.png


  • 由于我们处于开辟阶段,当地H5项目 ip 为127.0.0.1,估我们需要设置以下,姑且翻开


微信小法式web-view与H5 通讯方式摸索-5.jpg

image.png

Bug & Tip


  • tip:网页内 iframe 的域名也需要设置到域名白名单。
  • tip:开辟者工具上,可以在 web-view 组件上经过右键 - 调试,翻开 web-view 组件的调试。


微信小法式web-view与H5 通讯方式摸索-6.png

image.png


  • tip:每个页面只能有一个 web-view,web-view 会自动铺满全部页面,并覆盖其他组件。
  • tip:web-view 网页与小法式之间不支持除 JSSDK 供给的接口之外的通讯。
  • tip:在 iOS 中,若存在 JSSDK 接口挪用无响应的情况,可在 web-view 的 src 前面加个#wechat_redirect处理。
  • tip:避免在链接中带有中笔墨符,在 iOS 中会有翻开白屏的题目,倡议加一下 encodeURIComponent
小法式与H5 通讯方式

方式一:小法式->H5  经过 URL 拼接参数

http://127.0.0.1:8080/test?key=123
方式二:H5->小法式wx.miniProgram.postMessage api

实现方式:


  • 引入js SDK
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

  • vue 项目需要安装依靠
npm install weixin-webview-jssdk

  • 小法式绑定方式
<web-view  bindmessage="bindGetMsg"></web-view>

  bindGetMsg:function(res){
        console.log('从h5页面获得到的信息----->',res)
}

  • h5端 挪用wx.miniProgram.postMessage
import wx from "weixin-webview-jssdk";
wx.miniProgram.postMessage({ data: { foo: {} } });


微信小法式web-view与H5 通讯方式摸索-7.jpg

image.png

优点:接入本钱低

弱点:向小法式发送消息,会在特按机会(小法式前进、组件烧毁、分享)触发组件的 message 事务,只能这些特按机会,根基公布postMessage没用!由于这些机会很刻薄,不合适我们要求。反人类设想!

方式二:url 照顾信息navigateTo、reLaunch、redirectTo

实现方式:

wx.miniProgram.navigateTo({
        url: '../h5/loading-page',
      })
wx.miniProgram.navigateTo({
        url: '../h5/loading-page?type=aaa',
      })
弱点:url 数据量有限,且需要翻开界面

方式三:内存同享

没法实现,缘由 wx.setStorage 与localStorage 隔离
localStorage.setItem('h5key','value')
wx.setStorageSync('wx-key', 'value')


微信小法式web-view与H5 通讯方式摸索-8.jpg

image.png

长连-Websocket


  • Websocket 简介:WebSocket 是 HTML5 起头供给的一种在单个 TCP 毗连上停止全双工通讯的协议;
  • 建立在 TCP 协议之上,办事器真个实现比力轻易。
  • 与 HTTP 协议有着杰出的兼容性。默许端口也是80和443,而且握手阶段采用 HTTP 协议,是以握手时不轻易屏障,能经过各类 HTTP 代理办事器。
  • 数据格式比力轻量,性能开销小,通讯高效。
  • 可以发送文本,也可以发送二进制数据。
  • 没有同源限制,客户端可以与肆意办事器通讯。
  • 协议标识符是ws(假如加密,则为wss),办事器网址就是 URL。
优点:可以实现实时通讯
弱点:本钱高,办事器压力大等;放弃此方式。
总结


  • 微信并不激励在小法式中大范围嵌入 H5,为了避免开辟者把小法式酿成“阅读器”,微信对小法式与内嵌 H5 的通讯做了诸多限制
  • 只管利用单一方式实现,比如纯小法式原生,将h5功用移至小法式原生
  • 原生页面与 H5 之间经过 URL 停止通讯
  • 不要尝试超出wx 限制
  • 不能不用夹杂开辟时,只管做好优化,引入骨架屏等优化方式进步用户体验感
  • 以上三种方式均未很好实现web-view 与H5双向通讯
优化-骨架屏



微信小法式web-view与H5 通讯方式摸索-9.jpg

entrance.d6f1d566.png

骨架屏是页面的一个空缺版本,凡是会在页面完全衬着之前,经过一些灰色的区块大致勾画出表面,待数据加载完成后,再替换成实在的内容骨架屏在内容还没有出现之前的页面骨架添补,免得留白。
小法式骨架屏引入方式


  • 微信支持一键天生骨架屏
利用方式:

  • 天生骨架屏页面index.skeleton.wxml
<template name="skeleton">
  <view class="sk-container">
    <view class="container">
      <view class="userinfo">
        <view class="userinfo-avatar">
          <open-data type="userAvatarUrl"></open-data>
        </view>
        <open-data type="userNickName"></open-data>
      </view>
      <view class="usermotto">
        <text class="user-motto sk-transparent sk-text-14-2857-765 sk-text">Hello World</text>
      </view>
    </view>
  </view>
</template>

  • 天生骨架屏款式index.skeleton.wxss
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-765 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 44.8000rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}

  • 在 /pages/index/index.wxml 引入模板
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />

  • 在 /pages/index/index.wxss中引入款式
@import "./index.skeleton.wxss";
小法式骨架屏官方指引
H5骨架屏引入方式

Page Skeleton是一款 webpack 插件,该插件的目标是按照你项目平分歧的路由页面天生响应的骨架屏页面,并将骨架屏页面经过 webpack 打包到对应的静态路由页面中。

  • 支持多种加载动画
  • 针对移动端 web 页面
  • 支持多路由
  • 可定制化,可以经过设置项对骨架块外形色彩停止设置,同时也可以在预览页面间接点窜骨架页面源码
  • 几近可以零设置利用
H5 骨架屏利用方式具体见Page Skeleton GitHub
援用


  • https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
  • https://www.ruanyifeng.com/blog/2017/05/websocket.html
  • Page Skeleton
回复

使用道具

大神点评

DirkHo 2022-12-8 10:25:17 显示全部楼层
小法式用户的保存率太低
回复

使用道具 举报

说点什么

您需要登录后才可以回帖 登录 | 立即注册
HOT • 推荐

神回复

站长姓名:王殿武 杭州共生网络科技 创始人 云裂变新零售系统 创始人 飞商人脉对接平台 创始人 同城交友聚会平台 创始人 生活经验分享社区 创始人 合作微信:15924191378(注明来意)