h5跳转微信小程序(微信内部浏览器以及外部浏览器均适用)

这篇具有很好参考价值的文章主要介绍了h5跳转微信小程序(微信内部浏览器以及外部浏览器均适用)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1,先把这个链接给后端 让后端写个接口

获取scheme码 | 微信开放文档

需要把path路径(跳到小程序的那个页面的路径)给后端

2,上代码(vue2框架)


<template>
	<button type="button" class="btnGoWeapp" @click="goWeapp">点击跳转小程序</button>
</template>
 <script>
	 	import $ from '../utils/axios'
 export default {
   mounted(){
   },
   methods: {
	   goWeapp(){
        // 先判断是不是pc端打开的h5 如果是pc端提醒用手机打开页面
		   if(window.navigator.userAgent.indexOf("Windows") != -1){
			   window.alert("请使用手机打开!")
		   }else{
			   // 调取接口获取URL Scheme
			   $.post('/api/wx/GenerateScheme', {
			   		path:"pages/store/index",//打开的小程序页面路径
					query:""//传递的参数 在小程序 onload(options) options中可以拿到
			   	})
			   	.then(res => {
					  let UrlScheme=res.Data
					  // 打开小程序
					   window.open(UrlScheme); 
				})
			  
		   }
	   }
  }
 }
</script>
<style scoped>
.btnGoWeapp{
		width: 50%;
		font-size: 0.2rem;
	}
</style>

	

注意:苹果手机可能跳不成功

延迟一点拿到路径再跳

let UrlScheme=res.Data
								   
									   // 打开小程序
								   // window.open(UrlScheme); 
								
								   setTimeout(()=>{
									    window.open(UrlScheme); 
								   },200)

完事~文章来源地址https://www.toymoban.com/news/detail-818986.html

到了这里,关于h5跳转微信小程序(微信内部浏览器以及外部浏览器均适用)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信H5(公众号)跳转微信小程序实现及其传参

    其中:         username:目标小程序的原始id;         path : 所需跳转的小程序内页面路径及参数( 传参采取挂参的形式传递 ); ps:目标小程序接收参数时要在index的onload里面接收直接 options.XXX就可以。 https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-lin

    2024年02月09日
    浏览(78)
  • uniapp微信公众号(h5)端跳转微信小程序

    !!!不是微信公众号菜单跳转小程序 微信公众号菜单跳转小程序:公众号和小程序相互关联,在公众号的自定义菜单中配置即可 1、 绑定域名  2、安装依赖 jweixin-module 3、 引入挂载 !!!main.js引入挂载 !!!单页面引入挂载 4、 通过 config 接口注入权限验证配置(需要后

    2024年02月13日
    浏览(128)
  • H5跳转微信小程序-成功案例(VUE)(踩坑无数)

    微信官方文档:H5跳转小程序. 已认证的服务号 绑定JS接口安全域名 IP白名单 将小程序和H5公众号进行关联 需要跳转的小程序页面path和原始ID(gh_xxxxxxxxx) 引入jweixin-1.6.0.js 1、已认证的服务号 H5必须是依附于公众号的,且公众号必须为 服务号 ,不是订阅号。 什么样的公众号

    2024年02月09日
    浏览(57)
  • h5跳转微信小程序方案及注意事项(vue方向)

    在正式开发工作之前,请优先熟读并查看微信开发文档。 需提前登录微信公众平台进入“公众号设置”的“功能设置”的“JS接口安全域名”、“业务域名”、“网页授权域名”内依次配置h5页面的相关域名地址(例如:www.baidu.com)这里不包含协议名称和端口,同时可在根目

    2024年02月09日
    浏览(106)
  • 关于微信公众号的h5页面跳转微信小程序的详细介绍

    关于微信公众号跳转小程序的功能,我也是研究了一整天才弄好的,主要是微信官方文档写的不清楚,百度上的各种文章也各说各的,不过最后还是要相信官网文档,接下来我会一步一步分析,希望对你有帮助,并且最后会贴上全部代码。 一、条件 已认证的 服务号 ,服务号

    2024年02月10日
    浏览(65)
  • h5跳转微信小程序 wx-open-launch-weapp

    微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。 此文档面向网页开发者,介绍微信开放标签如何使用及相关注意事项。需要注意的是,微信开放

    2024年02月04日
    浏览(49)
  • h5页面跳转微信小程序(最简单的方法|URL Scheme)

    H5页面跳转微信小程序的需求是普遍存在的。由于微信小程序是一种只能在微信内部访问的应用程序,而H5页面可以在任何浏览器中访问,因此需要通过跳转来实现两者之间的衔接。 对于用户来说,H5页面跳转微信小程序可以提供更好的用户体验。用户可以在H5页面中浏览和选

    2024年02月02日
    浏览(84)
  • uniapp h5跳转微信小程序(wx-open-launch-weapp)

    目录 一、注意事项 二、使用步骤   三、调整样式 微信版本要求为:7.0.12及以上 系统版本要求为:iOS 10.3及以上、Android 5.0及以上 已认证的服务号 ,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 已认证的非个人主体的小程序,使用小程

    2024年02月02日
    浏览(55)
  • H5静态页面开发环境跳转小程序(微信浏览器,外部浏览器)

    网上有很多教程,但是具体的坑避不开,这里就以图文形式全流程介绍如何实现微信外环境静态h5跳转小程序。 1.官方开发文档参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html 官方文档只提供了关键代码,但是没说怎么上传静态文件,怎么上

    2024年02月04日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包