h5跳转小程序三种方式。
1 sc短链跳转
限制：
每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序
每天生成 URL Scheme 和 URL Link 总数量上限为50万
只能生成已发布的小程序的URL Scheme
2 引入js-web，开放标签open跳转
3 云开发开通，api调用
仅推荐1，没有长期短链存在了，最长我30天只需考量每天上限50万。
image.png
从H5跳转到小程序（获取小程序Scheme码）
https://blog.csdn.net/qiao_shi/article/details/121852432
相关准备
小程序id ：
小程序密钥 ：
备注：临时accesstoken 2小时最长
通过接口生成短链接：
1 获取accesstoken https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
2 获取短链 https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateScheme.html
3 生成返回错误 https://blog.csdn.net/qiao_shi/article/details/121852432
vue文件；状态提示为uni可自行去除
<template>
<view class="login">
<view class="login__logo">
<img width="100%" height="100%" :src="schoolLogo" />
</view>
<view class="login__btns">
<view
class="btn login__btn"
:class="{ 'btn--disable': !schoolId }"
@click="handleClick"
>立即登录</view
>
</view>
<view class="u-margin-top-80 u-text-center">
<view style="color: #999">当前仅web调试，一般secrect放后端</view>
<view style="color: #999">且结合文档做accesstoken缓存处理</view>
</view>
</view>
</template>
<script>
export default {
name: 'Login',
data() {
return {
//
schoolId: '',
schoolName: 'ty熊猫压缩',
schoolLogo:
''https://tinypng.com/images/pro/panda-pro.png'',
}
},
computed: {},
async onLoad() {
let timer = setTimeout(() => {
this.schoolId = 1
}, 300)
uni.setNavigationBarTitle({
title: this.schoolName,
})
},
methods: {
getAccessToken() {
uni.request({
url: '/api/cgi-bin/token', //仅为示例，并非真实接口地址。
data: {
grant_type: 'client_credential',
appid: '小程序id',
secret: '小程序密钥',
},
header: {
'Content-Type': 'application/json',
},
success: (res) => {
console.log(res.data)
localStorage.setItem('res', res.data.access_token)
},
})
},
handleClick() {
// 不要频繁调用会微信会给返回错的，失效时调用时存储下就行
// this.getAccessToken()
// 调试的accesstoken存str用
let str =
'66_A5ICn86Xb0LoX4RIME_ZNJ6Fa19qlZb0-FFrwK_4sdehua2j5Hy4PYDWReAJANGB'
// 获取短链
uni.request({
url: '/api/wxa/generatescheme?access_token=' + str, //仅为示例，并非真实接口地址。
data: {
jump_wxa: {
//path为需要跳转的小程序路径
path: 'pages/login/index',
//要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"。
env_version: 'trial',
//参数跳转过去携带的参数，最大1024个字符，只支持数字，大小写英文以及部分特殊字符
query: 'merge=1&key=100000',
},
},
method: 'POST',
header: {
'Content-Type': 'application/json',
},
success: (res) => {
console.log(res.data)
if (res.data.errcode) {
uni.showToast({
title: res.data.errmsg,
icon: 'none',
duration: 3000,
})
} else {
uni.showModal({
title: '获取的短链',
content: res.data.openlink,
cancelText: '取消', // 取消按钮的文字
confirmText: '确认', // 确认按钮的文字
showCancel: true, // 是否显示取消按钮，默认为 true
confirmColor: '#18c183',
// cancelColor: '#39B54A',
success: (res2) => {
if (res2.confirm) {
uni.setClipboardData({
data: res.data.openlink,
})
// weixin://dl/business/?t=ToaaaaakEn
let timer = setTimeout(() => {
clearTimeout(timer)
location.href = res.data.openlink
}, 500)
// console.log('comfirm') //点击确定之后执行的代码
} else {
console.log('cancel') //点击取消之后执行的代码
}
},
})
}
},
})
},
},
}
</script>
<style lang="scss" scoped>
.login {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
align-items: center;
&__logo {
position: relative;
width: 278rpx;
height: 278rpx;
overflow: hidden;
margin-top: 220rpx;
margin-bottom: 160rpx;
}
&__btns {
position: relative;
align-items: center;
border-radius: 45rpx;
text-align: center;
background: #18c183;
color: #fff;
}
&__btn {
width: 390rpx;
height: 90rpx;
line-height: 90rpx;
}
}
.u-margin-top-80 {
margin-top: 80rpx !important;
}
</style>
网友评论