小程序wifi圆形扩散效果

小程序wifi圆形动态扩散效果

代码实现
wifstatus.wxml

wifstatus.wxss
@import “…/…/style/weui.wxss”;

.imagecss{
width: 400rpx;
height: 400rpx;
}
.fontcss {
margin-top: 34rpx;
display: flex;
flex-direction: row;
font-size:28rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(0,0,0,1);
}
.fontSucCss{
font-size:28rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(0,0,0,1);
margin-left: 10rpx;
}
.successTip {
margin-top: 34rpx;
display: flex;
flex-direction: row;
}
.imgcss {
position: absolute;
width: 80rpx;
height: 80rpx;
}
.inner {
width: 90rpx;
height: 90rpx;
background: #bd9e8b;
border-radius: 50%;
position: fixed;
left: 50%;
margin-left: -45rpx;
margin-top: 152rpx;
z-index: 10;
animation-duration: 2.4s;
z-index: 10;
-webkit-animation-name: state1;
animation-name: state1;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes state1 {
0% {
opacity: .5;
-webkit-transform: scale(1);
transform: scale(1);
}

100% {opacity: 0;-webkit-transform: scale(4.5);transform: scale(4.5);
}

}
.imgcss {
position:fixed;
margin-left:-25rpx;
margin-top:17rpx;
left:50%;
width:56rpx;
height:56rpx;
}
.avatar {
position: fixed;
left: 50%;
margin-left: -43rpx;
margin-top: 155rpx;
border-radius: 100%;
width: 86rpx;
height: 86rpx;
background-color: #bd9e8b;
z-index: 11;
}
.outter {
animation-delay: 0.5s;
}
.outter1 {
animation-delay: 1s;
}
.outter2 {
animation-delay: 1.5s;
}

wifstatus.js
Page({

/**

页面的初始数据
/
data: {
isShow: true, //判断连接状态
system: ‘’, //版本号
platform: ‘’ //系统 android
},
/*
生命周期函数–监听页面加载
*/
onLoad: function (options) {
let that = this;
wx.getSystemInfo({
success: function (res) {
var system = ‘’;
if (res.platform == ‘android’) {
system = parseInt(res.system.substr(8));
}
if (res.platform == ‘ios’) {
system = parseInt(res.system.substr(4));
}
if (res.platform == ‘android’ && system < 6) {
that.openAlert(‘andriod手机版本暂时不支持’);
}
if (res.platform == ‘ios’ && system < 11) {
that.openAlert(‘ios手机版本暂时不支持’);
}
that.setData({ platform: res.platform });
that.startWifi(that);
}
})
},
startWifi: function (that) {
wx.startWifi({
success: function (res) {
console.log(res.errMsg);
that.connectWifiress(that);
},
fail: function (res) {
console.log(res.errMsg);
}
})
},
connectWifiress: function (that) {
wx.connectWifi({
SSID: ‘WondertekWireless’,
password: ‘Wondertek2019’,
success: function (res) {
console.log(res.errMsg);
setTimeout(function () {
that.setData({
isShow: false
});
}, 2000)
setTimeout(function () {
wx.navigateTo({
url: ‘…/…/pages/index/index?wificode=0’
})
}, 3000);
},
fail: function (res) {
console.log(res);
if (res.errCode == ‘12005’) {
that.openAlert(‘请先手动打开wifi’);
} else {
that.openAlert(res.errMsg);
}
}
})
},
openAlert: function (msg) {
wx.showModal({
content: msg,
showCancel: false,
success: function (res) {
if (res.confirm) {
wx.navigateTo({
url: ‘…/…/pages/index/index?wificode=1’
})
}
}
});
}
})

小程序wifi圆形扩散效果相关推荐

微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组件第一步创建项目结构打开微信开发者工具创建一个项目, ...
微信小程序环形进度条_微信小程序实现圆形进度条实例分享
本文主要和大家分享微信小程序实现圆形进度条实例,希望能帮助到大家. 小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环 ...
微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组遇新是直朋能到件第一步创建项遇新是直朋能到分览目结构 ...
ar 微信小程序_小程序可以实现AR效果了微信还为开发者提供了基础能力支持
[TechWeb]7月7日消息,据微信官方发布的消息,小程序可实现AR效果了,包括AR试穿.AR逛展等各种体验.同时,首个小程序AR动态试妆的美妆品牌小程序也正式落地,品牌商户和服务商也可以通过能力的 ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
小程序动画animation向左移动效果
今天在家做一个私活,效果类似于淘宝的筛选功能,微信小程序商品筛选,侧方弹出动画选择页面,研究了一下小程序的动画相关的文档,于是又get到了一个新的小程序技能,小程序动画animation向左移动效果. ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...

小程序wifi圆形扩散效果

小程序wifi圆形动态扩散效果

小程序wifi圆形扩散效果相关推荐

最新文章

热门文章