[移动开发]公众号h5网站里面跳转到小程序

公众号h5网站里面也可以跳转到小程序的，具体步骤如下：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

大概步骤如下：

先声明可以使用的标签，我们使用的是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>

即如下

效果如下

然后点击红色圈住的地方，就提示我们跳转到小程序中去（在微信开发者中点击没有效果，要在手机上点击才有提示），如下

注意：wx-open-launch-weapp标签里面包围着我们的h5标签，包围的这些h5标签的样式要定义在wx-open-launch-weapp里面，否则排版会乱的，如下

看，样式是不是在标签里面定义的。

然后跳转的地址一定要是.html结尾的，如下

我们要跳转到的小程序的地址是：/wei_crm/pages/card/index?card_id=7，所以我们要加上.html才行，如下

?然后wx-open-launch-weapp标签的username属性的值是小程序的原始id，如下

看，h5跳转到小程序就是这么简单。?

?

?

?

?

?

?