最近写了个扫码连WiFi的微信小程序，在显示附近WiFi的时候需要显示WiFi信号强度，于是便写了个组件。

思路

写4个view标签嵌套，样式：width:100rpx; height:100rpx; border:solid 2rpx #ddd; border-radius: 50%;。然后隐藏四分之三

1-WX20220823-181707.png

最终效果：

WX20220823-174245@2x.png

number signalStrength

Wi-Fi 信号强度, 安卓取值 0 ～ 100 ，iOS 取值 0 ～ 1 ，值越大强度越大

组件说明

本组件把WiFi信号强度分为了4个等级，信号等级：4个 (0-24, 25-49, 50-74, 75-100)。

使用组件前需要把iOS的WiFi的信号强度signalStrength * 100 换算为相同取值范围。

组件使用

1.引入组件
xxx.json
"wifi-signal": "你的路径/components/wifiSignal/index"

2.使用
xxx.wxml
<wifi-signal signalStrength="72"></wifi-signal>

wifiSignal组件代码

index.wxml

<view class="signal-container" style="{{containerStyle}}">
    <view class="signal" style="{{sizeStyle}}">
        <view style="width:100%;height:100%;padding:2rpx;background-color: #fff; border-radius: 50%;">
            <view class="signal-value signal-1 {{signalStrength >= 75 ? 'active' : ''}}" style="{{sizeStyle1}}">
                <view class="signal-value signal-2 {{signalStrength >= 50 && signalStrength < 75 ? 'active' : ''}}" style="{{sizeStyle2}}">
                    <view class="signal-value signal-3 {{signalStrength >= 25 && signalStrength < 50 ? 'active' : ''}}" style="{{sizeStyle3}}">
                        <view class="signal-value signal-4 {{signalStrength >= 0 && signalStrength < 25 ? 'active' : ''}}" style="{{sizeStyle4}}"></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="signal-mask">
            <view class="mask1"></view>
            <view class="mask-left"></view>
            <view class="mask-right"></view>
        </view>
    </view>
</view>

index.less

@import "../../static/wxss/common.wxss";

.signal-container{
    .signal{
        position:relative;
        top:0;
        left:-20%;
        .signal-value{
            width:100%; 
            height:100%;
            background: #bbb;
            border-radius: 50%;
            box-sizing: border-box;
            // 有信号
            &.active{
                background: #000;
               .signal-value{
                background: #000;
               }
            }
        }
        
        .signal-mask{
            width:100%; 
            height:100%;
            position: absolute;
            top:0;
            left:0;
            z-index: 1;
            border-radius: 50%;
            overflow: hidden;
            &view{
                
            }
            .mask1{
                width:100%; 
                height: 50%;
                position: absolute;
                bottom:0;
                // background: blue;
                background:#fff;
            }
            .mask-left{
                width:50%; 
                height: 50%;
                position: absolute;
                top:0;
                left:0;
                // background: #ff0000;
                background:#fff;
                transform: rotate(45deg);
                transform-origin:-20% 50%;
            }
            .mask-right{
                width:50%; 
                height: 50%;
                position: absolute;
                top:0;
                right:0;
                // background: green;
                background:#fff;
                transform: rotate(135deg);
                transform-origin:50% 80%;
            }
        }
    }
}

index.js

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        size: {
            type: String, // large / default /small
            value: 'default'
        },
        signalStrength: {
            type: Number
        }, // 信号值 0~100, 信号等级：4个 (0~24, 25~49, 50~74, 75~100)
    },

    /**
     * 组件的初始数据
     */
    data: {
        containerStyle: "",
        sizeStyle: "",
        sizeStyle1: "",
        sizeStyle2: "",
        sizeStyle3: "",
        sizeStyle4: ""
    },
    ready(){
        this.initStyle()
    },

    /**
     * 组件的方法列表
     */
    methods: {
        initStyle(){
            let sizeVal = 0 // 组件尺寸(宽,高)
            let b = 0 // 信号值厚度
            let w = 0 // 信号值之间间隔距离
            let cw = 0 // 容器宽度
            let ch = 0 // 容器高度
            if(this.properties.size == 'large'){
                sizeVal = 70
                b = 4
                w = 5
                cw = 52
                ch=40
            }
            if(this.properties.size == 'default'){
                sizeVal = 50
                b = 3
                w = 4
                cw = 40
                ch=30
            }
            if(this.properties.size == 'small'){
                sizeVal = 48
                b = 3
                w = 4
                cw = 36
                ch=28
            }

            let strStyle = `width: ${cw}rpx; height: ${ch}rpx; overflow: hidden;` // border: solid 1px #ff0000;
            let str = `width:${sizeVal+4}rpx; height:${sizeVal+4}rpx;`
            let str1 = `padding:${w}rpx;width:${sizeVal}rpx; height:${sizeVal}rpx;`
            let str2 = `padding:${w}rpx; border:solid ${b}rpx #fff;`
            let str3 = `padding:${w}rpx; border:solid ${b}rpx #fff;`
            let str4 = `padding:${w}rpx; border:solid ${b}rpx #fff;`
            this.setData({
                containerStyle: strStyle,
                sizeStyle: str,
                sizeStyle1: str1,
                sizeStyle2: str2,
                sizeStyle3: str3,
                sizeStyle4: str4
            })
        }
    }
})

index.json

{
    "component": true,
    "usingComponents": {}
}