微信小程序web-view环境下H5跳转小程序页面方法实例代码

目录
  • 引言
  • 1、在H5页面引入JSSDK
  • 2、跳转至小程序页面方法
  • 总结

引言

一般的，web-view组件的src属性指定的H5页面之间，可以正常的采用超级链接a标记对进行页面之间的条转。但是web-view页面要想通过手指触碰返回小程序页面，就无法使用超级链接a标记了。那么这个问题应该如何解决呢？

1、在H5页面引入JSSDK

首先需要在H5页面中引入JSSDK，它可以让H5页面的js文件执行微信小程序的部分API命令。H5页面引入JSSDK的代码如下所示。

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、跳转至小程序页面方法

  • wx.miniProgram.navigateTo()
  • wx.miniProgram.navigateBack()
  • wx.miniProgram.switchTab()
  • wx.miniProgram.reLaunch()
  • wx.miniProgram.redirectTo()

上述API的使用与微信小程序中页面跳转的API使用规范是一样的，以wx.miniProgram.navigateTo()为例，该方法的API格式如下所示。

// 判断当前环境是否为小程序
const ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    wx.miniProgram.getEnv((res) => {
        if (res.miniprogram) {
            console.log('在小程序内');
        } else {
            console.log('不在小程序内');
        }
    });
} else {
    console.log('不在微信浏览器内');
}

// 小程序跳转方法
wx.miniProgram.navigateTo({
   url:'/pages/index/index',        // 指定跳转至小程序页面的路径
   success: (res) => {
	  console.log(res);   // 页面跳转成功的回调函数
   },
   fail: (err) => {
	  console.log(err);   // 页面跳转失败的回调函数
   }
});

// 通过链接与小程序通讯传参
// 静态参数传输
wx.miniProgram.navigateTo({
   url:'/pages/index/index?id=1', // id:所需参数
   success: (res) => {
	  console.log(res);   // 页面跳转成功的回调函数
   },
   fail: (err) => {
	  console.log(err);   // 页面跳转失败的回调函数
   }
});

// 动态参数传输
let id = 1;
wx.miniProgram.navigateTo({
   url:'/pages/index/index?id=' + id, // id:所需参数（动态参数需放在引号外小程序才可识别）
   success: (res) => {
	  console.log(res);   // 页面跳转成功的回调函数
   },
   fail: (err) => {
	  console.log(err);   // 页面跳转失败的回调函数
   }
});

注意事项：

  • 跳转 tabBar 页面只可使用 wx.miniProgram.switchTab() 方法，其他方法均无效。
  • wx.miniProgram.switchTab() 方法不可以携带参数，如跳转页面为 tabBar 页面则无法通过跳转路径实现H5与小程序之间的传参。

相应小程序官方文档：

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

总结

本文重点在于对web-view页面返回小程序页面进行了讲解和总结。在小程序开发过程中，web-view页面的实现还有许多开发技巧和功能，主要得力于JSSDK的使用。JSSDK的说明文档如下所示。

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

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

赞 (0)

相关推荐

  • 使用vue编写h5公众号跳转小程序的实现代码

    前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求:微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及以上. 跳转小程序主要的标签是 wx-open-launch-weapp 第一步在vue项目下public文件夹下的index.html页面,引入

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

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

  • vue实现微信公众号h5跳转小程序的示例代码第1/3页

    vue实现微信公众号h5跳转小程序的示例代码第1/3页

    目录 项目概述 涉及知识点 实现 实现容器 computed 实现分页 项目概述 实现类似图中红色框框选中可以左右滑动的组件,点击可以跳转到对应的小程序页面. 涉及知识点 computed 实现分页 开放标签 wx-open-launch-weapp 使用 实现 实现容器 首先我们来实现两行可以左右滑动的容器. 这边为了省事,我是选择了 vue-awesome-swiper@2.6.7: npm i vue-awesome-swiper@2.6.7 -S main.js 引入 import Vu

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

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

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

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

  • 微信小程序web-view环境下H5跳转小程序页面方法实例代码

    目录 引言 1.在H5页面引入JSSDK 2.跳转至小程序页面方法 总结 引言 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了.那么这个问题应该如何解决呢? 1.在H5页面引入JSSDK 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令.H5页面引入JSSDK的代码如下所示. <script src="

  • webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

    注意: 1,webuploader上传组件会和jQuery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性; enctype="multipart/form-data" 2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置! <!-- 上传拦截,如最大上传值及最小上传值 --> <!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制 <bean id="multipartRes

  • vue中用H5实现文件上传的方法实例代码

    整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def

  • 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

    微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

    先看一下效果图: index.wxml <view class='{{tabIsTop ? "fixedTop" : ""}}'> <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange"> <i-tab key="tab1" title="车主圈"

  • VC程序在Win32环境下动态链接库(DLL)编程原理

    本文详细讲述了VC程序在Win32环境下动态链接库(DLL)编程原理.分享给大家供大家参考.具体分析如下: 一般比较大的应用程序都由很多模块组成,这些模块分别完成相对独立的功能,它们彼此协作来完成整个软件系统的工作.其中可能存在一些模块的功能较为通用,在构造其它软件系统时仍会被使用.在构造软件系统时,如果将所有模块的源代码都静态编译到整个应用程序EXE文件中,会产生一些问题:一个缺点是增加了应用程序的大小,它会占用更多的磁盘空间,程序运行时也会消耗较大的内存空间,造成系统资源的浪费:另一个缺点是

  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon>

  • 微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

    微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo 利用swiper组件可简单快速编写仿抖音短视频的功能  自动播放当前页视频  翻页停止播放当前页视频 并自动播放下页视频 有其他需求也可用 cover-view 添加 收藏 点赞 评论等功能 效果图: video官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/video.html swiper官方介绍: https://developer

  • linux环境下安装 openOffice 并启动服务 的方法

    一.背景故事 这两天遇到一个大坑,客户要做office 文档在线预览功能,于是乎就要把office文档转换成pdf交给前端显示.      在某度找了一圈都说openOffice+jodconverter 可以搞定这个事情.代码倒是很好找,不过版本很多,各类jar包也很多,但尝试下来发现,转化效果很一般,复杂的excel也无法成功.有同事建议放到服务器上效果可能好些,于是就开始折腾在服务器上安装OpenOffice这个事情.网上各种找大神的博文,发现安装起来不是很顺畅,就写了这篇随笔,记录一下,

  • 在ES5与ES6环境下处理函数默认参数的实现方法

    函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮) MDN关于函数默认参数的描述:函数默认参数允许在没有值或undefined被传入时使用默认形参. ES5 使用逻辑或||来实现 众所周知,在ES5版本中,并没有提供的直接方法供我们我们处理函数默认值 所以只能够自己去增强函数的功能,一般会这么来做: function doSomething (name, age) { name = name || 'default name' age = age || 18 console.log(name

  • ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解

    正好最近的域名备案通过了,兴起就突然想做一个网页,虽然之前去备案域名也是有这个目的. 问过几个人,说用linux上用PHP搭建网站很简单,就试着做了一个,这里主要说一下登录验证相关的部分: 首相准备几个文件,主要是index.php.conn.php.data.php以及login.php; login.php 主要是登录过程中的数据对比部分:其中include ('conn.php')内容在下面有说. <?php if(!isset($_POST['submit'])){ exit('logi

随机推荐