柚子快報邀請碼778899分享：微信小程序（總結）
柚子快報邀請碼778899分享：微信小程序（總結）
1、wx.createSelectorQuery
在微信小程序中，wx.createSelectorQuery 是用于創(chuàng)建一個 SelectorQuery 對象的方法，而 this.createSelectorQuery 是在組件中獲取元素的方法。
使用 wx.createSelectorQuery 創(chuàng)建的 SelectorQuery 對象可以用于獲取頁面中的元素信息，但是它只能在頁面中使用，不能在組件中使用。如果在組件中使用 wx.createSelectorQuery，會出現(xiàn)獲取不到元素信息的問題。
而在組件中，可以使用 this.createSelectorQuery 方法來獲取組件內(nèi)部的元素信息。這是因為組件是小程序中的一個獨立模塊，它有自己的作用域和生命周期，因此需要使用 this 來獲取組件實例。
一般用于獲取某個節(jié)點的當前位置，以及界面的滾動位置。
this.createSelectorQuery().select('.selector').boundingClientRect(function(res) {
console.log(res)
}).exec()
2、媒體查詢
在微信小程序中，@media媒體查詢不支持screen關鍵字，因為小程序頁面是再webview中渲染的，而不是在瀏覽器中渲染的。
在設置樣式時，可以使用 wxss 文件中的 @media 規(guī)則來根據(jù)屏幕寬度或高度設置不同的樣式。
device-width:設備屏幕的寬度，單位pxdevice-height:設備屏幕的高度，單位pxwidth:小程序窗口的寬度，單位rpxheigth:小程序窗口的高度，單位rpxaspect-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) {
//判斷是否已經(jīng)授權
if (res.authSetting["scope.writePhotosAlbum"]) {
//已經(jīng)授權，下載圖片后保存
that.saveImageToPhotosAlbum()
} else if (!res.authSetting.hasOwnProperty("scope.writePhotosAlbum")) {
//用戶第一次使用，調(diào)起授權
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
//授權成功，下載圖片后保存
that.saveImageToPhotosAlbum()
}
})
} else {
//已經(jīng)拒絕授權，去到設置頁面授權
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
})
}
})
}
})
},
柚子快報邀請碼778899分享：微信小程序（總結）
相關文章
本文內(nèi)容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權，聯(lián)系刪除。
Tophatter跨境頂尖購
