微信小程序内嵌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}`
})
相关推荐
西哥写代码12 分钟前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
清风细雨_林木木16 分钟前
Vue 中生成源码映射文件,配置 map
前端·javascript·vue.js
FungLeo37 分钟前
node 后端和浏览器前端,有关 RSA 非对称加密的完整实践, 前后端匹配的代码演示
前端·非对称加密·rsa 加密·node 后端
不灭锦鲤1 小时前
xss-labs靶场第11-14关基础详解
前端·xss
不是吧这都有重名1 小时前
利用systemd启动部署在服务器上的web应用
运维·服务器·前端
霸王蟹1 小时前
React中巧妙使用异步组件Suspense优化页面性能。
前端·笔记·学习·react.js·前端框架
Maỿbe1 小时前
利用html制作简历网页和求职信息网页
前端·html
森叶2 小时前
Electron 主进程中使用Worker来创建不同间隔的定时器实现过程
前端·javascript·electron
霸王蟹2 小时前
React 19 中的useRef得到了进一步加强。
前端·javascript·笔记·学习·react.js·ts
霸王蟹2 小时前
React 19版本refs也支持清理函数了。
前端·javascript·笔记·react.js·前端框架·ts