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

微信小程序中遇到过的问题

记录微信小程序中遇到的问题(持续更新ing)

  • 问题描述:
  • 1. WXML中无法直接调用JavaScript方法。
  • 2. css中无法直接引用背景图片。
  • 3. 关于右上角胶囊按钮。
  • 4. 数据绑定问题。
  • 5. 事件处理问题。
  • 6. 关于movable-view组件的问题
  • 7. 关于设置宽度后设置padding内容溢出的问题

问题描述:

1. WXML中无法直接调用JavaScript方法。

原因分析:
由于WXML和JavaScript是两种不同的语言,它们之间没有直接的交互方式。
解决方案:

  • 尽量在js中处理,并在WXML中显示。
  • 使用wxs,
    创建wxs文件并通过 module.exports导出
    //index.wxs文件var toFixed = function (num) {console.log(num);return num.toFixed(2);}module.exports = {toFixed: toFixed}//index.wxml文件<wxs src="./index.wxs" module="XXX"></wxs> //这样引用<view>{{XXX.toFixed(3.1415)}}</view>       //使用

返回的3.14
最后看打印结果
在这里插入图片描述
注意事项: wxs文件中不支持es6写法,let、const、export这些都是不可以的!

2. css中无法直接引用背景图片。

原因分析:
由于微信小程序的文件结构限制,CSS文件只能引用小程序的静态资源文件,如图片、字体等。
解决方案:

  • 路径改成可以直接访问的绝对路径。
background-image: url("https://pic.netbian.com/uploads/allimg/240308/012824-17098325042f18.jpg");
  • 将图片转换为base64编码。
  • 在标签上写入样式
 	<view  style="background-image: url('../xx.png')"></image>
  • 使用image标签并使用绝对定位
	<view class="box"><image class="box-bg" src="../bg.png" /></view>//css文件.box{position: relative;.box-bg{ position: absolute;} }

3. 关于右上角胶囊按钮。

原因分析:
由于css样式调整,需要自定义顶部导航栏。
解决方案:
- 官方自带的不能去掉,但是通过设置backgroundTextStyle等来设置文字颜色与背景等。

  • 在微信小程序的app.json文件中,可以设置navigationStyle属性为custom,来自定义顶部导航栏
    在这里插入图片描述

4. 数据绑定问题。

原因分析:
习惯使用this.XXX = data 或者 XXX.value = data 或直接XXX = data导致赋值不上
解决方案:
正确使用this.setData()来更新数据

this.setData({XXX: 'Data'
})

5. 事件处理问题。

**原因分析:**
习惯使用`click、@click`来绑定事件,并通过 `@click = XXX(data)` 来传参

解决方案:
在小程序中事件绑定有使用特定的语法

  • 绑定事件使用bindtap、catchtap、bindinput
  • 在事件处理函数中,使用event参数获取事件对象。或者使用data-来传递参数。

6. 关于movable-view组件的问题

原因分析:
使用movable-view滑动不生效、 想去除页面切换时滑动的动画、设置定位right、bottom等不生效

解决方案:

  • 首先movable-view组件必须放在在 movable-area 组件中,并且必须是直接子节点,否则不能移动。
  • movable-area 组件必须设置width和height属性,不设置默认为10px,不能滑动。
  • 去除页面切换时滑动的动画可以在movable-view组件中设置 animation=“{{false}}”
  • movable-view 默认为绝对定位,top和left属性为0px ,设置定位right、bottom不生效要设置left与top才行,或者在movable-view组件中设置x={{x}}y={{y}}
  • movable-view 必须设置width和height属性,不设置默认为10px。

请添加图片描述
实现代码

  //wxml<movable-area class="card-box"><movable-view class="card-view" animation="{{false}}" x="{{x}}" y="{{y}}" direction="all"><image class="card-view" src="../../../public/card.png"></image></movable-view></movable-area>//css.card-box {position: absolute;top: 0;width: 100%;height: 90vh;.card-view {width: 64rpx;height: 64rpx;z-index: 999;}
} 
//jsdata: {x: 340,y: 700,  //这里根据wx.getSystemInfoSync这个方法获取设备信息去具体计算},

7. 关于设置宽度后设置padding内容溢出的问题

原因分析:
父组件中使用padding: 0 24rpx; 然后再使用width: 100%;导致页面元素内容溢出
在这里插入图片描述
解决方案:
因为 width: 100%; 是相对于父组件的宽度计算的,而父组件的 padding 会导致父组件的实际宽度大于其内容的宽度。

  • 父元素设置box-sizing: border-box;
  • 调整子组件的宽度width: calc(100% - 48rpx);
  • 去除width: 100%;
    在这里插入图片描述

相关文章:

微信小程序中遇到过的问题

记录微信小程序中遇到的问题&#xff08;持续更新ing&#xff09; 问题描述&#xff1a;1. WXML中无法直接调用JavaScript方法。2. css中无法直接引用背景图片。3. 关于右上角胶囊按钮。4. 数据绑定问题。5. 事件处理问题。6. 关于movable-view组件的问题7. 关于设置宽度后设置…...

气象数据Grib及Python绘图

文章较长&#xff0c;却将所有常见的气象数据类型进行了详细的介绍&#xff0c;对各种方法的优劣势进行了详细分析&#xff0c;相信对于阅读者来说会有一定程度的帮助 目录 GRIB 数据格式简介 使用Python处理Grib文件 法1&#xff1a;使用pygrib库 法2&#xff1a;使用cf…...

Vue el-data-picker选中开始时间,结束时间自动加半小时

效果 思路 查阅elemnet plus官网&#xff0c;日期时间选择器type"datetimerange"这个选中开始时间并没有对应事件会被触发&#xff0c;因此思路更换成type"datetime"的两个组成一起可以通过监听开始时间v-model的值变化更新结束时间的值。 代码 日期时间…...

mac下载Homebrew安装nvm

通过Homebrew安装 - 国内下载地址 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"安装nvm brew install nvm 配置nvm环境变量 export NVM_DIR“$HOME/.nvm” [ -s “/usr/local/opt/nvm/nvm.sh” ] && . “/usr/…...

模型并行、数据并行、流水线并行以及混合并行的适用场景、优劣

模型并行、数据并行、流水线并行以及混合并行的适用场景、优劣 数据并行 适用场景:适用于模型规模相对较小,能够在单个计算设备(如 GPU)上完整运行,但训练数据量巨大的情况。例如在大规模图像分类任务中,常见的卷积神经网络模型(如 ResNet、VGG 等)在处理大规模图像数据…...

【容器化技术 Docker 与微服务部署】详解

容器化技术 Docker 与微服务部署 一、容器化技术概述 &#xff08;一&#xff09;概念 容器化技术是一种操作系统级别的虚拟化方法&#xff0c;它允许将应用程序及其依赖项&#xff08;如运行时环境、系统工具、库等&#xff09;打包成一个独立的、可移植的单元&#xff0c;这…...

MySQL——数据类型

一、常见的数据类型及分类 其中上述的数值类型包含了整形和浮点型&#xff0c;文本、二进制类型主要是字符串类型。 整数类型&#xff08;Integer Types&#xff09;&#xff1a; TINYINT&#xff1a;范围为-128到127或0到255&#xff08;无符号&#xff09;&#xff0c;用于…...

基于傅立叶神经网络(FNN)与物理信息神经网络(PINN)求解泊松方程(附Pytorch源代码)

基于傅立叶神经网络(FNN)与物理信息神经网络(PINN)求解泊松方程 一、引言 偏微分方程(Partial Differential Equation, PDE)在科学与工程领域有着广泛的应用。传统数值方法(如有限差分法、有限元法)在求解这类问题时,尽管已经非常成熟,但随着问题复杂度的增加,其计…...

FastExcel:超越EasyExcel的新一代Excel处理工具

简介 FastExcel是由原EasyExcel作者在阿里巴巴宣布停止维护EasyExcel之后推出的升级版框架。它继承了EasyExcel的所有优点&#xff0c;并且在性能和功能上进行了显著的提升和创新。 FastExcel的特点 高性能读写&#xff1a;FastExcel专注于性能优化&#xff0c;能够高效处理…...

项目优化性能监控

目录 1. 性能平台搭建 1.1 影响性能的关键要素 1.2 压力测试 1.3 压力测试指标 1.4 Jmeter 1.5 Jmeter常用插件 1.6 性能关键指标 1.7 服务器硬件资源监控 1.8 系统负载:load average 1.9 搭建压测监控平台 1.10 梯度压测&#xff1a;分析接口性能瓶颈 2. 项目优化…...

linux装git

前言 以 deepin 深度系统为例&#xff0c;安装命 令行版 Git 非常简单。 安装 注意&#xff1a;需要输入账号密码&#xff0c;否则无法进行。 打开终端&#xff0c;执行如下命令即可。 sudo apt-get install git成功 如下图所示&#xff0c;输入 git &#xff0c;命令识别即…...

2024 年度总结

时光荏苒&#xff0c;2024 年即将画上句号&#xff0c;回顾这一年的写博历程&#xff0c;有付出、有收获、有成长&#xff0c;也有诸多值得回味与反思的瞬间。 一、内容创作 主题涉猎&#xff1a;这一年&#xff0c;我致力于探索多样化的主题&#xff0c;以满足不同读者群体的…...

实验八 指针2

7-1 利用指针返回多个函数值 分数 30 全屏浏览 切换布局 作者 陈晓梅 单位 广东外语外贸大学 读入n个整数&#xff0c;调用max_min()函数求这n个数中的最大值和最小值。 输入格式: 输入有两行&#xff1a; 第一行是n值&#xff1b; 第二行是n个数。 输出格式: 输出最大…...

python修改ppt中的文字部分及插入图片

批量修改ppt中的某个模块&#xff0c;或者批量制作奖状等场景会用到&#xff1b; import os import pandas as pd from pptx import Presentation from pptx.util import Inchesfilepath/Users/kangyongqing/Documents/kangyq/202303/分析模版/批量制作/file1时段预警_副本.pp…...

C进阶-字符串与内存函数介绍(另加2道典型面试题)

满意的话&#xff0c;记得一键三连哦&#xff01; 我们先看2道面试题 第一道&#xff1a; 我们画图理解&#xff1a; pa&#xff0c;先使用再&#xff0c;pa开始指向a【0】&#xff0c;之后pa向下移动一位&#xff0c;再解引用&#xff0c;指向a【1】&#xff0c;a【1】又指向…...

Github - 如何提交一个带有“verified”标识的commit

Github - 如何提交一个带有“verified”标识的commit 前言(Why) 今天在Github上浏览某项目的commit记录的时候发现&#xff0c;有的commit记录带有verified绿色标识&#xff0c;有的带有橘色的Unverified标识&#xff0c;还有的什么都不显示。 既然我是根正苗红的作者(bushi)…...

充电桩语音提示IC方案-支持OTA远程更换语音WT2003H让充电更智能

随着新能源汽车产业的蓬勃发展&#xff0c;充电桩作为电动汽车能量补给的关键设施&#xff0c;其智能化、人性化设计日益成为行业关注的焦点。在这一背景下&#xff0c;WT2003H4-16S语音芯片方案的推出&#xff0c;无疑为充电桩的智能化升级注入了新的活力。该方案不仅提升了充…...

[2474].第04节:Activiti官方画流程图方式

我的后端学习大纲 Activiti大纲 1.安装位置&#xff1a; 2.启动&#xff1a;...

开源的Vue低代码表单设计器 form-create-designer v3.2.9 版本发布,新增10多种功能

form-create-designer 是一款开源的低代码表单设计器&#xff0c;通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单&#xff0c;提高开发者对表单的开发效率&#xff0c;节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。 项目采…...

0042__【小沐学OpenGL】Ubuntu环境下glfw的安装和使用

【小沐学OpenGL】Ubuntu环境下glfw的安装和使用_ubuntu glfw-CSDN博客 OpenGL 打开绘制窗口 学习笔记_glfwmakecontextcurrent-CSDN博客...

第一节:电路连接【51单片机+A4988+步进电机教程】

摘要&#xff1a;本节介绍如何搭建一个51单片机A4988步进电机控制电路&#xff0c;所用材料均为常见的模块&#xff0c;简单高效的方式搭建起硬件环境 一、硬件清单 ①51单片机最小控制模块 ②开关电源 ③A4988模块转接座 ④二相四线步进电机 ⑤电线若干 二、接线 三、A49…...

k8s 部署meilisearch UI

https://github.com/riccox/meilisearch-ui 拉取镜像 sudo docker pull riccoxie/meilisearch-ui:latestk8s 部署 apiVersion: v1 kind: Service metadata:name: meilisearch-uinamespace: meilisearch spec:type: NodePortselector:app: meilisearch-uiports:- port: 24900…...

在基于Centos7的服务器上启用【Gateway】的【Clion Nova】(即 ReSharper C++ 引擎)

1. 检查启动报错日志&#xff0c;目录在 ~/.cache/JetBrains/CLion202x.x.x/log/backend.202x-xx-xx_xxxx.xxxx-err.log 2. 大致可能有两种报错 a. Process terminated. Couldnt find a valid ICU package installed on the system. 这个报错只需要装一下 libicu-devel 包即可…...

【Rust自学】7.4. use关键字 Pt.1:use的使用与as关键字

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 7.4.1. use的作用 use的作用是将路径导入到当前作用域内。而引入的内容仍然是遵守私有性原则&#xff0c;也就是只有公共的部分引入进来才…...

HTML5实现喜庆的新年快乐网页源码

HTML5实现喜庆的新年快乐网页源码 前言一、设计来源1.1 主界面1.2 关于新年界面1.3 新年庆祝活动界面1.4 新年活动组织界面1.5 新年祝福订阅界面1.6 联系我们界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载结束语 HTML5实现喜庆的新年快乐网页源码&#xff0c;春节新年网…...

C++新特性||线程协程(代码解析1)

原文https://blog.csdn.net/ke_wu/article/details/144807820?sharetypeblogdetail&sharerId144807820&sharereferPC&sharesourceke_wu&spm1011.2480.3001.8118 #ifndef ZERO_THREADPOOL_H #define ZERO_THREADPOOL_H#include <future> // 用于…...

《成瘾-在放纵中寻找平衡》

安娜伦布克&#xff08;Anna Lembke&#xff09;是美国著名的精神病学家、成瘾医学专家以及《多巴胺国度》&#xff08;Dopamine Nation&#xff09;的作者。她在书中深入探讨了现代社会中的成瘾问题&#xff0c;并结合科学研究与临床经验&#xff0c;揭示了为什么现代人更容易…...

Docker搭建Skywalking

Docker搭建Skywalking 虚拟机IP&#xff1a;192.168.0.109Nacos服务地址&#xff1a;http://192.168.0.109:8848/nacosMySQL服务&#xff1a; IP&#xff1a;192.168.0.109端口&#xff1a;3306用户名&#xff1a;root密码&#xff1a;root ElasticSearch服务&#xff1a; IP&a…...

Vue axios 异步请求,请求响应拦截器

在 Vue.js 中使用 axios 进行网络请求是非常常见的做法&#xff0c;因为它提供了比原生的 Fetch API 更丰富的功能&#xff0c;并且更易于处理错误和配置。结合 Axios 的拦截器功能&#xff0c;你可以对所有的请求或响应进行预处理&#xff0c;比如添加认证头信息、统一处理错误…...

解决 ffmpeg “Unknown encoder ‘hevc_nvenc‘“

目录 项目场景: 问题描述 原因分析: 解决方案: 项目场景: ffmpeg 剪切视频 问题描述 详细报错: [vost#0:0 @ 0x46ae00] Unknown encoder hevc_nvenc 原因分析: ffmpeg 安装错误 解决方案: 重新安装ffmpeg: conda install ffmpeg 检查当前安装的 FFmpeg 是否支…...

Kafka安全优化文档:漏洞修复到安全加固

文章目录 1.1.漏洞修复1.1.1.Apache Kafka反序列化漏洞1.1.2.pm2-kafka代码执行漏洞1.1.3.Apache Kafka安全绕过漏洞1.1.4.Apache Kafka Distribution - Schema Repository跨站请求伪造漏洞1.1.5.Apache Kafka输入验证错误漏洞的补丁1.1.6.Apache Kafka信息泄露漏洞1.1.7.Apach…...

Django 中数据库迁移命令

在 Django 中&#xff0c;python manage.py makemigrations、python manage.py sqlmigrate polls 0003 和 python manage.py migrate 是与数据库迁移相关的重要命令。它们的作用和对应内容如下&#xff1a; 1. python manage.py makemigrations 功能: 此命令会根据你的模型文…...

2024 高通边缘智能创新应用大赛智能边缘计算赛道冠军方案解读

2024 高通边缘智能创新应用大赛聚焦不同细分领域的边缘智能创新应用落地&#xff0c;共设立三大热门领域赛道——工业智能质检赛道、智能边缘计算赛道和智能机器人赛道。本文为智能边缘计算赛道冠军项目《端侧大模型智能翻译机》的开发思路与成果分享。 赛题要求 聚焦边缘智能…...

前端超大缓存IndexDB、入门及实际使用

文章目录 往期回顾项目实战初始化表获取列表新增表的数据项获取详情根据ID获取详情根据其他字段获取详情 删除数据 总结 往期回顾 在之前的文章中&#xff0c;我们介绍了IndexDB vs Cookies vs Session这几个的对比&#xff0c;但是没有做实际项目的演示&#xff0c;今天我们用…...

[创业之路-229]:《华为闭环战略管理》-5-平衡记分卡与战略地图

目录 一、平衡记分卡 1. 财务角度&#xff1a; 2. 客户角度&#xff1a; 3. 内部运营角度&#xff1a; 4. 学习与成长角度&#xff1a; 二、BSC战略地图 1、核心内容 2、绘制目的 3、绘制方法 4、注意事项 一、平衡记分卡 平衡记分卡&#xff08;Balanced Scorecard&…...

形象地理解UE4中的数据结构 TLinkedListBase

大家都熟知链表&#xff0c;但不一定能快速看懂UE4中的数据结构。 TLinkedListBase表示“链接”中的一个结点&#xff0c;有三个成员&#xff1a; 一、ElementType Element; 表示具体的业务&#xff0c;例如int链条中的一个整数。 二、NextLink 表示 “下一个Node”&#…...

如何在谷歌浏览器中创建安全的密码

在数字化时代&#xff0c;网络安全变得日益重要。谷歌浏览器提供了多种工具和功能帮助用户创建和管理强密码&#xff0c;确保在线账户的安全。本文将简要介绍几种方法&#xff0c;帮助您在谷歌浏览器中创建和管理安全密码。 一、启用自动填充功能 确认密码保存功能已开启&…...

Nginx1.20.2-Linux-安装

文章目录 1.下载压缩包1.官网下载2.找到1.20.23.百度网盘 2.Linux安装1.搭建gcc环境2.上传到 /usr/local/nginx1.20.23.解压1.解压到当前目录2.删除压缩包 4.配置Nginx的编译路径1.进入nginx-1.20.22.执行内部的脚本&#xff0c;指定编译路径为/usr/local/nginx 5.编译并安装6.…...

网页版3D预览插件3dfindit

需求背景 如果你需要在浏览器上显示3D的模型&#xff0c;那么你可以看看这个3dfindit。不需要专业的代码开发&#xff0c;上传模型或者图片就行&#xff0c;他会自动生成3D预览。 效果图 // 效果图预览地址https://ksb-embedded.partcommunity.com/3d-cad-models/boa-compact…...

产品经理2025年展望

产品经理作为连接技术、设计与市场需求的桥梁&#xff0c;在快速变化的商业环境中扮演着至关重要的角色。展望2025年&#xff0c;随着技术的不断进步和消费者需求的日益多样化&#xff0c;产品经理的工作将面临更多挑战与机遇。 一、人工智能与自动化深化应用&#xff1a; 到…...

计算机找不到xinput1_3.dll无法执行怎么办?电脑缺失xinput1_3.dll文件怎么修复?

当计算机提示找不到xinput1_3.dll文件&#xff0c;导致某些程序或游戏无法执行时&#xff0c;可以采取以下步骤来修复这个问题&#xff1a; 一、了解xinput1_3.dll文件 xinput1_3.dll是Microsoft DirectX for Windows的控制模块&#xff0c;它包含了一组函数和数据结构&#…...

揭秘 Fluss 架构组件

这是 Fluss 系列的第四篇文章了&#xff0c;我们先回顾一下前面三篇文章主要说了哪些内容。 Fluss 部署&#xff0c;带领大家部署Fluss 环境&#xff0c;体验一下 Fluss 的功能Fluss 整合数据湖的操作&#xff0c;体验Fluss 与数据湖的结合讲解了 Fluss、Kafka、Paimon 之间的…...

你了解DNS吗?

你了解DNS吗&#xff1f; 一. 介绍二. DNS的工作原理三. DNS查询流程示意图四. DNS 记录类型五. DNS的安全问题与 DNSSEC 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一. 介绍 …...

pyinstaller打包exe可执行文件

cd命令符进入要打包文件路径下&#xff0c;执行&#xff1a; 1.打包单个py文件&#xff0c;在控制台执行;dist下会生成2个文件&#xff0c;一个是exe文件 pyinstaller -D happy.py (cd命令符进入要打包文件路径下&#xff0c;执行) 打包单个py文件&#xff0c;在控制台执行;…...

leetcode108:将有序数组转化为二叉搜索树

给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 示例 1&#xff1a; 输入&#xff1a;nums [-10,-3,0,5,9] 输出&#xff1a;[0,-3,9,-10,null,5] 解释&#xff1a;[0,-10,5,null,-3,null,9] 也将被视为正确…...

rust学习-初识rust

rust学习-初识rust 什么是 Rust&#xff1f;Rust 的特点什么是 Cargo&#xff1f;Cargo 的主要功能使用 Cargo 创建和管理项目Cargo.toml 文件详解常用 Cargo 命令什么是 Rustup&#xff1f;Rustup 的主要功能安装 Rustup验证安装使用 Rustup 管理工具链使用 Rustup 管理目标平…...

word怎么添加链接,点击直接到参考文献

word怎么添加链接,点击直接到参考文献 有时候并不一定非得latex https://download.csdn.net/download/qq_38998213/90199214 在Word中添加点击可直接跳转到参考文献的链接,主要有以下两种方法: 使用交叉引用和超链接结合的方法 插入参考文献: 首先,在文档中需要插入参考…...

数字赋能:制造企业如何靠“数字能力”实现可持续“超车”?

如今&#xff0c;制造业数字化转型可是个热门话题&#xff0c;全球都在积极推进。我国更是出台了一系列给力的政策来助力制造业数字化转型&#xff0c;像《中国制造 2025》就明确提出要加快制造业数字化、网络化、智能化发展&#xff0c;各省市也纷纷响应&#xff0c;从资金、税…...

C++——deque的了解和使用

目录 引言 标准库中的deque 一、deque的基本概念 二、deque的常用接口 1.deque的迭代器 2.deque的初始化 3.deque的容量操作 3.1 有效长度和容量大小 3.2 有效长度和容量操作 4.deque的访问操作 5.deque的修改操作 三、deque的应用场景 结束语 引言 在C中&#x…...

vue使用el-select下拉框自定义复选框

在 Vue 开发中&#xff0c;高效且美观的组件能极大地提升用户体验和开发效率。在vue中使用elementplus 的 el-select下拉框实现了一个自定义的多选下拉框组件。 一、代码功能概述 这段代码创建了一个可多选的下拉框组件&#xff0c;通过el-select和el-checkbox-group结合的方…...