微信小程序 webview页面分享弹窗

微信小程序webview中使用cover-view展示分享弹窗

公司业务需要在webview中添加分享弹窗，可以发送给朋友及生成海报分享，因为好几个详情都需要这个功能，因此抽离了share-sheet的组件，ui效果如下图：

点击分享，显示以下弹窗

share-sheet.wxml如下：

<cover-view class="share-sheet-container" hidden="{{!show}}" catchtouchmove="poptouchmove">
        <cover-view class="shade"></cover-view>
        <cover-view class="content">
            <button class="row share-friend-btn border-bottom" open-type="share" hover-class="none">发送给朋友</button>
            <cover-view class="row create-poster-btn" catchtap="createPosterAction">生成海报</cover-view>
            <cover-view class="row quick-btn" catchtap="quickAction">取消</cover-view>
        </cover-view>
         <cover-view class="palceholder"></cover-view>
    </cover-view>

share-sheet.js如下：

Component({
options: {
    addGlobalClass: true,
},
/**
 * 组件的属性列表
 */
properties: {
    //控制弹窗显示与否
    show: {
        type: Boolean,
        value: false,
    },
    //分享数据
    shareData: {
        type: Object,
        value: null,
    },
},
data: {
    showPreviewPoster: false, //是否显示生成的海报弹窗
    poster: '', //生成的海报路径 用来判断是否可以点击生成海报
    clickCreatePosterBtn: false, // 是否点击了生成海报按钮 用来判断在没有海报时点击生成海报 带海报完善后直接显示海报预览弹窗
},

/**
 * 组件的方法列表
 */
methods: {
    //阻止滑动事件 防止page滑动
    poptouchmove: function () {
        return false;
    },
    //点击去掉按钮
    quickAction() {
        this.data.show = false;
        this.setData({
            show: false,
        });
    },
    //点击生成海报按钮
    createPosterAction() {
        this.setData({
            show: false,
        });
        if (!this.data.poster) {
            this.setData({
                clickCreatePosterBtn: true,
            });
            return false;
        }
        this.setData({
            showPreviewPoster: true,
            clickCreatePosterBtn: false,
        });
    },
    setPosterStatus(e) {
        this.setData({
            poster: e.detail,
        });
    },
},
});

share-sheet.less如下：

.share-sheet-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    .shade {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }
    .palceholder {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        height: 40rpx;
        box-sizing: content-box;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 2;
    }
    .content {
        position: absolute;
        padding-bottom: env(safe-area-inset-bottom);
        left: 0;
        right: 0;
        bottom: 0;
        background: #f2f2f2;
        border-radius: 40rpx;
        z-index: 3;
        overflow: hidden;
    }
    .row {
        display: block;
        height: 112rpx;
        line-height: 111rpx;
        font-size: 34rpx;
        color: #000;
        text-align: center;
        background: #fff;
        &.share-friend-btn {
            border: none;
            margin-bottom: 1px;
        }
    }
    .quick-btn {
        margin-top: 16rpx;
    }
}

注意的点:

一下均为真机测试，实际情况可能会随着时间改变，请注意自测

1. webview上添加结构只能使用cover-view，想要显示出来需要用fixed/absolute定位，且不能使用hidden，可以直接显示或者使用wx:if
2. cover-view支持flex布局
3. cover-image不支持svg格式图片
4. cover-view 不支持background-image,不支持iconfont图标
5. cover-view中button须有文本，否则不显示
6. cover-view不支持设置单边的border，ui弹窗只有上面有圆角我的处理方式是在下面写个空的cover-view定位填充
7. cover-view支持overflow-y, 但是不支持over-flow:auto, 滚动本身不会引起穿透