实现uniapp h5 网页跳转微信小程序

---

前言

最近的项目中有用到，算是踩坑后的记录吧
微信官方文档参考：获取token
微信官方文档参考：获取url scheme

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现uniapp网页跳转微信小程序

备注：要跳转的微信小程序必须有线上版本，此方法仅在开发环境中生效，生产环境会出现跨域问题，我后来是在C1N上生成了短链接，然后进行跳转的，最后上线前是通过访问 后端接口获取到小程序的openlink进行跳转的，具体后端怎么操作的我就不清楚了。

二、具体步骤

1.获取小程序的token

代码如下（示例）：

// 这里的appid写你需要跳转的小程序的appid,secret秘钥也一样，grant_type=client_credential是固定的参数，不用改
getToken() {
	uni.request({
		url: "/api/cgi-bin/token",
		method: 'GET',
		data: {
		     "grant_type": "client_credential",
		     "appid": "wx9bf8ae1b7dfc82c5",
		     "secret": "a7ec5ad46417c3b705fdea7dd51bfd02"
		 },
		success: res => {
			// console.log(res, '获取小程序的token');
			this.getScheme(res.data.access_token)
		}
	})
},

2.获取小程序跳转链接

代码如下（示例）：

// path跳转到的小程序目标页面，query跳转需要携带参数，在目标页面onload里面接收options里面，其他参数固定，获取看文档了解
getScheme(token) {
	uni.request({
		url: "/api/wxa/generatescheme?access_token=" + token,
		method: 'POST',
		data: {
			"jump_wxa": {
				"path": "",
				"query": "",
				"env_version": "release" // 正式版为"release"，体验版为"trial"，开发版为"develop"
			},
			"is_expire": true,
			"expire_type": 1,
			"expire_interval": 1
		},
		success: res => {
			// console.log(res.data.openlink, "我获取到的openlink")
			//这里获取到openlink的就是可跳转的路径地址，把它赋值给href即可
			this.openlink = res.data.openlink
		}
	})
},

3.总的示例模板

代码如下（示例）：

//备注：要跳转的微信小程序必须有线上版本


<template>
	<view class="tiao_btn">
		<uni-link color='#fff' showUnderLine='false' :href="openlink" text="跳转至小程序">
			跳转至小程序
		</uni-link>
	</view>
		
</template>


<script>
	
export default {
	data() {
		return {
			
			openlink: ''
		}
	},
	onLoad() {
		this.getToken()
	},
	methods: {
		//第一步获取小程序的token
		// 这里的appid写你需要跳转的小程序的appid,secret秘钥也一样，grant_type=client_credential是固定的参数，不用改
		getToken() {
			uni.request({
				url: "/api/cgi-bin/token",
				method: 'GET',
				data: {
				     "grant_type": "client_credential",
				     "appid": "wx9bf8ae1b7dfc82c5",
				     "secret": "a7ec5ad46417c3b705fdea7dd51bfd02"
				 },
				success: res => {
					// console.log(res, '获取小程序的token');
					this.getScheme(res.data.access_token)
				}
			})
		},
		//根据第一步获取到的token，第2步获取小程序跳转链接
		// path跳转到的小程序目标页面，query跳转需要携带参数，在目标页面onload里面接收options里面，其他参数固定，获取看文档了解
		getScheme(token) {
			uni.request({
				url: "/api/wxa/generatescheme?access_token=" + token,
				method: 'POST',
				data: {
					"jump_wxa": {
						"path": "",
						"query": "",
						"env_version": "release" // 正式版为"release"，体验版为"trial"，开发版为"develop"
					},
					"is_expire": true,
					"expire_type": 1,
					"expire_interval": 1
				},
				success: res => {
					// console.log(res.data.openlink, "我获取到的openlink")
					//这里获取到openlink的就是可跳转的路径地址，把它赋值给href即可
					this.openlink = res.data.openlink
				}
			})
		},
	}
}
</script>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了uniapp h5 网页跳转微信小程序的开发环境下的方法。