微信小程序中的h5页面支持分享到朋友圈的具体实现

微信小程序 同时被 2 个专栏收录
2 篇文章 0 订阅
2 篇文章 0 订阅

背景:

h5页面要想在小程序里展示,只能用<webview/>组件通过src去打开对应的网站地址;通过监听页面是否加载完成,来做是否隐藏loading状态的交互,大部分网站加载都会有一段空白时间的等待(下载网站资源)。

在页面加载完成后,右上角有个“...”,普通的页面可以在onShareAppMessage()onShareTimeline()两个方法中分别配置分享给好友/分享到朋友圈的功能。

  

左一截图的效果是 普通page+安卓手机,这两个按钮在安卓手机里默认是灰色(图中是因为配置了这两个功能才是enable绿色状态), ios的手机系统里没有分享到朋友圈的按钮。右一截图的效果是使用了webview的page+安卓手机 , 分享到朋友圈灰色不可用状态(今天要解决的问题)。

taro框架下,showShareMenu()不支持在微信小程序的配置;况且微信官方的tip告知“存在 web-view 组件的页面不支持发起分享”


我今天要谈的就是,在这些限制的情况下,如何将安卓系统内的h5 page的内容转发到朋友圈,使用微信自带的分享朋友圈交互,做推广和引流,实现场景的闭环。

有一种业界常用的手段是:在点击分享的时候,生成一张带有小程序码的图片,用户自行保存图片到本地,然后分享到朋友圈;朋友圈好友长按图片识别图中二维码,进入小程序后解析小程序码携带的信息,生成相应的页面。这样就实现了分享到朋友圈这样一个流程。

我个人觉得这个交互场景实在是太复杂;我的方案是,还是要使用小程序自带的分享页面到朋友圈的交互,只不过这个操作是要首先回退到一个普通的page中,然后携带网页的参数,引导用户在此页面内操作。

核心思想是:引入一个新的小程序页面/thirdPage(我认为它是一个跳板),在这个页面内,做两步骤操作,完成闭环:

  1. 引导用户把这个页面分享到朋友圈(当然,分享的内容实质上是h5页面)
  2. 对接从朋友圈打开重回小程序要直接展示h5的需求(这里就是一个场景值判读 + navigateTo路由跳转操作)

所以,你的程序设计应该是这个样子的(红色框是涉及到用户交互的操作)。

1.分享到朋友圈;2.从朋友圈点击,查看分享的h5:

    

 

涉及到的技术点:

      如果是react或者vue框架写的h5页面,组件内部会获取不到wx这个上下文;这个太好办了。在.html页面的<script/>标签里,把可以获取到的wx对象挂载在window对象下,这样在react或者vue组件内部就可以通过window._wx.miniProgram.navigateTo()来跳转了。

public/index.html


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Powering the future with data narratives!" />
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/app_logo.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>xxx</title>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->

</body>
<script>
console.log("wx",wx)//可以获取到wx
window._wx=wx  //挂载的全局变量
</script>
</html>
  • h5 page路由动态传参,来加载页面的内容。
  • thirdPage要兼容从朋友圈进入和h5页面左滑或者再次点击分享按钮进入的两个逻辑。
  • ios手机是另外一套分享交互:在h5页面点击分享的时候,弹窗显示link,支持一键copy h5的链接,这样让用户可以手动的黏贴网址到朋友圈,完成朋友圈分享。

 

这整个技术方案实现过程没有什么难点,交互流程还蛮流畅的。可以作为一种思路,供大家参考!

 

 

 

  • 3
    点赞
  • 3
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值