微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径

简介: 微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径

第一步:uni-app H5页面触发传参→微信小程序

onLoad(d) {
  this.postMessage();
},
methods: {
  postMessage() {
    wx.miniProgram.postMessage({
      data: {
        title: "微信小程序转发分享自定义的标题",//这个是要传给微信小程序的标题
        path: `?a=1&b=2&c=3`,//这个是要传给微信小程序的参数
      }
    })
  },
}

第二步:微信小程序代码,分享页面传参→H5页面

index.wxml

<web-view src="{{src}}" bindmessage="bindmessage" />

index.js

Page({
    data: {
        src: "https://www.shuzhiqiang.com/#/",//注意后面有"/#/"
        shareData: {},
    },
    onLoad(d) {
        if (d && Object.keys(d).length) {
            let p = Object.keys(d).reduce((p, k, i) => p + `${i === 0 ? '?' : '&'}${k}=${d[k]}`, '');
            this.setData({ src: this.data.src + p });// 通过web-view的src路径传参,从微信小程序传参给H5
        }
    },
    // 当点击小程序右上角胶囊“…”的时候接收H5传过来的值
    bindmessage(d) {
        if (d && d.detail && d.detail.data) {
            //console.log('H5传过来的最新信息', JSON.stringify(d.detail.data.slice(-1)[0], null, 2));
            this.setData({ shareData: d.detail.data.slice(-1)[0] });//因为bindmessage推送过来的数据是push的形式,所以最新的数据是在最后
        }
    },   
    // 注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
    onShareAppMessage() {
        return {
            // 用Promise延时一下,避免bindmessage还未执行完毕,就唤起转发
            promise: new Promise(resolve => {
                setTimeout(() => {
                    resolve({
                        title: this.data.shareData.title,
                        path: `/pages/index/index${this.data.shareData.path}`,//这个path是来自H5页面的传参路径
                    })
                }, 100)
            })
        }
    }
});
wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']// shareAppMessage表示“发送给朋友”按钮,shareTimeline表示“分享到朋友圈”按钮 
})

第三步:打开分享的微信小程序卡片,uni-app H5页面获取参数

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

import wx from "weixin-js-sdk"; //npm install --save weixin-js-sdk 
export default {    
  onLaunch() {
    // 监听各种跳转
    ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab', 'navigateBack', ].forEach(v => {
      uni.addInterceptor(v, {
        success: e => this.watchRouter(e),
      })
    });
    this.watchRouter();
  },
  onShow(d) {
    d = d.query;
    if (d && Object.keys(d).length) {
      let path = d.path;
      delete d.path;
      let p = Object.keys(d).reduce((p, k, i) => p + `${i === 0 ? '?' : '&'}${k}=${d[k]}`, '');
      let url = `${path}${p}`;
      // console.log('跳转路径&参数', url)
      uni.navigateTo({url});
    }
  },
  onHide() {},
  methods: {
    watchRouter(d) {
      wx.miniProgram.postMessage({
        data: {
          title: `自定义标题!`,
          path: ``,
        }
      })
    },
  },
}


相关文章
|
3天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
22 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
6月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
5月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
4月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1689 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
4月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
118 2
|
5月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
6月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
115 3
|
5月前
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
292 3
|
5月前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
647 5
|
6月前
|
数据处理 开发者 UED
FastAPI 的模板引擎简直太神奇啦!这就是构建动态 Web 页面的终极秘籍,快来一探究竟!
【8月更文挑战第31天】FastAPI 是一款高性能异步 Web 框架,可通过集成模板引擎(如 Jinja2 或 Mako)实现动态页面渲染。使用模板引擎可分离页面结构与数据,简化代码并提升可维护性。此外,它还提供丰富的语法支持,如循环和条件判断,从而增强页面展示效果及开发效率。通过简单的配置步骤,即可在 FastAPI 中启用模板引擎,显著改善用户体验。
565 1

热门文章

最新文章