小程序内嵌网页跳转分享实现

最新推荐文章于 2024-06-28 20:31:33 发布

weixin_34265814

最新推荐文章于 2024-06-28 20:31:33 发布

阅读量653

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/872585/blog/1807043

版权

本文介绍如何在微信小程序中实现内嵌网页的分享功能，包括onShareAppMessage的使用方法及通过URL参数记录分享路径的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

对于分享功能，做过小程序开发的都不会陌生，在需要被分享的页面js中加入onShareAppMessage这样一个事件即可。

在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。

只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮

用户点击转发按钮的时候会调用

此事件需要 return 一个 Object，用于自定义转发内容

示例代码如下：

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      success: function(res) {
        // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }
})

当存在web-view时，onShareAppMessage回调函数参数res中还会多一个webViewUrl，可以获取当前页面的URL地址。

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})

需要实现内嵌网页内多次跳转分享的功能，这就需要自己想办法了。在小程序分享中又不能保持状态，这个得去记录分享时网页的路径。其实有点开发经验的都能想到这个办法，那就是使用？在url后记录下来，这样在其它用户打开转发小程序的时候，取出其中的参数，将web-view中的src替换成这个就行了。话不多说，直接上代码。

Page({
    web_url:"",
    data: {
      title: '测试内嵌分享',
      url:'',
      web_src:''
    },
    onShareAppMessage(options) {
      var that = this
      var return_url = options.webViewUrl
      var path = '/page/test/test?return_url=' + encodeURIComponent(return_url)
      console.log(path, options)
      return {
        title: that.data.title,
        path: path,
        success: function (res) {
          that.web_url = return_url
          // 转发成功
          wx.showToast({
            title: "转发成功",
            icon: 'success',
            duration: 2000
          })
        },
        fail: function (res) {
          // 转发失败
        }
      }
    },
    onLoad: function () {
        var pages=getCurrentPages();
        var currentPage = pages[pages.length - 1]; 
        var web_src = decodeURIComponent(currentPage.options.return_url ||
        encodeURIComponent("你的内嵌网页网址"))
        this.web_url = web_src
        this.setData({
          web_src: web_src
        }, function () {

        });

    }
})

写到这里，终于大功告成了。

转载于:https://my.oschina.net/u/872585/blog/1807043