微信小程序内嵌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}`
})
相关推荐
文心快码BaiduComate3 分钟前
里程碑突破 | 文心快码中标国家开发银行代码研发助手项目
前端·后端·架构
霍理迪12 分钟前
axios的封装
前端
夜焱辰13 分钟前
CreatorWeave:一个本地优先的浏览器 AI 创作工作空间
前端·agent
wscqs15 分钟前
Superpowers 与 everything-claude-code 与 ui-ux-pro-max-skill 这些怎么合并起来一起用
前端
大转转FE18 分钟前
转转前端周刊第192期: 财务数仓 Claude AI Coding 应用实战
前端·人工智能
weixin_471383031 小时前
React Flow + Zustand 搭建工作流编排工作台
前端·react.js·前端框架
kilito_011 小时前
react疑难讲解
前端·react.js·前端框架
字节跳动的猫1 小时前
2026 四款 AI:开发场景适配全面解析
前端·人工智能·开源
gyx_这个杀手不太冷静1 小时前
大人工智能时代下前端界面全新开发模式的思考(四)
前端·架构·ai编程
李剑一2 小时前
我做了个微信聊天模拟器,已开源
前端