H5唤起小程序

H5唤起小程序
在项目开发过程中，也许会用到再H5页面增加一个按钮，点击可以跳转到微信小程序。这个h5页面可以在任何移动端使用该功能。

第一种方法
1、使用微信开放标签,也就是微信内部唤起小程序。需要微信的js-SDK。

 username = '' // 所需跳转的小程序原始id，即小程序对应的以gh_开头的id 必填
  path = '' // 所需跳转的小程序内页面路径及参数 需要在路径后面添加.html

H5： 已认证的服务号 服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
小程序： 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任 意合法合规的小程序
jssdk: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#0
开放标签：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

第二种方法
推荐使用该方法
2、微信外部H5唤起小程序，小程序必须是已发布并且不是个人。
将路径path及需要的参数打包发送给服务端，服务端返回URLScheme链接。

前端拿到URLScheme连接之后就可以进行跳转了。

前端代码

<template>
  <view>
	<view @click="showminclick()">打开微信小程序</view>
  </view>
</template>
<script>
	export default {
		data(){	
	
		},
		methods: {
			
			// 唤起小程序
			showminclick(){
				// 入参 
				let param = {
					path: '/pages/index/activityDeatils',
					 // 需要携带的参数
					query: `id=${item.id}&token=${this.apiToken}`,env_version:'trial' // 体验版，除正式版外均需要在微信外浏览器打开才生效
				}
				//请求接口URL 
				API.getWxMinUrl(param).then(res => {
					console.log("res",res);
					// 测试打开小程序
					// window.open("weixin://dl/business/?t=SagndxolUds’");
					// 苹果手机上使用需要加上延迟操作 
					// 直接打开接口返回的链接
					 setTimeout(() => {
       				   window.open(res.data)	
       				 }, 0)
					
				})
			},
		}
	}
</script>

使用window.open(“url连接”);或者location.href(“URL连接”);这两种方式都可以进行跳转。
每日生成上限50万，需要服务端接口。

服务端工作
需要先获取access_token,然后使用access_token获取URL Scheme连接
获取URL Scheme

注意 ：

前端在写Window.open的时候需要注意一下。
如果是接口请求获取微信跳转path。 在苹果手机端点击按钮跳转微信小程序就需要在该方法外面增加延迟操作，使用 setTimeout。