微信小程序内嵌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}`
})
相关推荐
liangshanbo12156 小时前
面试题:Webpack 的 publicPath 有什么作用?
前端·webpack·node.js
mjhcsp6 小时前
DeepSeek V4.1 Flash 批量处理效能实测
java·前端·数据库
CHEEVEN_QY7 小时前
新能源汽车电池托盘FSW量产的工艺稳定性控制
java·前端·汽车
Alice-YUE7 小时前
前端 × AI:从 Cursor 到 Transformer,一份完整认知路径
前端·人工智能·transformer·ai编程·前端开发·cursor
Code_Solitude7 小时前
C语言:关于二维数组的作业总结
java·c语言·前端
acd120098 小时前
前端随笔:数据明明变了,Vue 页面就是不更新
前端·javascript·vue.js
传人9 小时前
悬停旋转放大和位移效果如何写
前端·javascript·css
zhangzeyuaaa10 小时前
Ruby 方法参数完全指南:默认值、可变参数与关键字参数
前端·python·ruby
粥里有勺糖10 小时前
视野修炼-技术周刊第135期 | 鼠标跟随宠物
前端·github·aigc
粥里有勺糖10 小时前
拿 Codex 协助清理磁盘,Nice!
前端·后端·github