H5页面跳转小程序的3种实现方式

 更新时间:2023年08月16日 09:47:31   作者:qq_41939902  
这篇文章主要给大家介绍了关于H5页面跳转小程序的3种实现方式,说出来你可能不信,每位商家几乎都会h5转跳到小程序、H5转跳至小程序的应用范围十分广阔,需要的朋友可以参考下

前言

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

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

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

<template>
	<web-view src="https://www.xxx.cn/auth.html"></web-view>
</template>

2.编写auth.html

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
		let url = window.location.href;
		if(url.includes(code)) {
			if (wx.miniProgram) {
				wx.miniProgram.reLaunch({
					url: `/pages/home/index?code=${url中的code}&appId=${url中的appid}`,
					success: function() {
						......
					},
					fall: function() {
						......
					}
				})
			}
		} else {
			window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的appid&redirect_uri=还是当前页面&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
		}
	</script>

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

二、wx-open-launch-weapp

1.编写auth.html

<div id="app">
		<wx-open-launch-weapp id="launch-btn" username="原始ID" path="赋值自己的path页面">
			<template>
				<button class="btn">跳转小程序</button>
			</template>
		</wx-open-launch-weapp>
	</div>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	<script type="text/javascript">
		let url = window.location.href;
		//如果url中包含code,说明授权成功,开始注册微信config
		if(url.includes(code)) {
			//通过接口拿到appId,nonceStr,signature,timestamp
			wx.config({
				debug: false,
				appId,
				timestamp,
				nonceStr,
				signature,
				jsApiList: ['chooseImage', 'previewImage'], //必写,否则不显示
				openTagList: ['wx-open-launch-weapp']//必写,否则不显示
			});
		} else {
			window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的appid&redirect_uri=还是当前页面&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
		}
	</script>

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标签访问

<a href="weixin://dl/business/?t=WqDMv7uIy7g" rel="external nofollow" >跳转小程序</a>

总结 

到此这篇关于H5页面跳转小程序的3种实现方式的文章就介绍到这了,更多相关H5页面跳转小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript框架(iframe)操作总结

    JavaScript框架(iframe)操作总结

    这篇文章主要介绍了JavaScript框架(iframe)操作,介绍了种情况下的操作方法,需要的朋友可以参考下
    2014-04-04
  • bootstrap Table实现合并相同行

    bootstrap Table实现合并相同行

    这篇文章主要为大家详细介绍了bootstrapTable实现合并相同行,fastadmin框架同样使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript生成指定范围随机数和随机序列的方法

    JavaScript生成指定范围随机数和随机序列的方法

    这篇文章主要介绍了JavaScript生成指定范围随机数和随机序列,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • js实现下一页页码效果

    js实现下一页页码效果

    本文主要介绍了js实现下一页页码效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 创建表格,并添加事件

    创建表格,并添加事件

    创建表格,并添加事件...
    2006-08-08
  • JavaScript鼠标悬停事件用法解析

    JavaScript鼠标悬停事件用法解析

    这篇文章主要介绍了JavaScript鼠标悬停事件用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 浅析JavaScript中的array数组类型系统

    浅析JavaScript中的array数组类型系统

    除了对象之外,数组Array类型可能是javascript中最常用的类型了。而且,javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型,非常不错,感兴趣的朋友一起看下吧
    2016-07-07
  • Javascript中的方法和匿名方法实例详解

    Javascript中的方法和匿名方法实例详解

    这篇文章主要介绍了Javascript中的方法和匿名方法,以实例形式较为详细的分析了javascript中方法及匿名方法的定义与使用技巧,需要的朋友可以参考下
    2015-06-06
  • 学习JSON.stringify的9大特性和转换规则

    学习JSON.stringify的9大特性和转换规则

    本文介绍JSON.stringify9大特性和转换规则,JSON.stringify()方法将一个JavaScript对象或值转换为 JSON 字符串,如果指定了一个replacer 函数,则可以选择性地替换值,或者指定的replacer是数组,则可选择性地仅包含数组指定的属性,更多内容需要的小火煸可以参考下面温行内容
    2022-02-02
  • JavaScript中while循环的基础使用教程

    JavaScript中while循环的基础使用教程

    这篇文章主要给大家介绍了关于JavaScript中while循环的基础使用教程,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-08-08

最新评论