设置swiper指示点样式
.wxss
swiper .wx-swiper-dots { width: 100%; padding-left: 20rpx; box-sizing: border-box;
display: flex; justify-content: flex-start; align-items: center;
}
swiper .wx-swiper-dot { width: 10rpx; height: 10rpx; border-radius: 50%; margin: 0 10rpx !important; background-color: #fff; opacity: 1;}
swiper .wx-swiper-dot.wx-swiper-dot-active { width: 14rpx; height: 14rpx; border-radius: 0; background-color: #fff; opacity: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/*swiper .wx-swiper-dot.wx-swiper-dot-active::after { content: ""; width: 14rpx; height: 14rpx; border-radius: 0; margin: auto; border: #f00 solid 2px; position: absolute; top: 0rpx; left: 0rpx; right: 0; bottom: 0;}*/
.wxml
-------------------------------------------------------------
switch样式:
/* 正常状态 */
switch .wx-switch-input{}
switch .wx-switch-input::before{}
switch .wx-switch-input::after{}
/* 选择状态 */
switch[checked] .wx-switch-input{ border: #f00 solid 1px !important; background-color: #f00 !important;}
switch[checked] .wx-switch-input::before{}
switch[checked] .wx-switch-input::after{}
/* 或 */
switch .wx-switch-input-checked{ border: #f00 solid 1px !important; background-color: #f00 !important;}
switch .wx-switch-input-checked::before{}
switch .wx-switch-input-checked::after{}
checkbox样式:
/* 正常状态 */
checkbox .wx-checkbox-input{}
checkbox .wx-checkbox-input::before{}
checkbox .wx-checkbox-input::after{}
/* 选择状态 */
checkbox[checked] .wx-checkbox-input{ border-radius: 50%; color: #fff !important; border: #f00 solid 1px !important; background-color: #f00 !important;}
checkbox[checked] .wx-checkbox-input::before{}
checkbox[checked] .wx-checkbox-input::after{}
/* 或 */
checkbox .wx-checkbox-input-checked{ border-radius: 50%; color: #fff !important; border: #f00 solid 1px !important; background-color: #f00 !important;}
checkbox .wx-checkbox-input-checked::before{}
checkbox .wx-checkbox-input-checked::after{}
radio样式:
/* 正常状态 */
radio .wx-radio-input{}
radio .wx-radio-input::before{}
radio .wx-radio-input::after{}
/* 选择状态 */
radio[checked] .wx-radio-input{ border: #f00 solid 1px !important; background-color: #f00 !important;}
radio[checked] .wx-radio-input::before{}
radio[checked] .wx-radio-input::after{}
/* 或 */
radio .wx-radio-input-checked{ border: #f00 solid 1px !important; background-color: #f00 !important;}
radio .wx-radio-input-checked::before{}
radio .wx-radio-input-checked::after{}
-------------------------------------------------------------
wxParse-微信小程序富文本解析自定义组件:
解决wxParse空格不解析的问题(有些富文本编辑器把&转成&了):
修改wxDiscode.js文件:
e = e.replace(/ /g, " "),
改成:
e = e.replace(/ /g, " "), e = e.replace(/ /g, " "),
表情图片解析
// 正则替换
var img = ''
// var reg = new RegExp('')
// 或 全部替换
var reg = new RegExp('','g')
console.log(img.replace(reg,'[$1]')); // [21]
-------------------------------------------------------------
小程序wxs(WeiXin Script)
module.exports = {
mobileManage: function(str){
return str.replace(getRegExp('(\d{3})(\d{4})(\d{4})'),'$1****$3')
}
}
{{fn.mobileManage(item.mobile)}}
-------------------------------------------------------------
获取view高度
wxml:
js:
var query = wx.createSelectorQuery();
query.select('#view').boundingClientRect()
query.exec(function (res) {
//console.log(res);
console.log(res[0].height);
})
-------------------------------------------------------------
iPhone 11、iPhoneX 底部安全区域(底部小黑条)适配
app.js -> onLaunch函数内调用wx.getSystemInfo,获得手机型号(res.model),并设置缓存变量
onLaunch(e) {
// iPhone 11、iPhoneX 底部安全区域
wx.getSystemInfo({
success: res => {
let modelmes = res.model;
if (modelmes.search('iPhone X') != -1 || modelmes.search('iPhone 11') != -1) {
wx.setStorageSync('modelIsIphoneX', true);
}else{
wx.setStorageSync('modelIsIphoneX', false);
}
}
})
},
.js -> 获取存储的手机型号值
onShow: function() {
// iPhone 11、iPhoneX 底部安全区域
this.setData({
isIphoneX: wx.getStorageSync('modelIsIphoneX')
})
},
.wxml
-------------------------------------------------------------
限制用户评论内容不发特殊字符
let reg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
if(reg.test(comments)) {
//if(comments.match(reg)) {
comments = comments.replace(reg, '');
}
-------------------------------------------------------------
小程序获得当前页面、上一页面、返回上一页面
//页面指针数组
var pages=getCurrentPages();
//上一页面指针
var prepage=pages[pages.length-2];
//操作上一页面
prepage.setData({
//...
});
//返回上一页面
wx.navigateBack({
delta: 1,
});
-------------------------------------------------------------
小程序push数组,渲染不出来解决办法
let lists = [...this.data.lists]
lists.push({key:'aaa'},{key:'bbb'})
this.setData({lists:lists})
-------------------------------------------------------------
小程序修改data中数组或者对象里面某一项的值
data:{
list:{
data1:{'key':'999'},
data2:[10,20,30,40]
},
},
fun: function () {
// 普通字符串拼接
let num = "list.data1.key";
this.setData({
[num] : 888
})
// 或
let num = "list.data1";
this.setData({
[num + '.key'] : 888
})
let index = 1;
this.setData({
['list.data2[' + index + ']']: 25
})
},
-------------------------------------------------------------
保存图片功能:用户取消访问相册,再次点击 调起客户端小程序设置界面
//保存海报图片
saveImg(e) {
let This = this;
if(!This.data.ifSetting){
wx.getSetting({
success(res) {
console.log(res.authSetting);
if(typeof(res.authSetting['scope.writePhotosAlbum']) != 'undefined'){
if(!res.authSetting['scope.writePhotosAlbum']){
wx.openSetting({
success(res) {
console.log(res.authSetting);
}
})
}else{
This.setData({
ifSetting: true
});
}
}
}
})
}
wx.downloadFile({
url: e.currentTarget.dataset.url,
success(res) {
wx.showLoading({
title: '下载中',
})
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
This.setData({
ifSetting: true
});
wx.showToast({
title: '保存海报成功',
icon: 'success',
duration: 2000
})
},
fail(){
wx.hideLoading();
}
})
}
})
},