---

前言

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

---

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

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

备注：要跳转的微信小程序必须有线上版本，此方法仅在开发环境中生效，生产环境会出现跨域问题，我后来是在C1N上生成了短链接，然后进行跳转的。

二、具体步骤

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 网页跳转微信小程序的开发环境下的方法。