1,先把这个链接给后端 让后端写个接口
获取scheme码 | 微信开放文档
需要把path路径(跳到小程序的那个页面的路径)给后端
2,上代码(vue2框架)
<template>
<button type="button" class="btnGoWeapp" @click="goWeapp">点击跳转小程序</button>
</template>
<script>
import $ from '../utils/axios'
export default {
mounted(){
},
methods: {
goWeapp(){
// 先判断是不是pc端打开的h5 如果是pc端提醒用手机打开页面
if(window.navigator.userAgent.indexOf("Windows") != -1){
window.alert("请使用手机打开!")
}else{
// 调取接口获取URL Scheme
$.post('/api/wx/GenerateScheme', {
path:"pages/store/index",//打开的小程序页面路径
query:""//传递的参数 在小程序 onload(options) options中可以拿到
})
.then(res => {
let UrlScheme=res.Data
// 打开小程序
window.open(UrlScheme);
})
}
}
}
}
</script>
<style scoped>
.btnGoWeapp{
width: 50%;
font-size: 0.2rem;
}
</style>
注意:苹果手机可能跳不成功
延迟一点拿到路径再跳文章来源:https://www.toymoban.com/news/detail-818986.html
let UrlScheme=res.Data
// 打开小程序
// window.open(UrlScheme);
setTimeout(()=>{
window.open(UrlScheme);
},200)
完事~文章来源地址https://www.toymoban.com/news/detail-818986.html
到了这里,关于h5跳转微信小程序(微信内部浏览器以及外部浏览器均适用)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!