微信小程序webview内页面分享

2020-08-29 本文已影响0人坐在天台吹吹风

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

web-view
web-view是承载网页的容器，会自动铺满整个小程序页面。目前个人类型小程序不支持使用。
src属性里放置webview要打开的网页链接，需要注意的是在管理后台配置要访问网页的域名，否则生产模式无法进行访问。开发版和体验版可以通过点击小程序右上角三个点打开调试来进行访问。
小程序页面转发分享
微信小程序自身定义了一个转发的相关事件onShareAppMessage，这个事件在设置之后可以通过点击小程序右上角的三个点来触发，也可以通过为小程序页面添加button标签，设置button的属性open-type=”share”来触发。
webview内部页面无法直接调起小程序的转发
小程序分享代码实现

onShareAppMessage: function () {
  let imageUrl = this.data.imageUrl;
  return {
    title: "坐在天台吹吹风",  // 分享页面标题描述
    path:  '/pages/share/share',  // 分享页面路径，必须是以 / 开头的完整路径，不填写，用户点击分享链接进入时默认打开为小程序首页。
    imageUrl: imageUrl,  // 分享链接图片，如果不设置，默认显示该页面的从顶部开始的部分截图
         success: function(res) {
           // 成功回调
         },
         fail: function(res) {
            // 失败回调
         }
  }
}

图中的imgUrl错了，应该是imageUrl.png

这个需求实现的特殊之处在于要分享的页面为webview中的页面，而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属性接收参数即可完成动态参数的传递。

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

采用webview放h5页面，所以无论对用户所见的哪一个页面进行分享，实际分享的都是小程序的这一个页面，小程序也只有这一个页面。那么用户打开分享链接进入的时候进入当前这一个页面还是新建一个小程序页面呢

通常情况下，建议新开一个页面，因为无法确定用户分享的页面是哪个页面以及这些页面是否可以互相跳转，如果页面之间可以完全相互跳转，则可以在当前页打开，如果不能，建议最好新建一个页面用来放分享的页面。

特殊字符的编码问题

编码	解码	区别
encodeURI	decodeURI	该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。同样对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#
encodeURIComponent	decodeURIComponent	该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
escape	unescape	该方法会对ASCII中字母、数字及符号@-_+./之外的所有字符进行编码。但对于汉字的编码和其他两种方法的编码结果并不一样

不推荐使用escape，推荐使用其他两个。

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

首页wxml代码实现

<web-view src="{{webUrl}}" bindmessage="getmessage"></web-view>

首页js代码实现

getmessage(e) {
    let obj = e.detail.data[e.detail.data.length - 1];
    this.setData({
      testUrl: obj.wareUrl,
      imageUrl: obj.imageUrl? obj.imageUrl: ""
    })
  },
  onShareAppMessage: function () {
    let that = this;
    return {
      title: "哈哈哈哈哈",
      path: '/pages/share/share?url=' + encodeURIComponent(that.data.testUrl),
      imageUrl: that.data.imageUrl
    }
  }

分享页js代码实现

onLoad: function (options) {
    let url = decodeURIComponent(options.url)
    this.setData({
      webUrl: url
    })
},

分享页wxml代码实现

<web-view src="{{webUrl}}"></web-view>

参考链接
web-view
JS中编码的三种方法
心得体会
多动手，有些时候其实我们可能已经想出来应该怎么做了，但是种种原因没有动手导致问题拖延时间很长。

微信小程序webview内页面分享

猜你喜欢

热点阅读