公众号h5网站里面也可以跳转到小程序的,具体步骤如下:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
大概步骤如下:
![](https://img-blog.csdnimg.cn/85275b01b60244529a0c12acf0c29011.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5LquMjAxMzE0,size_20,color_FFFFFF,t_70,g_se,x_16)
先声明可以使用的标签,我们使用的是wx-open-launch-weapp标签来跳转到我们的小程序的。
然后就可以使用我们的wx-open-lauch-weapp标签来跳转到小程序了,如下
<wx-open-launch-weapp style="width: 94vw;height: auto;" id="launch-btn" username="小程序原始ID" path="/wei_crm/pages/card/index.html?card_id={$result.card_info.card_id}">
<template>
<style>
.card{
margin-top: 5vw;
display: flex;
height: 14vw;
border: 1px solid #eee;
padding: 2vw;
border-radius: 3vw;
}
.nickname{
font-size: 5vw;
}
.company{
font-size: 4vw;
color: gray;
}
.card .up{
display: flex;
align-items: baseline;
}
.card .role{
font-size: 3vw;
margin-left: 2vw;
}
.card .right{
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 2vw;
}
.card img{
height: 14vw;
width: 14vw;
border-radius: 7vw;
}
.card .company{
width: 70vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="card" >
<div class="avatar">
<img src="{$result.card_info.avatar}">
</div>
<div class="right">
<div class="up">
<div class="nickname">{$result.card_info.user_name}</div>
<div class="role">{$result.card_info.user_role}</div>
</div>
<div class="company">{$result.card_info.company_name}</div>
</div>
</div>
</template>
</wx-open-launch-weapp>
即如下
![](https://img-blog.csdnimg.cn/a9aed440045d4df39f3d7dacb08846ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5LquMjAxMzE0,size_20,color_FFFFFF,t_70,g_se,x_16)
效果如下
![](https://img-blog.csdnimg.cn/b6308993722742e18f6768b7db237272.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5LquMjAxMzE0,size_20,color_FFFFFF,t_70,g_se,x_16)
然后点击红色圈住的地方,就提示我们跳转到小程序中去(在微信开发者中点击没有效果,要在手机上点击才有提示),如下
![](https://img-blog.csdnimg.cn/9b130fbb8f4946009b4c9f970ba0f78e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5LquMjAxMzE0,size_15,color_FFFFFF,t_70,g_se,x_16)
注意:wx-open-launch-weapp标签里面包围着我们的h5标签,包围的这些h5标签的样式要定义在wx-open-launch-weapp里面,否则排版会乱的,如下
![](https://img-blog.csdnimg.cn/4743108fa58b46acbd582029c1ab220c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5LquMjAxMzE0,size_20,color_FFFFFF,t_70,g_se,x_16)
看,样式是不是在标签里面定义的。
然后跳转的地址一定要是.html结尾的,如下
![](https://img-blog.csdnimg.cn/9c9b7870aed54ff08a245ae76981bc20.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5LquMjAxMzE0,size_20,color_FFFFFF,t_70,g_se,x_16)
我们要跳转到的小程序的地址是:/wei_crm/pages/card/index?card_id=7,所以我们要加上.html才行,如下
![](https://img-blog.csdnimg.cn/bcb926c8a79d4741938cbc4703e0984e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5LquMjAxMzE0,size_20,color_FFFFFF,t_70,g_se,x_16)
然后wx-open-launch-weapp标签的username属性的值是小程序的原始id,如下
![](https://img-blog.csdnimg.cn/33f6400c705c40aa9ba3770b0a39929e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5LquMjAxMzE0,size_20,color_FFFFFF,t_70,g_se,x_16)
看,h5跳转到小程序就是这么简单。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)