微信小程序> 微信小程序webview内嵌公众号网页分享功能实现

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

浏览量:688 时间: 来源:xjy_phper

需求:有一个做好的微信公众号项目(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) {      }    }  },})

 

 

微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎