当前位置: 首页 > news >正文

微信小程序(总结)

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 = thiswx.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})}})}})},

http://www.lryc.cn/news/339572.html

相关文章:

  • C#医学实验室/检验信息管理系统(LIS系统)源码
  • Linux驱动编程-module_platform_driver注册platform_driver
  • 论文解读 --- 《针对PowerShell脚本的有效轻量级去混淆和语义感知攻击检测》
  • 在Spring Boot实战中碰到的拦截器与过滤器是什么?
  • 数据可视化基础与应用-04-seaborn库人口普查分析--如何做人口年龄层结构金字塔
  • 软考之【系统架构设计师】
  • LigaAI x 极狐GitLab,共探 AI 时代研发提效新范式
  • 如何看待2023年图灵奖
  • 《云原生安全攻防》-- 云原生攻防矩阵
  • 自然语言处理: 第二十七章LLM训练超参数
  • Linux使用C语言实现Socket编程
  • Swin Transformer——披着CNN外皮的transformer,解决多尺度序列长问题
  • 数据结构排序算法
  • 【深度剖析】曾经让人无法理解的事件循环,前端学习路线
  • Spring 事务失效总结
  • K8S节点kubectl命令报错x509: certificate signed by unknown authority
  • 【HTML】制作一个简单的实时字体时钟
  • servlet的三个重要的类(httpServlet 、httpServletRequst、 httpServletResponse)
  • 【软考】设计模式之命令模式
  • 波奇学Linux:ip协议
  • Efficient Multimodal learning from data-centric perspective
  • ubuntu下交叉编译ffmpeg到目标架构为aarch架构的系统
  • 【Linux C | 多线程编程】线程同步 | 条件变量(万字详解)
  • 【高阶数据结构】哈希表 {哈希函数和哈希冲突;哈希冲突的解决方案:开放地址法,拉链法;红黑树结构 VS 哈希结构}
  • 嵌入式之计算机网络篇(七)
  • C++|运算符重载(1)|为什么要进行运算符重载
  • 【ARM 裸机】汇编 led 驱动之烧写 bin 文件
  • 计算机网络之CIDR
  • 【无标题】系统思考—智慧共赢座谈会
  • 【Linux C | 多线程编程】线程同步 | 互斥量(互斥锁)介绍和使用