1、wx.createSelectorQuery
在微信小程序中,wx.createSelectorQuery
是用于创建一个 SelectorQuery
对象的方法,而 this.createSelectorQuery
是在组件中获取元素的方法。
使用 wx.createSelectorQuery
创建的 SelectorQuery
对象可以用于获取页面中的元素信息,但是它只能在页面中使用,不能在组件中使用。如果在组件中使用 wx.createSelectorQuery
,会出现获取不到元素信息的问题。
而在组件中,可以使用 this.createSelectorQuery
方法来获取组件内部的元素信息。这是因为组件是小程序中的一个独立模块,它有自己的作用域和生命周期,因此需要使用 this
来获取组件实例。
一般用于获取某个节点的当前位置,以及界面的滚动位置。
this.createSelectorQuery().select('.selector').boundingClientRect(function(res) {
console.log(res)
}).exec()
2、媒体查询
在微信小程序中,@media媒体查询不支持screen关键字,因为小程序页面是再webview中渲染的,而不是在浏览器中渲染的。
在设置样式时,可以使用 wxss
文件中的 @media
规则来根据屏幕宽度或高度设置不同的样式。
- device-width:设备屏幕的宽度,单位px
- device-height:设备屏幕的高度,单位px
- width:小程序窗口的宽度,单位rpx
- heigth:小程序窗口的高度,单位rpx
- aspect-ratio:设备屏幕的宽高比
- orientation:设备屏幕方向,可以是portrait(竖屏)或landscape(横屏)
.bg {
background:#ffffff
}
/* 当屏幕宽度小于 750rpx 时应用以下样式 */
@media (max-width: 750rpx) {
.bg {
background:#000
}
}
/* 设备宽度 单位px */
@media (max-device-width: 350px) {
.bg {
background:#000
}
}
3、图片保存到相册
用户点击保存判断是否开启了相册权限,若没有,弹出开启权限框,若已开启,直接保存图片到相册。
download() {
var that = this
wx.getSetting({
success: function (res) {
//判断是否已经授权
if (res.authSetting["scope.writePhotosAlbum"]) {
//已经授权,下载图片后保存
that.saveImageToPhotosAlbum()
} else if (!res.authSetting.hasOwnProperty("scope.writePhotosAlbum")) {
//用户第一次使用,调起授权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
//授权成功,下载图片后保存
that.saveImageToPhotosAlbum()
}
})
} else {
//已经拒绝授权,去到设置页面授权
wx.showModal({
title: "未授权添加到相册",
content: "下载素材保存到相册,需打开添加到相册的权限开关",
confirmColor: "#37c062",
confirmText: "去设置",
success(res) {
if (res.confirm) {
wx.openSetting({})
}
}
})
}
},
})
},
saveImageToPhotosAlbum() {
wx.downloadFile({
url: this.data.previewImage,
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail: function () {
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
})
}
})
}
})
},