小程序跳转到的H5页面再跳转回跳小程序的方法

哈喽，大家上午好，萍子又来啦，本人最近一段时间一直在做小程序的项目，大大小小的坑真的是踩了不小，无奈本人啊还老是忘记自己究竟踩过那些坑，但是不得不说虽然小程序尚还有很多不完善的地方，但是还是蛮强大的啦，也是引得众公司纷纷引用小程序项目啊。
之前萍子写过一篇从小程序跳转到H5页面的博文小程序跳H5页面，那么今天我们一起来看看如何跳回来，我们要有始有终哇，O(∩_∩)O哈哈~
####H5跳转到小程序的方法

方法有两个：
第一种比较简单，就直接点击手机的返回键，让它自动根据层级返回即可；
第二种，可使用JSSDK 1.3.2提供的接口返回小程序接口，所以我们需要在H5页面引入相应的js文件才能进行操作

那么第一种方法，我们就不用多说了，直接单击手机的返回键即可啦。我们着重来说一下引用文件进行操作的这一种，其实也不难。
刚好这两天我手头上的项目是需要写小程序跳转到H5，再从H5操作完跳转回来的，所以正好写下来分享一下咯。
请看下图的代码，我大致H5里面也就写了一个h1标签，用来点击操作跳转到小程序中。

如图所示，在H5页面引入https://res.wx.qq.com/open/js/jweixin-1.3.2.js文件，然后根据自己的需要选择下方适当的跳转方式api，配置上已发布正式的小程序页面，进行实践操作即可跳转到你想要跳转到的小程序页面中。

####跳转传递参数并接收
然后还需要提到的一点就是，无论是小程序跳转H5页面还是跳转回来都是可以传递参数的，当然传递参数也很简单，就直接拼接在跳转链接的后面即可。比如现在我们要从H5页面调到小程序页面，那么从上面的代码图大家也看见了，参数直接拼接在后面，跳转到小程序页面在目标页面的onload的options中获取传递过来的参数即可，这里因为就不再进行演示啦。

到此这篇关于小程序跳转到的H5页面再跳转回跳小程序的方法的文章就介绍到这了,更多相关小程序跳转H5再跳回内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 小程序跳转H5页面的方法步骤

    小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态.小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现在已经有超过150万的开发者加入到了小程序的开发,与我们一起共同发力推动小程序的发展,小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,小程序还在许多城市实现了支持地铁.公交服务.小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升. 因此小程序

  • 微信小程序和H5页面间相互跳转代码实例

    这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是 要打开的小程序 appId * path string 否 打开的页面路径,如果为空则打开首页 * extraData object 否 需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,A

  • 小程序跳转到的H5页面再跳转回跳小程序的方法

    哈喽,大家上午好,萍子又来啦,本人最近一段时间一直在做小程序的项目,大大小小的坑真的是踩了不小,无奈本人啊还老是忘记自己究竟踩过那些坑,但是不得不说虽然小程序尚还有很多不完善的地方,但是还是蛮强大的啦,也是引得众公司纷纷引用小程序项目啊. 之前萍子写过一篇从小程序跳转到H5页面的博文小程序跳H5页面,那么今天我们一起来看看如何跳回来,我们要有始有终哇,O(∩_∩)O哈哈~ ####H5跳转到小程序的方法 方法有两个: 第一种比较简单,就直接点击手机的返回键,让它自动根据层级返回即可: 第二种,可

  • android Web跳转到app指定页面并传递参数实例

    下面将实现 Web跳转到app指定页面并传递参数 总结 先看效果图: h5页面代码: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title

  • 详解小程序中h5页面onShow实现及跨页面通信方案

    小程序webview的现状 h5页面在小程序中的交互(跳转)场景 h5跳转小程序native页面(如:调用小程序地址选择能力,然后返回对应的地址信息给h5页面) h5跳转己方业务线的h5页面(内部页面交互,方式比较多样) h5跳转其它业务线的h5页面(如:交易流程,相关页面可能有其他业务线提供) 主要痛点 在完成相关操作后, 页面状态需要更新 ,目前常见的更新方式有如下两种: 第一种:通过url传参(如:url中加入__isonshowrefresh=1,告诉webview再次onshow时候刷

  • 微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    前言 小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了.我们今天来讲一讲.在小程序的webview里实现微信支付功能.因为微信不允许在小程序的webview里直接调起微信支付.所以我们这节课就要涉及到小程序和webview的交互了. 老规矩先看效果. 因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来. https://v.qq.com/x/page/t0913ipr

  • 钉钉小程序web-view内嵌H5页面并实现通信

    钉钉小程序web-view内嵌H5页面并实现通信

    目录 前言 1.引入页面 2.在H5页面向钉钉发送消息 3.在钉钉页面向H5发送消息,继而实现双向通信 4.注意 内容调试方式 5.附双向通信全部代码 前言 今天探讨个不太常见的需求,公司需要在钉钉小程序内进行文件的上传,意图打造一个小型云盘,考虑到钉钉的上传大小等有诸多限制,以及数据的安全性,决定在钉钉内使用web-view嵌套H5上传页面,并且在完成上传动作后,需要返回小程序,并执行其他操作. 1.引入页面 在管理端新建页面,同时在钉钉页面使用web-view引入,需要后端配合传入合适的to

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序页面传多个参数跳转页面的实现方法

    这里举例跳转两个参数 传递多少个也可以 这里传参数 我写作 data-item data-id 来绑定 同事加了点击事件bindtap 在index.js 在 data 里我写的是假数据 在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在console打印 console.log(e) 这样我们就拿到了 传递的数据 然后进行定义等 这里跳转详情页的函数 wx.navigateTo 这是一种跳转的方法 tabBar页面要用wx.switchTab 路径后面加上 jsonStr 等 在跳转的

  • 微信小程序开发（二）：页面跳转并传参操作示例

    微信小程序开发（二）：页面跳转并传参操作示例

    本文实例讲述了微信小程序页面跳转并传参操作.分享给大家供大家参考,具体如下: 本篇文章主要记录:保留当前页面,跳转到应用内的某个页面的..路由.跳转后的页面将在标题栏左上角带一个返回按钮. wx.navigateTo wxml: <view class='float-g' bindtap="onPostClick"> <i-icon class="post" type="brush_fill" size="30&quo

随机推荐