iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >H5页面跳转小程序的三种方式
  • 715
分享到

H5页面跳转小程序的三种方式

小程序微信小程序前端微信html5 2023-08-16 16:08:12 715人浏览 独家记忆
摘要

文章目录 前言一、web-view标签返回小程序1.小程序启动页面只写web-view标签跳转到授权页面。2.编写auth.html3、把auth.html放到服务器就可以测试访问,打开小程序默认进入启动页面中的webview跳转到


前言

实际开发中,小程序和H5往往有很多业务场景需要来回跳转,这里主要介绍三种跳转方式供大家参考。
场景:微信小程序登录有时候需要和公众号进行绑定,获取公众号code和appid传给后台进行绑定


一、WEB-view标签返回小程序

1.小程序启动页面只写web-view标签跳转到授权页面。

2.编写auth.html

3、把auth.html放到服务器就可以测试访问,打开小程序默认进入启动页面中的webview跳转到H5,授权成功后,通过wx.miniProgram.reLaunch方法携带参数跳回小程序

二、wx-open-launch-weapp

1.编写auth.html

2、公众号后台配置好相应的域名和ip白名单,把auth.html放到服务器就可以测试访问,点击按钮,跳转到小程序首页(标签中的path属性),在onLoad函数中获取参数

在这里插入图片描述

三、URL Scheme

该接口用于获取小程序 scheme 码,适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口,可以选择生成到期失效和永久有效的小程序码,有数量限制,目前仅针对国内非个人主体的小程序开放。

1.HTTPS 调用

 POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN 

在这里插入图片描述

2.返回示例

{  "msg": "操作成功",  "code": 200,  "data": {    "openlink": "weixin://dl/business/?t=WqDMv7uIy7g"  }}

3.调用,微信内打开跳转的是正式版,微信外可以跳转体验版和开发板,具体通过env_version参数设置小程序版本

我这里是写个html文件通过a标签访问

跳转小程序

来源地址:https://blog.csdn.net/qq_41939902/article/details/128939872

--结束END--

本文标题: H5页面跳转小程序的三种方式

本文链接: https://www.lsjlt.com/news/371585.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • H5页面跳转小程序的三种方式
    文章目录 前言一、web-view标签返回小程序1.小程序启动页面只写web-view标签跳转到授权页面。2.编写auth.html3、把auth.html放到服务器就可以测试访问,打开小程序默认进入启动页面中的webview跳转到...
    99+
    2023-08-16
    小程序 微信小程序 前端 微信 html5
  • 支付宝小程序跳转第三方H5页面
    支付宝小程序跳转第三方H5页面 基础API跳转web-viewmy.ap.openURLweb-view 和 my.ap.openURL 两者比较my.ap.navigateToAlipayP...
    99+
    2023-09-10
    小程序 前端 javascript
  • H5跳小程序的三种方法
    1、H5页面嵌入到小程序中,H5跳本小程序其他页面 wx.miniProgram.navigateTo({ url: '/pages/product/detailsfrom=智能客服微信小程序...
    99+
    2023-09-05
    小程序 微信小程序
  • H5页面跳转到小程序的几种实现方法
    第一种:通过 URL Scheme 可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme 使用示例 服务端配置好接口,客户端调用接口传入目标小程序的path路径 ...
    99+
    2023-08-17
    小程序 微信小程序
  • 微信小程序页面跳转方式+跳转小程序
    一. 跳转页面方法 1.跳转到 tabBar 页面 wx.switchTab({ url: '/index'}) 2.跳转到其他页面(非tabBar页) //redirectTo方法(会关闭当前页面...
    99+
    2023-09-28
    小程序 微信小程序
  • 小程序的页面跳转方式
    102. 小程序的页面跳转方式 小程序是一种快速发展的应用形式,为用户提供了便捷的功能和交互体验。其中,页面跳转是小程序中常用的功能之一,本文将介绍小程序的页面跳转方式,并提供代码示例,帮助读者更好地理解和实现页面跳转。 一、小程序页面跳转...
    99+
    2023-08-20
    小程序
  • 微信小程序web-view环境下H5跳转小程序页面方法
    web-view页面内的H5页面跳转至小程序页面 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转。但是web-view页面要想通过手指触碰...
    99+
    2023-10-03
    小程序 微信小程序 前端
  • 微信小程序 h5页面跳转小程序(超详细讲解)
    h5跳转小程序 实战项目从无到完整的h5跳转小程序经验,跳转方式分为云函数跳转和开放性标签跳转。 开放性标签是针对微信里面浏览器使用的,而云函数跳转在外部以及微信里面都可以使用。 建议需要的同学先全部...
    99+
    2023-09-11
    微信小程序 小程序 微信 前端
  • 从H5页面跳转到小程序的实现方案有哪些
    本篇内容主要讲解“从H5页面跳转到小程序的实现方案有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“从H5页面跳转到小程序的实现方案有哪些”吧!实现方案实现H5跳转小程序的方案目前有多种,可以...
    99+
    2023-06-28
  • 微信小程序之五种页面跳转方法小结
    目录第一种:<navigator></navigator>标签.第二种:wx.navigateTo.第三种:wx.redirectTo.第四种:wx.swit...
    99+
    2022-11-13
  • 怎么从小程序跳到H5页面
    怎么从小程序跳到H5页面,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。微信小程序:虽然开发方法类似网页,但实际上是一种只能运行在微信自己开发的浏览器中的特殊网页,它所能够使...
    99+
    2023-06-26
  • h5页面如何跳到小程序支付页面
    在h5页面中调用小程序支付页面的方法H5页面代码<body ><div class="container"><button onclick="testPay()">...
    99+
    2022-10-15
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
    1、H5页面代码 wx.miniProgram.reLaunch({ url: `/pages/index/indexappId=${您的微信小程序appId}` });//触发小程序刷新页面获取appId  微信小程序appId查看...
    99+
    2023-08-31
    小程序 微信小程序 前端
  • vue3页面跳转的两种方式
    目录1、标签内 router-link跳转2、编程式路由导航vue3的页面跳转有两种方式,第一种是标签内跳转,第二种是编程式路由导航 1、 <router-link to='/...
    99+
    2023-05-20
    vue3页面跳转 vue跳转页面
  • 微信小程序和H5页面间相互跳转的示例分析
    这篇文章主要为大家展示了“微信小程序和H5页面间相互跳转的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序和H5页面间相互跳转的示例分析”这篇文...
    99+
    2022-10-19
  • Android启动页面定时跳转的三种方法
    从我所做的项目来看,几乎都少不了开始页面,启动页面的作用能够打广告、发公告、做缓存处理、更新数据等等!Android实现开始页面的跳转,就是打开一个Android手机APP的欢...
    99+
    2022-06-06
    方法 Android
  • JavaScript实现页面跳转的八种方式
    整理一下JavaScript八种跳转方式,欢迎评论补充! 第一种方法: <script> window.location.replace('http://www....
    99+
    2022-11-13
  • uniapp小程序跳转到外部页面
    方案1 使用uni-app的扩展组件 uni-link,使用参考文档uni-app官网 该组件的行为是在app内打开外部浏览器,在h5打开新网页。 方案2: 通过先跳转到web-view页面,通过web-view这个标签进行动态绑定...
    99+
    2023-09-13
    小程序 uni-app 前端 Powered by 金山文档
  • 小程序如何跳转到tabbar页面
    使用wx.switchTab跳转至tabbar的某一页面wx.switchTab({url: '../b/b'});如页面不带tab,使用wx.navigateTo跳转至tabbar页面wx.navigateTo({url:...
    99+
    2022-10-04
  • 小程序如何实现页面跳转
    本篇内容主要讲解“小程序如何实现页面跳转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“小程序如何实现页面跳转”吧!  1.保留当前页面,跳转到应用内另一个页面:wx.navigateTo({ u...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作