微信小程序内嵌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}`
})
相关推荐
晚霞的不甘15 分钟前
HarmonyOS ArkTS 进阶实战:深入理解边距、边框与嵌套布局
前端·计算机视觉·华为·智能手机·harmonyos
_野猪佩奇_牛马版15 分钟前
ReACT Agent 开发知识点总结
前端
牛奶27 分钟前
你发送的消息,微信到底怎么送到的?
前端·websocket·http
酉鬼女又兒32 分钟前
零基础快速入门前端DOM 元素获取方法详解:从代码到实践(可用于备赛蓝桥杯Web应用开发)
前端·javascript·职场和发展·蓝桥杯·js
牛奶32 分钟前
为什么关掉浏览器再打开,你还是登录状态?
前端·网络协议·https
bjxiaxueliang33 分钟前
一文掌握Python aiohttp:异步Web开发从入门到部署
开发语言·前端·python
Liudef0643 分钟前
从0到1开发ReAct智能体:原理、实现与最佳实践
前端·react.js·前端框架
金豆呀1 小时前
WPS自定义公式,相似度匹配
前端·javascript·wps
jiayong231 小时前
0基础学习VUE3 第 1 课:项目启动流程
前端·vue.js·学习
今天又在摸鱼1 小时前
学习vue前必要的js语法
前端·vue.js·学习