web view内嵌的h5页面与小程序直接相互跳转的实现

时间: 2018-08-21阅读: 10201标签: 小程序

在小程序中使用web-view组件嵌套的H5页面,如何实现和小程序页面之间的相互跳转呢?下面就简单介绍下如何实现的,希望能帮助到您



小程序跳转到 h5 页面

小程序代码

wx.navigateTo({url: '/pages/webview?url=' + encodeURIComponent('h5页面的 url')});

webview.js

<web-view src="{{url}}" bindmessage="handlePostMessage"></web-view>

onLoad: function (options) {
 this.setData({
   url: decodeURIComponent(options.url),
 });
},

// 接收 h5 页面传递过来的参数
handlePostMessage: function (e) {
  const data = e.detail;
  console.log(data);
}

h5 页面代码:

<head>
    ···
  <script type="text/JavaScript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>

记得把 url 的 host 添加到后台的合法域名中。


h5 页面跳回小程序

在 h5 页面的任何点击事件中:

/* eslint-disable */
 wx.miniProgram.getEnv(function (res) {
   if (res.miniprogram) {
     wx.miniProgram.switchTab({url: '/pages/home/home'});
     wx.miniProgram.postMessage({data: {id: '1234'}}); // 传的参数
   }
 });
 /* eslint-enable */


如果是外部h5的网页是不可以直接跳转到小程序,但可以设置图片二维码进行间接跳转。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1023

优雅解决微信小程序授权登录需要button触发

聊一聊最近的一个项目,这个项目是一个收书、售书的小程序,有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户,但要求无论用户是否授权都皆可使用,但同时也要求部分功能对不授权的用户限制开放。

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架

小程序返回上一个页面并更新上一个页面的数据

小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据。

在小程序中实现 Mixins 方案

在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码

小程序websocket心跳库——websocket-heartbeat-miniprogram

在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库。如下:在2020年也就是今年初,同事建议说可以考虑兼容一下小程序,心想也挺好的。

小程序开发的一些细节,你有注意吗?

我认为小程序是一个没有什么技术含量的东西,特别是现在有了组件库,而且小程序生态不断完善的情况下,只要对着文档慢慢写就好,就是时间的问题。然后这里也不是教大家怎么去写程序之类的,而是本人在经历过后的一些小建议

网页程序迁移至微信小程序web-view详解

小程序之前开放了webview功能,可以说是网页应用的一大福音了,但是微信的webview有一些坑,这篇文章就是列举一下我在开发过程中遇到的一些问题以及我找到的一些解决方案。

微信小程序版本自动更新

当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间

基于Proxy的小程序状态管理

微信小程序的市场在进一步的扩大,而背后的技术社区仍在摸索着最好的实践方案。我在帮助Nike,沃尔玛以及一些创业公司开发小程序后,依旧认为使用小程序原生框架是一个更高效,稳定的选择

微信小程序视图层处理增强之WXS

WXS算是专供WXML调用的有独立作用域的JS模块(不是全功能的JS,感觉有所限制)。举个例子,在这之前,我们是没有办法在WXML的数据绑定括号{{}}中调用JS函数的,所以在WXML层面就缺少了进一步做数据处理的能力。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!