公众号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跳转到小程序就是这么简单。 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值