【Vue2+微信小程序】在微信小程序中嵌入webview并获取onMessage

这篇具有很好参考价值的文章主要介绍了【Vue2+微信小程序】在微信小程序中嵌入webview并获取onMessage。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

实现在微信小程序中嵌入一个webview页面,并且在这个webview中进行操作后,能返回某些信息给到小程序中继续处理。

使用:vue2+小程序原生开发。

正文

关于如何使用微信小程序访问外部链接,这篇文章说得很详细了。
主要就是同域名下

微信小程序

新建嵌入webview的中间页

<web-view
    src="url地址"
    bindmessage="onMessage"
></web-view>

js
Page({
  onMessage(e) {
    console.log(e.detail.data);
//e.detail.data就是vue里传来的参数,后续进行处理即可
  }
});

vue2

  1. index.html中引入sdk。
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  1. 操作页
<script>
export default {
  data() {
    return {
      isMini: false,
    };
  },
  mounted() {
    this.isMiniProgramEnv();
  },
  methods: {
    //判断环境是否为小程序
    isMiniProgramEnv() {
      // 通过navigator.userAgent 判断
      let userAgent = navigator.userAgent;
      this.isMini = /miniProgram/i.test(userAgent);
    },

    wxlogin() {
      setTimeout(() => {
        wx.miniProgram.navigateBack();
        wx.miniProgram.postMessage({ data: "获取成功" });
      }, 2000);
    },
  },
};
</script>

注意:

  • postMessage() 里,数据要放在 data 对象里。
  • 注意触发的时机,只有 **后退、组件销毁、分享 的时候,**才会触发 web-view 的message事件。
    • 所以小程序会回退到前一页。再接收到传值。
  • 要在setTimeout中执行,为了确保能执行到。
  • 如果真机或者调试有问题,可以试试狠狠清理缓存,这个在微信小程序访问外部链接参考3两篇文章中有提到。

参考

  1. 微信小程序 webview 与 h5 通过 postMessage 实现实时通讯的实现:介绍了使用回退、销毁组件以实现通信的方式,比较详细。不过我没试。这个需求场景可能后续会用到吧:使用h5端生成canvas嵌入到小程序中使用(说是在小程序里画太麻烦了)【实际上也算不上实时吧?】
  2. 微信小程序webview postMessage使用:案例简单,但是除了回退之外,按照他的写法跳转和销毁我试了下都不行。不知道哪里有问题。下次试试。
  3. 微信小程序web-view与H5交互:判断H5是否在小程序环境:罗列了三种方法,我使用了推荐的那种。

补充

微信小程序与web-view页面双向通信 小程序传过去的方式就是src中带参数,感觉也不太方便?暂时没有用到。文章来源地址https://www.toymoban.com/news/detail-471249.html

到了这里,关于【Vue2+微信小程序】在微信小程序中嵌入webview并获取onMessage的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序webview嵌入H5页面,返回 UniAppJSBridgeReady,不触发问题

    公司的一个项目,要求用微信小程序实现对pdf文件,预览签字,用的uniapp开发 pdf预览这部分,用的pdf.js插件实现。 由于微信小程序中webview展示页面不能放在项目本地,要求远端请求网页。而且webview会铺满整个页面,导致我的签字按钮只能放在远端的H5页面实现,当时因为偷

    2024年02月15日
    浏览(53)
  • 微信小程序内嵌webView访问H5界面,在H5界面获取定位

    以下为uniapp代码!!! 第一步: 微信小程序webview组件路径写花生壳映射的https://***域名。 第二步:  花生壳配置映射,获取域名。 花生壳动态域名解析服务-贝锐官网|花生壳官网|DNS内网穿透|域名注册|向日葵远程控制|远程桌面|蒲公英路由器-贝锐官网 https://www.oray.com/   第

    2024年02月20日
    浏览(102)
  • vue3+uniapp在微信小程序实现一个2048小游戏

    微信小程序搜索《静远的工具箱》:偶数求和那个功能

    2024年04月12日
    浏览(61)
  • 在微信小程序使用fixed布局固定input 输入框,iPhone ios系统无法获取焦点问题解决。

    问题 微信小程序 是fixed布局后 ios版本 input 输入框 无法选中 但是长按可以获取焦点 。 解决 查看微信小程序开发文档 对input的介绍 https://developers.weixin.qq.com/miniprogram/dev/component/input.html 发现了 always-embed 属性 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在

    2024年02月12日
    浏览(53)
  • 微信小程序数组对象的添加及删除(Vue2)

    数组添加元素的两个方法(都不去重) 1、数组.push(对象) 直接向数组末尾追加新的元素(不会去重) 使用push添加数组时会将整个数组直接加入数组之中 1、数组.concat(对象) 使用concat会将要追加的数据(数组)进行拆分以此追加到数据末尾 追加相同的数据 追加一组数组 3.数

    2024年02月11日
    浏览(42)
  • 【h5+微信小程序】vue2实现h5扫码登录功能

    需要实现在同域名的h5页面上增加一个微信扫码登录的功能,如果用户已经有小程序的账号,可以直接登录。 使用 :vue2+微信小程序原生开发 可以实现上述功能的 前提 是:同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的。域名已经配置。 可以用什么来区分

    2024年02月14日
    浏览(69)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(91)
  • uni-app+vue2 微信小程序 使用canvas绘制折线图/波形图

      接口返回一个数组,每一项均是一个数字,代表着y坐标,x坐标需自己处理。 我的数据是1024个浮点数,在-10到10之间 波形图需要xy轴缩放功能,用c3的 transform: scale()是不行的,至少会失真。 然后背景的格子,我这里是每个格子要求100个点,初始缩放下是11个格子,10条线(

    2024年04月26日
    浏览(82)
  • 在微信小程序中怎样阻止冒泡事件?

    在微信小程序当中,当两个包含的视图都使用了bindtap函数来绑定点击事件的话,就会发生冒泡事件(即点击内部事件时将同时触发外部事件),如果我们要想阻止冒泡事件的发生,将被包含在内部的bindtap该为catchtap即可,下面请看具体事例。 如下图所示,红色框子部分绑定

    2024年02月11日
    浏览(48)
  • 在微信小程序中如何引入iconfont

    略 iconfont 指 https://www.iconfont.cn/。 通过 iconfont 可组建自己的图标库。 注册帐号 创建项目 添加图标 Font Family:默认为iconfont。当项目中已有iconfont名称的字体时,需要使用不同的名字。 略 将 iconfont.css 重命名为 iconfont20231007.wxss 将 iconfont20231007.wxss 文件复制到小程序的font目录

    2024年02月03日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包