微信小程序（总结）_微信小程序 selectorquery 设置样式

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
              })
            }
          })
        }
      })
    },