前言
最近的项目中有用到,算是踩坑后的记录吧
微信官方文档参考:获取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 网页跳转微信小程序的开发环境下的方法。