关闭

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

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

在小程序中使用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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

微信小程序之程序、页面注册及生命周期

微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理

小程序的节流与防抖

在屏幕滚动与拖拽的时候,经常会用到一些持续触发的事件,而这类事件不可控触发频率非常高,大大影响了性能,而我们想要让其变得可控,就可以用到节流和防抖两种方案。

微信小程序Socket的实现_基于socket-io

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。

微信小程序推广方式_最有效的小程序推广模式

当小程序开发完成后,就需要进行推广操作。当然推广的前提是核心功能是否能够满足用户需求,下面总结一些具体的运作方式。和大多数APP的搜索个性一样,用户搜索小程序名称就能进入小程序界面。我们需要做好关键词优化,通过搜索-微信指数

微信小程序版本自动更新

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

微信小程序中清除定时器

在微信小程序的开发过程中,经常会遇到使用倒计时的情况,但是小程序的页面跳转经常会遇到跳转的下一个页面后,前一个页面的倒计时还在运行。这时候需要我们在关闭或者离开当前页面的时候清除掉当前的倒计时,但是传统的方式在小程序中无法使用,在小程序中我采用的是赋值然后清除的方法。

微信小程序-页面跳转与参数传递

微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转。

Remax:使用真正的 React 构建小程序

Remax 是基于真正 React 的小程序构建工具,本文由 Ant Design 团队的 Mack 执笔,让我们跟随作者一起了解 Remax。因为 React 是我们最熟悉的技术。小程序糟糕的 API 设计已经有很多文章吐槽

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

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

Mpx 小程序框架技术揭秘

与目前业内的几个小程序框架相比较而言,mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说,是没有任何“包袱”,围绕着原生小程序这个 core 去做不同功能的 patch 工作

点击更多...

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