开发标签 wx-open-launch-weapp H5唤起小程序开发经验

阅读数: 112 2022年08月28日

先阅读微信官方文档:

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

发现点击区域的CSS编辑有很大限制,而且没法调用外部的CSS,宽高等设置比较难搞。

干脆就把这个区域做成透明遮罩,放在开发好的布局上面。

避免样式问题,但是宽高还是要慢慢调。

先把透明遮罩背景颜色调出来,然后调整宽高,最好看看手机上的效果(微信开发工具的效果不等于手机上的效果)。


.elm .box .coupon{
    width: 3.05rem;
    height: 2.05rem;
    border-radius: 0.15rem;
    float: left;
    background-color: #f4f9ff;
    margin-left: 0.25rem;
    margin-top: 0.3rem;
    position: relative;
}
.elm .box .coupon .xcx_button{
    width: 3.05rem;
    height: 2.05rem;
    position: absolute;
    left: 0rem;
    top: 0rem;
    z-index: 1;
    background-color: #0000cc;
}
.elm .box .coupon .xcx_button wx-open-launch-weapp{
    /*{{-- 按钮小程序区域宽度这里控制,高度要去里面 div 设置 --}}*/
    width: 3.05rem;
}


最后调整 height:100px;才刚好


调试效果:



成品效果:




phpriji.cn | 网站地图 | | 沪ICP备17015433号-1