使用canvas画的背景，在真机上会置顶，把其他内容遮盖掉

代码

框架

<canvas canvas-id=‘profileHeadBg’ class=‘profile-head-bg’></canvas>

<view class=“profile-avatar”>

    <open-data type=“userAvatarUrl”></open-data>

</view>

<view class=‘profile-card’>

    <view class=‘info-item nickname’>

        <text>昵称：</text>

        <open-data type=“userNickName”></open-data>

    </view>

</view>

样式

.profile-head-bg {

width: 100%;

height: 300rpx;

position: fixed;

z-index: -999;

}

.profile-avatar {

width: 140rpx;

height: 140rpx;

margin: 0 auto 0 auto;

border-radius: 50%;

overflow: hidden;

}

.profile-card {

width: 640rpx;

height: 330rpx;

background-color: white;

margin: 0 auto 0 auto;

margin-top: 40rpx;

padding-top: 30rpx;

border: 1rpx solid #EEE;

font-size: 30rpx;

position: relative;

}

.info-item {

margin: 0 80rpx 0 80rpx;

height: 60rpx;

line-height: 60rpx;

}

canvas背景图‍

onLoad: function (options) {

    var width = 0;

    wx.getSystemInfo({

        success: function(res) {

            // 获取设备宽度

            width = res.windowWidth

        },

    })

    const ctx = wx.createCanvasContext(“profileHeadBg”, this);

    // 重置坐标系到屏幕中间

    ctx.translate(width / 2, 0)

    ctx.setLineWidth(1);// 设置圆环的宽度

    ctx.setLineCap(‘round’) // 设置圆环端点的形状

    ctx.beginPath();//开始一个新的路径

    ctx.arc(0, -350, 500, 0, 2 * Math.PI, false);

    ctx.setFillStyle("#ED0C1E")

    ctx.fill();//对当前路径进行描边

    ctx.draw();

}