微信小程序内嵌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}`
})
相关推荐
runnerdancer12 小时前
LLM是怎么处理messages数组的,提示词缓存又是什么
前端·agent
陈随易13 小时前
VSCode的Copilot扩展支持接入DeepSeek,Kimi了!
前端·后端·程序员
我不是外星人14 小时前
有了 Harness Engineering ,真的还需要研发工程师吗?
前端·后端·ai编程
IT_陈寒17 小时前
JavaScript的闭包把我坑惨了,说好的内存会自动回收呢?
前端·人工智能·后端
Jackson__17 小时前
分享一个横向滚动案例,带悬停暂停,通用性很强
前端
MariaH18 小时前
git rebase的使用
前端
_柳青杨18 小时前
深入理解 JavaScript 事件循环
前端·javascript
阡陌Jony18 小时前
关于前端性能优化的一些问题:
前端
用户6000718191019 小时前
【翻译】简化 TSRX
前端
IT乐手20 小时前
佛德角逼平西班牙,国足还有啥借口?
前端