小程序之web-view中的页面分享

这篇具有很好参考价值的文章主要介绍了小程序之web-view中的页面分享。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

遇到的问题

由于整个小程序都是用web-view嵌入的,这个时候,如果单纯的进行页面分享,只会导致不管在web-view的哪个页面进行分享,都会在点击后进入首页。

解决思路

首先是开启小程序的页面分享功能

wx.showShareMenu({
  withShareTicket: true, // 该参数在做分享到群内的统计的时候可以用到,单独分享给某个人是undefined,在小程序的load或者show的回调中可以拿到这个值
})

然后在onShareAppMessage中包装一下分享的信息,该回调是在点击右上角的分享之后,但是信息还没有发出去之前进行的一次回调,传入了一个包含from,dataset以及webViewUrl三个参数的对象。它的返回值就是对应的分享信息,这个时候我们拿到了对应的webview里面的url之后就可以做一些自己需要的操作了。

  onShareAppMessage(options) {
    console.log(options);
    const { webViewUrl } = options;
    const i = webViewUrl.indexOf('?');
    let search = '',
      url = webViewUrl;
    if(i !== -1) {
      url = webViewUrl.slice(0, i);
      search = `${webViewUrl.slice(i + 1)}`;
    }
    const shareObj = {
      title: "分享的标题",        // 默认是小程序的名称(可以写slogan等)
      path: `/pages/index?url=${url}${search ? '&' : ''}${search}`,        // 默认是当前页面,必须是以‘/’开头的完整路径,通过拼接的方式,把需要分享的web-view的url以及参数拼接进去,然后在该`web-view`的页面中去做参数判断,一旦传入了对应的url和参数,就进入对应的url并携带对应的参数
      // imageUrl: '',     //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败,其中 detail message 为详细失败信息
        }
      },
      complete: function () {
        // 转发结束之后的回调(转发成不成功都会执行)
      }
    }
    // 来自页面内的按钮的转发
    if (options.from == 'button') {
      var data= options.target.dataset;
      console.log(data.name);     // shareBtn
      // 此处可以修改 shareObj 中的内容
      // shareObj.path = '/pages/index' + data.name;
    }
    // 返回shareObj
    return shareObj;
  }

还存在的问题

这样分享之后,进入之后确实能够进入到对应的url中,但是会出现无法回退到小程序首页的问题。由于整个小程序只有一个web-view,导致了所有页面的切换都是在一个原生页面下进行的,所以如果需要进行回退,最好是新增一个web-view的页面,用到专门处理分享的链接。文章来源地址https://www.toymoban.com/news/detail-762367.html

到了这里,关于小程序之web-view中的页面分享的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序在web-view嵌入的uniapp H5页面中预览word文件

    在小程序中预览文件可以使用uni.uploadFile下载后再uni.openDocument打开预览,但uni.openDocument API是不支持H5的,这时候可能会想到使用微软在线预览,但是实际出来的效果会存在各种兼容性问题。因此我们需要在h5页面中跳回小程序然后走小程序的预览文件逻辑。

    2024年02月11日
    浏览(63)
  • 微信小程序 - 完美解决 web-view 公众号文章或第三方网站分享转发后,打开提示 “无法打开该页面,不支持打开” 或 “页面不存在”(IOS 苹果系统打开是空白页,安卓系统会有提示)超详细排查

    由于出现这种问题的原因有很多种,绝对不像其他文章教程那样无效,本文提供了超级详细的排查思路与解决方案。 本文从 [初步排查] 到 [代码排查],完美解决 因各种原因导致 webview 页面分享后,用户打不开提示错误 这类问题, 您只需要按照排查步骤一步一步的走,从检

    2024年02月02日
    浏览(79)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

     微信小程序appId查看方法: 1)有后台登录权限的情况下:登录微信公众平台后, 微信公众平台 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/ 点击右上角logo,在“帐号信息”中找到AppID(小程序ID) 2)没有后台登录权

    2024年02月11日
    浏览(76)
  • 实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)

    微信小程序的开发框架是uniapp,使用uniapp脚手架搭建,其中有页面是展示另一个小程序,在这个页面主体内容使用了标签将H5的页面内容展示,H5中有页面存放了下载的路径。点击下载按钮下载文件,或者预览文件让用户手动保存。 如果是pc端,下载用一个 a 标签就很容易,但

    2024年02月10日
    浏览(134)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?

    1)找到企业ID,登录 企业微信 企业微信 https://work.weixin.qq.com/wework_admin/loginpage_wx  2)找到接入链接  功能-客服-微信客服 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/

    2024年02月11日
    浏览(63)
  • 小程序内嵌web-view,web-view与微信小程序通信传值

    小程序内部嵌套web-view,所有业务逻辑都在h5页面中处理;现在需要通过 转发分享好友 来实现绑定邀请人这个功能。 需要在小程序触发分享操作,来获取网页向小程序端传递的数据。 网页端 安装微信sdk包 引入 使用 小程序端 通过更改当前web-view的URL来实现。

    2024年01月15日
    浏览(64)
  • 微信小程序web-view跳转

    h5项目中跳转外部连接可使用的web-view标签解决 官网连接:web-view | 微信开放文档 1.添加事件 2.新页面中的跳转链接(一行即可,默认会会自动铺满整个小程序页面) src就是路径,写需要跳转的网页地址即可! 3.配置路由,app.jason中 4.小程序后台配置域名 开发管理=开发设置=业务域名中

    2024年02月11日
    浏览(65)
  • 微信小程序如何使用web-view

           有时我们的业务需求是小程序内部跳转到其他h5项目的页面,这是我们就会用到web-view标签,这个标签可以帮助我们完成h5页面的渲染。下面,就是使用方法: 第一步: 首先现在小程序建一个新的page用来使用web-view  在wxml文件中写入web-view标签,src属性为你要跳转h5线

    2024年02月14日
    浏览(51)
  • 微信小程序组件、web-view、h5之间交互

    目录结构 小程序 /pages/index/index.wxml /pages/index/index.js /pages/index/index.json 组件 /component/index-page/index.wxml /component/index-page/index.js /component/index-page/index.json web-view /pages/web/web.wxml /pages/web/web.js h5

    2023年04月16日
    浏览(71)
  • 微信小程序实现支付宝支付——web-view实现

    由于使用到的微信小程序需要实现支付功能,而微信支付的申请手续较为繁琐,所以使用了支付宝支付,但是微信小程序正常情况不支持支付宝支付,所以我使用了web-view内嵌了支付宝的h5支付。 不会使用支付宝沙箱支付的同学可以看这篇文章Springboot支付宝沙箱支付 代码如下

    2024年02月11日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包