微信小程序-收藏

目录

设置swiper指示点样式

switch样式

checkbox样式

radio样式

button去边框

wxParse-微信小程序富文本解析自定义组件

表情图片解析

小程序wxs

获取view高度

iPhone X 至 iPhone X以上 型号手机 底部安全区域（底部小黑条）适配  /  获取标题栏相关信息数据

引入字体

限制用户评论内容不发特殊字符

小程序获得当前页面、上一页面、返回上一页面

小程序push数组，渲染不出来解决办法

小程序修改data中数组或者对象里面某一项的值

保存图片功能：用户取消访问相册，再次点击 调起客户端小程序设置界面

获取模糊（精确）定位及重新获取更新模糊（精确）定位功能

使用全局对象globalData

---

设置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-group checkbox{ width: 40rpx; height: 40rpx; border-radius: 50%; border: #ccc solid 1px !important; position: relative;}
checkbox-group checkbox[checked]{ border: #0FC393 solid 1px !important;}
/* checkbox-group checkbox::before{ content: "";} */
/*  */
checkbox-group checkbox .wx-checkbox-input{ width: 16rpx; height: 16rpx; border-radius: 50%; background: #ccc !important; position: absolute; left: 50%; top: 50%;
	transform: translate(-50% , -50%);
}
checkbox-group checkbox .wx-checkbox-input-checked{ background: #0FC393 !important;}
/* 去掉选择后的对勾 */
checkbox-group checkbox .wx-checkbox-input::before{ content: "";}

radio样式：

radio-group label radio{ width: 40rpx; height: 40rpx; border-radius: 50%; border: #ccc solid 1px !important; position: relative;}
radio-group label radio[checked]{ border: #0FC393 solid 1px !important;}
/* radio-group label radio::before{ content: "";} */
/*  */
radio-group label radio .wx-radio-input{ width: 16rpx; height: 16rpx; background: #ccc !important; position: absolute; left: 50%; top: 50%;
	transform: translate(-50% , -50%);
}
radio-group label radio .wx-radio-input-checked{ background: #0FC393 !important;}
/* 去掉选择后的对勾 */
radio-group label radio .wx-radio-input::before{ content: "";}

-------------------------------------------------------------

button去边框：

button::after{ border: none;}

-------------------------------------------------------------

wxParse-微信小程序富文本解析自定义组件：

解决wxParse空格不解析的问题（有些富文本编辑器把&转成&了）：
修改wxDiscode.js文件：
e = e.replace(/ /g, " "),
改成：
e = e.replace(/ /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 X 至 iPhone X以上 型号手机 底部安全区域（底部小黑条）适配  /  获取标题栏相关信息数据

app.js -> onLaunch函数内调用wx.getSystemInfo，获得手机机型相关信息数据

onLaunch: function() {
	wx.getSystemInfo({
		success: e => {
			console.log(e);
			// 获得手机型号：判断是否 iPhone X 至 iPhone X以上 型号手机，用于处理底部安全区域（小黑条）适配
			let modelmes = e.model;
			// if (modelmes.search('iPhone X') != -1 || (modelmes.search('iPhone') != -1 && parseFloat(modelmes.replace(/[^0-9|_.]/ig,"")) > 10)) {
			if (modelmes.search('iPhone X') != -1 || (modelmes.search('iPhone') != -1 && e.statusBarHeight > 20)) {
				this.globalData.modelIsIphoneX = true;
			} else {
				this.globalData.modelIsIphoneX = false;
			}
			// StatusBar：时间电量显示区域高度
			this.globalData.StatusBar = e.statusBarHeight;
			// custom：获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			// 部分老型号的苹果手机可能因未升级系统导致的无效数据时设置默认值(自定义导航栏组件所需)
			let customIphoneX1 =  {width: 87,height: 32,left: 320,right: 407,top: 48,bottom: 80,};
			let customIphoneX0 =  {width: 87,height: 32,left: 281,right: 368,top: 24,bottom: 56,};
			let custom = wx.getMenuButtonBoundingClientRect();
			console.log(custom);
			custom = custom || (this.globalData.modelIsIphoneX ? customIphoneX1 : customIphoneX0 );
			console.log(custom);
			this.globalData.Custom = custom;
			// CustomBar : 标题栏高度（包括时间电量显示区域高度）
			this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
		}
	})
}

.js -> 获取存储的手机机型相关信息数据

data: {
	modelIsIphoneX: App.globalData.modelIsIphoneX,
	StatusBar: App.globalData.StatusBar,
	CustomBar: App.globalData.CustomBar,
	Custom: App.globalData.Custom
},

.wxml
<view style="{{modelIsIphoneX ? 'padding-bottom: 68rpx;' : ''}}"></view>

-------------------------------------------------------------

引入字体

app.js -> onLaunch函数内

onLaunch: function() {
	//引入字体
	wx.loadFontFace({
		global : true,
		family: 'DIN',
		source: 'url("//construction-bank.oss-cn-hangzhou.aliyuncs.com/mini_program/images/DIN.OTF")',
		success: function(res) {
			console.log(res)
		}
	})
}

.wxss
.DIN{
    font-family: "DIN" !important;
}

-------------------------------------------------------------

限制用户评论内容不发特殊字符

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({
	//...
});


// 设置"navigationStyle": "custom"的页面 返回上一页 或 首页
doNavigateBack() {
	//页面指针数组
	var pages = getCurrentPages();
	if (pages.length > 1) {
		wx.navigateBack({
			delta: 1,
		});
	} else {
		// tabBar页面
		// wx.switchTab({
		// 	url: '/pages/index/index'
		// })
		// 普通页面
		// wx.redirectTo({
		// 	url: '/pages/index/index'
		// });
	}
}

-------------------------------------------------------------

小程序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) {
	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();
				}
			})
		}
	})
},

获取位置信息对应判断：
scope.writePhotosAlbum 改为 scope.userLocation

-------------------------------------------------------------

例：获取模糊（精确）定位及重新获取更新模糊（精确）定位功能

用户点击城市，重新设置位置数据及更新相关城市数据；
交互：点击重新获取位置时，当用户同意授权位置时，根据经纬度有变化更新数据；当用户未同意授权位置时，提示并引导用户去打开设置界面，再根据用户是否同意授权位置，同意更新数据，不同意不做操作；
wx.openSetting不可自动执行，需要用户触发执行

app.js配置设置

"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于为您提供更合适您的服务"
  },
  "scope.userFuzzyLocation": {
    "desc": "你的位置信息将用于为您提供更合适您的服务"
  }
},
注：以下 精确定位 或 模糊定位 只能设置一个
"requiredPrivateInfos":[
  "getLocation"
],
或
"requiredPrivateInfos":[
  "getFuzzyLocation"
],

.wxml
<view bindtap="againLocation">您在XX城市</view>

.js

 精确定位将
scope.userFuzzyLocation 改为 scope.userLocation
及
wx.getFuzzyLocation 改为 wx.getLocation

// 重新获取定位
againLocation(){
  this.setData({
    openSetting:false,
  })
  // 获取用户当前的授权状态
  wx.getSetting({
    success: (settingRes) => {
      console.log(settingRes)
      console.log(this.data.openSetting)
      // 判断用户未同意授权模糊位置时，提示并引导用户去打开设置界面，用户可重新选择授权功能
      if (!this.data.openSetting && typeof(settingRes.authSetting['scope.userFuzzyLocation']) != 'undefined' && !settingRes.authSetting['scope.userFuzzyLocation']) {
        wx.showModal({
          title: '需要授权获取您的位置信息',
          content: '你的位置信息将用于为您提供更合适您的服务',
          success: (data) => {
            if (data.confirm) {
              this.setData({
                openSetting:true,
                isBack:true
              })
              // 打开设置界面
              wx.openSetting({
                success: (response) => {
                  if(response.authSetting['scope.userFuzzyLocation']){
                    console.log('重新授权获取位置信息-同意');
                    // 重新获取定位
                    this.getLocation();
                  }else{
                    console.log('重新授权获取位置信息-未同意');
                  }
                },
                fail:()=>{
                  console.log('openSetting接口调用失败的回调函数');
                }
              })
            } else if (data.cancel) {
              console.log('showModal接口：用户点击取消未打开设置界面');
            }
          },
          fail: function(){
            console.log('showModal接口：调用失败的回调函数');
          }
        });
      }else{
        // 重新获取定位
        this.getLocation();
      }
    }
  })
},
// 获取位置
getLocation(){
  wx.getFuzzyLocation({
    //type: 'wgs84',
    type: 'gcj02',
    success: (res)=>{
      console.log(res);
      var latitude = res.latitude;
      var longitude = res.longitude;
      if(latitude != this.data.latitude || longitude != this.data.longitude){
        this.setData({
          latitude : res.latitude,
          longitude : res.longitude,
        });
        // 根据位置数据更新页面数据
      }else{
        wx.showToast({
          title: '位置无变化',
          icon: 'none',
          duration: 1500
        })
      }
    },
    fail: (res)=>{
      // 精确定位加上
      // if(this.data.latitude || this.data.longitude){
      //   wx.showToast({
      //     title: '操作太频繁啦~',
      //     icon: 'none',
      //     duration: 1500
      //   })
      //   return;
      // }
      console.log('用户拒绝授权获取位置信息,使用默认经纬度0 0');
      if(!this.data.openSetting){
        this.setData({
          latitude : '',
          longitude : '',
        });
        // 根据位置数据更新页面数据
      }
    },complete: (res)=>{
      // console.log(res);
      // 根据位置数据更新页面数据
    }
  });
},

-------------------------------------------------------------

使用全局对象globalData

app.js：
App({
    globalData: {
        ...
        globalmsg:null,
    },
    ...
    fun(){
        //改值
        this.globalData.globalmsg = true;
    },
    ...
});

页面中调用：
var App = getApp();
...
this.setData({
    curmsg : App.globalData.globalmsg,
});