微信小程序内嵌web-view, web-view与小程序通信传值

业务场景

小程序内部嵌套web-view,所有业务逻辑都在h5页面中处理;现在需要通过转发分享好友来实现绑定邀请人这个功能。

使用

webview向小程序传数据

需要在小程序触发分享操作,来获取网页向小程序端传递的数据。

网页端

  1. 安装微信sdk包
js 复制代码
 pnpm add weixin-js-sdk
  1. 引入
js 复制代码
import wx from "weixin-js-sdk";
  1. 使用
js 复制代码
wx.miniProgram.postMessage({ data: { inviteId } });

小程序端

wxml 复制代码
<web-view src="{{webUrl}}" bindmessage="getMessage"/>
js 复制代码
//接收网页数据
 getMessage: function (res) {
    let inviteId = res.detail.data;
    this.setData({ inviteId });
  },
 //邀请好友
 onShareAppMessage: function () {
    return {
      title: "分享Title",
      path: `/pages/index/index?inviteId=${this.data.inviteId}`,
      imageUrl: "",
    };
 }

小程序向webview传数据

通过更改当前web-view的URL来实现。

js 复制代码
this.setData({
  webUrl: `https://×××××××××?inviteId=${inviteId}`
})
相关推荐
前端一课1 分钟前
【前端每天一题】🔥 第 18 题:防抖和节流是什么?区别是什么?如何实现?
前端·面试
前端一课2 分钟前
【前端每天一题】第 16 题:数组去重高频方法(Set / filter / reduce / 对象键值法)
前端·面试
前端一课4 分钟前
【前端每天一题】🔥 第 17 题:什么是浅拷贝与深拷贝?如何实现深拷贝?
前端·面试
前端一课5 分钟前
【前端每天一题】🔥 第 20 题:从输入 URL 到页面渲染全过程
前端·面试
前端一课8 分钟前
【前端每天一题】🔥 第 12 题:== 与 === 的区别?为什么 [] == ![] 是 true?
前端·面试
前端一课9 分钟前
【前端每天一题】🔥 第 13 题:原型链查找规则是什么?为什么对象能访问到方法?
前端·面试
前端一课10 分钟前
【前端每天一题】🔥 第 11 题:this 的指向规则(前端高频必考题)
前端·面试
一 乐13 分钟前
餐厅管理智能点餐系统|基于java+ Springboot的餐厅管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端
北极糊的狐13 分钟前
父组件向子组件传参时,传递数组和对象类型的参数的方法
前端·javascript·vue.js
前端一课18 分钟前
【前端每天一题】🔥 第 9 题:防抖(debounce)与节流(throttle)的区别?如何实现?
前端·面试