微信小程序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: ``,
        }
      })
    },
  },
}


相关文章
|
6月前
|
小程序 搜索推荐 JavaScript
引入小程序平台对app有啥好处
引入小程序平台对app有啥好处
516 155
|
6月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1108 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
880 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1022 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
6月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
325 0
|
7月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
9月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
540 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
6月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
556 4
|
10月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
10月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。

热门文章

最新文章

下一篇
开通oss服务