小程序内嵌H5,调起微信分享

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

该功能时作为H5调起小程序的微信分享

1:小程序方 在webview页面,打开分享的权限


  wx.showShareMenu({
          withShareTicket:true,
           menu:['shareTimeline','shareAppMessage']
      })

2:在小程序内写 onShareAppMessage方法,用来获取在哪个页面调起的微信分享,


    onShareAppMessage: function(res) {
                console.log(res)
                let nowURL = decodeURIComponent(res.webViewUrl)
                let id = nowURL.split('?')[1].split('&')[0].split('=')[1]
                let name = decodeURIComponent(nowURL.split('?')[1].split('&')[1].split('=')[1])
                let data = {
                    id: id,
                    name: name,
            
                }
                let payData = JSON.stringify(data)
                let url = `/pages/music/music?data=${payData}`
                return {
                    title: name,
                    path: url,

                }

            },

3:在2中的这处代码,是用来劫持分享,并自定义分享的,


 let payData = JSON.stringify(data)
                let url = `/pages/music/music?data=${payData}`
                return {
                    title: name,
                    path: url,

                }

4:转发出去后,通过用户的点击再次回来时,在webview页面获取是否有参


        onLoad: function(e) {
            console.log(e)
            if (e.data) {
                console.log(e)ghu 
                let i = JSON.parse(e.data)
                console.log(i)
                this.url = 'http://192.****8080/?hrsaasUserId=95623&id='+i.id+'&name='+ i.name
                console.log(this.url)

            } else {
                this.url = 'http://192.****:8080/?hrsaasUserId=95623'
            }

如果有参,就是通过分享页面进来的,跳入webview页面

如果无参,就认为是从首页点进来的 不做处理

5:在H5的onload处 获取参数,逻辑同4, 有参就跳入你想进的页面文章来源地址https://www.toymoban.com/news/detail-718813.html


if(e.data){
uni.navigateTo({
url:'/pages/consulting/scaleDetail?id='+this.scaleId+'&name='+encodeURIComponent(this.scaleName)+'&questionType=0&isPay=0',
})

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

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

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

相关文章

  • H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信

    h5分享到微信,h5使用微信支付这些功能,都需要先判断是否安装微信客户端,如果已安装就启动微信,如果没有安装微信,就提示用户前去安装。 我们可以通过访问微信提供的URL协议(weixin://)来实现这个功能,代码如下: 示例代码: 扩展: 同样,通过上边的方法,也可

    2024年02月06日
    浏览(54)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径

    index.wxml  index.js 在H5项目的App.vue页面获取参数实现自动跳转到对应页面,包括携带的参数值

    2024年02月12日
    浏览(65)
  • 微信小程序内嵌H5页面实现微信支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月11日
    浏览(54)
  • 微信小程序与内嵌h5页面之间的参数传递

    小程序是采用vue+taroui技术栈 h5页面 所在文件:h5.vue 小程序页面:wx.vue,这里我用的是taro获取当前页面栈,大家可以用wx 这里的this.routerParams==={params:1} 小程序页面:wx.vue,首先向内嵌h5的webview所在页面跳转并携带所传参数。 webview页面—/pages/processLink/index。index.vue,由该页面

    2024年02月15日
    浏览(75)
  • 微信小程序内嵌h5页面,实现动态设置顶部标题的功能

    一、需求描述 使用HBuilder X作为开发工具,vue作为开发语言,开发微信小程序。微信小程序页面内嵌h5页面,即web-view/web-view标签。通过设置不同url连接地址,设置不同的标题。 二、失败做法 页面A嵌入h5页面,需要给A设置标题。最开始写法是在lonload页面内,使用如下语句实现

    2024年02月04日
    浏览(65)
  • uniapp实现微信小程序内嵌h5页面的相互跳转

    前期准备3个页面,小程序内2个,h5一个。 小程序内:操作页pageA,展示容纳h5的展示页PageWebview.vue。 h5:h5页面pageB,并且有可以访问的线上url。 【微信小程序pageA-内嵌h5页面pageB】 1.1 pageA实现点击跳转,将pageB的访问地址url拼接,并进入展示页PageWebview.vue 1.2 PageWebview.vue页面用

    2024年02月12日
    浏览(61)
  • 微信小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题

    背景 最近接到一个h5需求,和普通的h5不一样,这个h5页面是嵌入到小程序中使用的,需求简单来说就是展示一个跳转按钮,判断如果是小程序环境下就进行跳转到其他小程序页面。 实现思路 核心逻辑其实就是判断小程序环境这一块,我们可以直接使用wxsdk来进行判断小程序

    2024年02月09日
    浏览(74)
  • 微信小程序webview内嵌H5跳转页面后没有返回按钮完美解决方案

    简单的讲就是我们可以在小程序内放置一个web-view组件来链接我们的HTML页面了。 但是点击跳转页面的时候。页面左上角没有!!返回按钮!!导致回不去了,这不是搞笑的吗。 看了下其他的小程序,发现如果是两个小程序页面跳转的话,第二个页面的左上角是会有返回按钮

    2024年02月08日
    浏览(64)
  • H5分享h5页面、小程序到微信

    先去微信公众平台填写js接口安全域名 本来想用微信开发js-sdk的,但是做了半天好像没啥效果 概述 | 微信开放文档 (qq.com) 引入js文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js  代码部分: 单独的h5是唤不起微信的,需要原生app去集成微信的sdk,app去调微信的方法,h5再去调app的方

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

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

    2024年02月11日
    浏览(73)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包