微信小程序web-view内嵌公众号网页分享功能实现
需求:有一个做好的微信公众号项目(vue框架搭建的),还要做一个小程序版的,为了减少开发工作,全部使用web-view嵌入网页。 但要能分享,有二种分享情况 1、小程序分享出当前打开的页面 2、部分页面要求,分享指定页面,而不是当前的页面以下是代码部分一、web-view内嵌公众号网页中添加代码1.引入js&l...
·
需求:有一个做好的微信公众号项目(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) {
}
}
},
})
更多推荐
已为社区贡献2条内容
所有评论(0)