微信小程序内嵌网页实现分享功能

需求:小程序打开之后跳转到要跳转的地址<web-view src="跳转的地址"></web-view> ,然后实现所跳转的地址中每个网页都可以分享出去,分享出去的网页打开不再是回到初始化页面,而是分享的页面!
微信提供分享API是一个叫做 onShareAppMessage(options) 的方法
然后管它什么三七二十一的直接ctrl+C 、ctrl+v把示例给拷贝过来,然后把path换成分享的地址!结果 很明显 预览时候提示找不到路径?!!

请注意文档中有一句很重要的话就是:path 必须是 / 开头的完整路径

所以就开始上网找资料,找到一个微信小程序,实现内嵌网页的分享的博客!!!
然后分析了一下总结出来一个思路:
①首先在add.js文件中定义一个全局变量,存放内嵌网页的地址

globalData:{
	userinfo: null,
	ctxPath: "https://xxx"
}

② 然后新建一个 名为sharepage的文件夹,然后里边也是有一个share.js文件、一个sharepage.json文件、一个sharepage.wxml文件、一个sharepage.wxss文件
③ 在index.js文件中

var ctxPath = app.globalData.ctxPath; //内嵌网页的路径
页面加载时,

 onLoad: function (options) {
    let that = this;
    that.setData({
      web_src: ctxPath
    })
  },

分享操作:

onShareAppMessage: function (options) {
    let that = this
    let return_url = options.webViewUrl
    var path = 'pages/sharepage/sharepage?shareUrl=' + encodeURIComponent(return_url)
    // console.log("indexindex", path, options)
    return {
      title: '自定义标题',
      path: path,
      success: function (res) {
        // 转发成功
        wx.showToast({
          title: "转发成功",
          icon: 'success',
          duration: 2000
        })
      },
      fail: function (res) {
        // 转发失败
      }
    }
  },

④ 然后再index.wxml文件中<web-view src="{{web_src}}"></web-view> 加载内嵌网页
⑤ 在sharepage.wxml中附上代码<web-view src="{{share_src}}"></web-view>
⑥ 在sharepage.js中,页面加载时

onLoad: function (options) {
    let that = this;
    that.setData({
      share_src: decodeURIComponent(options.shareUrl),
    })
  }, 
  

然后如果还想实现把分享出去的页面还可以分享
再在sharepage.js中附加一样的分享操作的代码!

这样就可以实现分享功能了。

不要忘了给sharepage配置路由!

本文参考:https://blog.csdn.net/sennyla/article/details/80022187

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序是一种轻量级的应用程序,可以直接在微信内部运行。与传统的H5页面不同,微信小程序具有更快的加载速度、更高的交互性、更多的功能和更好的用户体验。但是,有些时候,为了满足用户的需求,我们可能需要在微信小程序中嵌入H5页面。 在微信小程序中嵌入H5页面的过程分为两个步骤: 1. 生成微信小程序的web-view组件,这个组件可以承载H5页面。 2. 在H5页面中引入微信提供的JS-SDK,通过JS-SDK调用微信小程序的API,实现在小程序内嵌H5页面的效果。 下面是具体步骤: 1. 在微信小程序的wxml代码中,添加web-view组件,代码如下: &lt;web-view src="{{url}}"&gt;&lt;/web-view&gt; 其中,url是要嵌入的H5页面的URL地址。 2. 在H5页面中引入微信提供的JS-SDK,代码如下: &lt;script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"&gt;&lt;/script&gt; 3. 在H5页面中使用JS-SDK调用微信小程序的API,实现在小程序内嵌H5页面的效果,代码如下: &lt;script&gt; wx.miniProgram.navigateTo({ url: '/pages/webview/webview?url=' + encodeURIComponent(window.location.href) }); &lt;/script&gt; 以上代码实现功能是,在H5页面中调用微信小程序的API,跳转到小程序页面,并把当前页面的URL地址通过query参数传递给小程序页面。 需要注意的是,在使用微信小程序内嵌H5页面时,需要遵循微信小程序的一些规则,比如必须使用HTTPS协议、不能跳转到其他小程序等。同时,也要注意H5页面的适配性,确保在小程序中的显示效果与在浏览器中一致。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值