微信小程序web-view内嵌公众号网页分享功能实现

需求：有一个做好的微信公众号项目（vue框架搭建的），还要做一个小程序版的，为了减少开发工作，全部使用web-view嵌入网页。

但要能分享，有二种分享情况

1、小程序分享出当前打开的页面
2、部分页面要求，分享指定页面，而不是当前的页面

以下是代码部分

一、web-view内嵌公众号网页中添加代码

1.引入js

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

2.跳转到小程序中页面----在分享页面是指定页面，而不是分享当前页面的网页中加入

var isMiniprogram = false
// 判断是否是小程序打开
wx.miniProgram.getEnv((res) => {
     if (res.miniprogram) {//在小程序中
        isMiniprogram = true
     }
});
var url=要打开的网页链接url

// 是小程序打开，并且不是小程序已经重新加载过的网址--避免死循环
if (isMiniprogram && this.$route.query.platform != "miniprogram") {
    url = encodeURIComponent(url);  // 注意需要urlencode
    // 跳转到小程序页面，并在小程序中打开url页
    // 注意要使用wx.miniProgram.redirectTo，其它方法试了不行
    wx.miniProgram.redirectTo({url: '/pages/index/index?return_url='+url+'&share_url=要分享的链接(当要分享的页面不是要打开的页面时使用)&share_title=要分享标题' })
} 
// 非小程序打开正常跳转
else {
    window.location.href=url;
}

二、小程序中代码处理

1、index.wxml中代码

src后加#wechat_redirect，是为了解决：在iOS中JSSDK接口调用无响应的情况

<!--index.wxml -->
<view class="container">
  <web-view src="{{web_src}}#wechat_redirect" />
</view>

2、index.js中代码

//获取应用实例
const app = getApp()

Page({
  data: {
    web_src:'', // 嵌入的网址
    sharetitle:'', // 指定分享的标题
    share_src:'',  // 指定分享的网址
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function (options) {
    // 指定分享页面，即分享页，非当前页时
    if (options.return_url) {
      var web_url = decodeURIComponent(options.return_url);
      // 网址中加参数标记是小程序重新载入的
      web_url += web_url.indexOf('?') == -1 ? '?' : '&';
      web_url += 'platform=miniprogram';

      var share_url = decodeURIComponent(options.share_url);
    } else {
      var web_url = '网站首页'
      var share_url = web_url;
    }
    
    this.setData({
      web_src: web_url,
      share_src: share_url,
      sharetitle: options.sharetitle ? options.sharetitle : '',
    }, function () {

    });
  },
  // 分享
  onShareAppMessage(options) {
    var that = this
    var share_src = that.data.share_src
    // 分享标题-有指定分享标题时就使用指定的，没有使用默认的
    var title = that.data.sharetitle ? that.data.sharetitle : that.data.title;

    // 当嵌入网址是重新载入时，更新分享链接为当前网址
    if (options.webViewUrl.indexOf('miniprogram') == -1) {
      share_src = options.webViewUrl
      title = that.data.title;
    }
    var path = '/pages/share/share?return_url=' + encodeURIComponent(share_src);

    return {
      title: title,
      path: path,
      success: function (res) {
      }
    }
  },
})

微信小程序web-view内嵌公众号网页分享功能实现

猜你喜欢