微信小程序嵌套webview页面条件控制是不是返回小程序

Posted 2023-03-23

参考技术A 在微信小程序中，可以使用 webview 嵌套 web 页面，有些时候在 web 页面填写了表单没有提交，当用户点击左上角小程序的返回时，希望可以弹框提示用户还有未保存内容，是否确定返回，根据用户选择之后在确定是否返回。

由于返回图标是微信小程序自带的，因此我们无法通过 web 页面的路由离开钩子(如：vue中beforeRouterLeave钩子函数)来控制页面是否关闭，因此想要在离开页面时在 web 页面进行逻辑控制是有难度的。

使用浏览器的 popstate 事件来禁止页面跳转。

微信小程序webview内页面分享

需求：微信小程序内部使用webview嵌套了h5页面，现在要添加一个新的功能，用户在哪个页面进行了分享，被分享的用户从链接进来就跳转到哪个分享页面。

由于webview内部页面无法直接调起小程序的转发，所以为了实现webview中的页面分享，把h5页面地址作为参数传输，在接收的页面中取出并赋值到当前页面webview中的src中，即可进行展示。

三个注意点：

• 如何拿到webview中当前的页面链接，以及一些动态参数如何传递给小程序？

动态参数包括要跳转的h5页面地址，分享链接展示的图片
这些参数需要通过h5页面来进行获取，然后h5再传输给小程序，小程序分享的时候进行携带。

查阅开发文档webview看到bindmessage属性，网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组

H5网页需要引入JSSDK 1.3.2提供的接口wx.miniProgram.postMessage向小程序传输参数
webview通过bindmessage定义的方法接收h5传输的数据，需要注意的时，每次发送数据后数据都会添加到e.detail.data中的数组，并不会清除掉上一次传递的数据，所以我们取数组的最后一位元素。

由此，h5页面引入JSSDK 1.3.2，使用wx.miniProgram.postMessage发送参数，小程序页面使用webview的bindmessage属性接收参数即可完成动态参数的传递。

• 被分享用户打开分享链接进入跳当前页还是新建一个页面？

建议新开一个页面。

• 特殊字符的编码问题

当url作为参数传递，地址中出现”#”号时，”#”及其后面的字符串都会被忽略，不会被发送到服务器。因为浏览器将一个url视为一个html页面，而”#str”表示该页面的id为str的块

可使用encodeURIComponent和decodeURIComponent编码解码。会将这些特殊字符转义。

 

h5内代码实现

//先引入微信JS-SDK 1.3.2
wx.miniProgram.postMessage({ data: {url:\'http://www.xxx.com\',title:\'xxx\'} })

首页wxml代码实现

<!--home.wxml-->
<web-view src="{{url}}" bindmessage="getmessage"></web-view>

首页js代码实现

  
// home.js
// 接收web-view传来的数据
  getmessage(e) {
    let obj = e.detail.data[e.detail.data.length - 1];
    this.setData({
      message:obj
    })
  },
　// 配置分享
  onShareAppMessage: function () {
    let that = this;
    return {
      title: that.data.message.title,
      path: \'/pages/share/share?url=\' + encodeURIComponent(that.data.message.url),
      imageUrl: that.data.imageUrl
    }
  },

分享页js代码实现

  //share.js
　onLoad: function (options) {
    this.setData({
      url:decodeURIComponent(options.url)
    })
  },

分享页wxml代码实现

<!--share.wxml-->
<web-view src="{{url}}"></web-view>