最近寫了個掃碼連WiFi的微信小程序，在顯示附近WiFi的時候需要顯示W(wǎng)iFi信號強(qiáng)度，于是便寫了個組件。

思路

寫4個view標(biāo)簽嵌套，樣式：width:100rpx; height:100rpx; border:solid 2rpx #ddd; border-radius: 50%;。然后隱藏四分之三

1-WX20220823-181707.png

最終效果：

WX20220823-174245@2x.png

number signalStrength

Wi-Fi 信號強(qiáng)度, 安卓取值 0 ～ 100 ，iOS 取值 0 ～ 1 ，值越大強(qiáng)度越大

組件說明

本組件把WiFi信號強(qiáng)度分為了4個等級，信號等級：4個 (0-24, 25-49, 50-74, 75-100)。

使用組件前需要把iOS的WiFi的信號強(qiáng)度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)
    },

    /**
     * 組件的初始數(shù)據(jù)
     */
    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 $rpx #fff;`
            let str3 = `padding:${w}rpx; border:solid $rpx #fff;`
            let str4 = `padding:${w}rpx; border:solid $rpx #fff;`
            this.setData({
                containerStyle: strStyle,
                sizeStyle: str,
                sizeStyle1: str1,
                sizeStyle2: str2,
                sizeStyle3: str3,
                sizeStyle4: str4
            })
        }
    }
})

index.json

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