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
  }
}

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

项目备份：NAS\CuzStudio\web-view.zip