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’"); 
					// 直接打开接口返回的链接
					window.open(res.data)	
				})
			},
		}
	}
script>

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

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

你可能感兴趣的:(H5,小程序,前端,微信小程序)