設置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
<swiper class="square-dot" indicator-active-color="#fff" indicator-color="#fff" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{banner}}">
<swiper-item>
<view><image src="{{item.image}}" /></view>
</swiper-item>
</block>
</swiper>
-------------------------------------------------------------
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(/&nbsp;/g, " "), e = e.replace(/ /g, " "),
表情圖片解析
// 正則替換
var img = '<img src="/Public/libs/kindeditor/plugins/emoticons/images/21.gif" border="0" alt="" />'
// var reg = new RegExp('<img src="/Public/libs/kindeditor/plugins/emoticons/images/(\\d+).gif" border="0" alt="" />')
// 或 全部替換
var reg = new RegExp('<img src="/Public/libs/kindeditor/plugins/emoticons/images/(\\d+).gif" border="0" alt="" />','g')
console.log(img.replace(reg,'[$1]')); // [21]
-------------------------------------------------------------
小程序wxs（WeiXin Script)
<view></view>
<wxs module="fn">
module.exports = {
mobileManage: function(str){
return str.replace(getRegExp('(\d{3})(\d{4})(\d{4})'),'$1****$3')
}
}
</wxs>
<view></view>
<!-- 調用 -->
<view>{{fn.mobileManage(item.mobile)}}</view>
-------------------------------------------------------------
獲取view高度
wxml：
<view id='view'></view>
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
<view style="{{isIphoneX ? 'padding-bottom: 68rpx;' : ''}}"></view>
-------------------------------------------------------------
限制用戶評論內容不發特殊字符
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();
}
})
}
})
},