uni-app 微信小程序页面中使用webview打开h5页面设置onShareTimeline不起作用

uni-app 微信小程序页面中使用webview打开h5页面设置onShareTimeline不起作用

示例代码：

<template>  
    <view class="content">  
        <web-view src="https://www.baidu.com/"</web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        // 自定义页面的分享到朋友圈  
        onShareTimeline(res) {  
            return {  
                title: "啦啦啦啦"  
            };  
        },  
        methods: {  

        }  
    }  
</script>

操作步骤：

  • 新建项目，默认模版，将代码示例粘贴至首页

预期结果：

  • 可以分享到朋友圈

实际结果：

  • 不能分享到朋友圈

bug描述：

uniapp 微信小程序，页面中使用webview打开h5页面，设置onShareTimeline不起作用


更多关于uni-app 微信小程序页面中使用webview打开h5页面设置onShareTimeline不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

暂不支持，参考文档

更多关于uni-app 微信小程序页面中使用webview打开h5页面设置onShareTimeline不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的

这是由于微信小程序中web-view组件的限制导致的。在微信小程序中，web-view组件会接管页面的分享功能，导致页面级的onShareTimeline失效。

解决方案有以下几种：

  1. 如果H5页面是你自己开发的，可以在H5页面中通过微信JS-SDK实现分享功能：
wx.ready(function() {
  wx.onMenuShareTimeline({
    title: '自定义标题',
    link: '分享链接',
    imgUrl: '分享图标'
  });
});
  1. 如果不方便修改H5页面，可以在web-view外层包裹一个容器，通过条件渲染控制web-view的显示，在分享时临时隐藏web-view：
<template>
  <view>
    <web-view v-if="showWebview" :src="url"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showWebview: true
    }
  },
  onShareTimeline() {
    this.showWebview = false
    setTimeout(() => {
      this.showWebview = true
    }, 100)
    return {
      title: '分享标题'
    }
  }
}
</script>
回到顶部