微信小程序开发-webview页面的分享处理

[diamont1001]

微信小程序有个 web-view 组件，有了它，微信就相当于变成了个浏览器了，让小程序有了无限的可能，简直就是前端同学的福音。

当然，它也有一定的限制，比如：

• 只能打开 HTTPS 链接的页面
• 只能打开已认证的「业务域名」下的链接

有了它，可以让网站的小程序化变的非常简单，只要把 HTTPS 支持上即可，一行代码实现一个小程序，这都不是梦 ^_^

<!-- wxml -->
<web-view src="https://www.xxx.com/"></web-view>

分享功能实现

小程序的最大优势也在于它的流量上面，而流量的获取，就免不了分享功能。在 web-view 里分享出去的页面，怎么与首页形成回流关系，整体流程该怎么走，相信用过这个组件的同学都会遇到这个问题。

参考了网上的资料（微信小程序，实现内嵌网页的分享），折腾了一翻，终于把整个流程搞通了，具体实现思路这里给分享一下。

一、大概思路

一共两个原生页面，一个作为小程序入口，一个作为二级页面承载页：

1. 首页 pages/index：小程序入口（包含分享后的页面）
2. 二级页 pages/share：承载分享出去的具体详情页面
3. 分享实现：分享页面选用首页 pages/index，通过 ?shareUrl= 参数把分享 URL 带进来
4. 首页通过 shareUrl 参数获取分享 URL，调用 wx.navigateTo 调起二级页面 pages/share 来打开具体 URL

二、具体步骤（基于 wepy 框架介绍）

1. app.wpy 声明个变量，用于存放内嵌页地址

// app.wpy

globalData = {
  userInfo: null,
  ctxPath: 'https://www.demo.com'
}

2. 建立两个页面

• 首页：pages/index
• 分享页：pages/share

3. 首页路由处理 index.wpy

<template>
  <web-view src="{{web_src}}"></web-view>
</template>

<script>
  data = {
    web_src: ''
  }

  onLoad(options) {
    let self = this
    self.setData({
      web_src: self.$parent.globalData.ctxPath // 设置首页 web-view 链接
    })

    if (options.shareUrl) { // 如果有分享链接带进来，则调起二级页来打开
      wx.navigateTo({
        url: './share?shareUrl=' + options.shareUrl
      })
    }
  }
</script>

4. 二级页实现 share.wpy

<template>
  <web-view src="{{share_src}}"></web-view>
</template>

<script>
  onLoad(options) {
    let self = this
    self.setData({
      share_src: decodeURIComponent(options.shareUrl)
    })
  }
</script>

5. 分享逻辑

首页分享逻辑 index.wpy

onShareAppMessage(options) {
  let self = this
  let path = 'pages/index'

  if (self.$parent.globalData.ctxPath.indexOf(options.webViewUrl) !== 0) { // 不能直接用相等判断，有#参数会被截断的可能
    path += '?shareUrl=' + encodeURIComponent(options.webViewUrl) // 当时页不是首页，把当前页面链接以参数形式带到分享出去的链接里，记得 url encode 一下，不然会被截断
  }

  return {
    title: 'xxx',
    path: path
  }
}

分享页分享逻辑 index.wpy

onShareAppMessage(options) {
  let path = 'pages/index?shareUrl=' + encodeURIComponent(options.webViewUrl) // 记得这里分享路由是首页而不是当前页，首页作为小程序的惟一入口

  return {
    title: 'xxx',
    path: path
  }
}

按照以上的逻辑，可以实现一套完整的基于内嵌页的小程序分享链路，无论分享的是首页还是具体的详情页面，点击进来都先进来首页，然后根据需要再去导航到其他二级页面。

BUG & Tip

• 网页内iframe的域名也需要配置到域名白名单。
• 开发者工具上，可以在 <web-view/> 组件上通过右键 - 调试，打开 <web-view/> 组件的调试。
• 每个页面只能有一个 <web-view/>，<web-view/> 会自动铺满整个页面，并覆盖其他组件。
• <web-view/> 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
• 在 iOS 中，若存在 JSSDK 接口调用无响应的情况，可在 <web-view/> 的 src 后面加个 #wechat_redirect 解决。