前端开发工作中可能会遇到的问题及解决方法

news2024/11/18 13:45:04
  • 一、uni-app小程序中xxx代码依赖分析忽略
  • 二、uni-app弹窗列表滚动, 弹框下面的内容也跟随滚动
  • 三、uni-app小程序正常自定义组件不生效
  • 四、uni-app  popup 弹出层底部空隙问题

  • 五、uni-app小程序自定义导航栏后iOS页面可上下滑动问题解决方案

  • 六.  uni-app中的分享二维码以及保存到相册

  • 七、vue运行时报错


一、uni-app小程序中xxx代码依赖分析忽略

新的任务发生了这个问题,一启动这个大红色看着十分碍眼,好在报错提示也给了解决办法,如下图所示

"ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,

二、uni-app弹窗列表滚动, 弹框下面的内容也跟随滚动

弹窗组件代码,需要在最外层的view中加入 @touchmove.stop.prevent="moveHandle",就可以解决这个问题了

三、uni-app小程序正常自定义组件不生效

这是一个离奇的问题,正常自定义组件在页面引入,注册,使用,但是编译后居然没有显示出来而且也没有报其他的错误,这到底是为什么呢, 我也不知道…… 这个hbuilder 肯定不能逮着我一个人坑对不对,查了下,别人也遇到了这个问题,

总结下来有以下大致两种解决方法

1.每次引用新建组件,把编译器关闭后再重启

2.新建组件后,再新建一个页面,重新编译(亲测有效),新建的组件就生效了,就是那么离奇

如果有更好的方法,欢迎提出,再不想用上方这两个蠢蠢的办法了

四、uni-app  popup 弹出层底部空隙问题

如图所示,我遇到的问题是底部弹出层有一个间隙的问题,我看了下应该是样式问题, 是它自带了一个padding-bottom,于是我看了源码,这个问题就解决了

解决方法:

首先找到Popup的源码

因为设置的是底部弹出层,就着重看关于底部弹出的样式

五、 uni-app小程序自定义导航栏后iOS页面可上下滑动问题解决方案

提起这个我就想,真好啊,又是一个长知识的机会!!!(内心真实想法—把用apple的人的都抓起来) ,在安卓就好好的,偏偏它就会出问题,请看以下问题:

问题描述:
在开发小程序的过程中,自定义了导航栏,但是发现在ios中页面整体可上下移动,造成体验极差。

解决方案:
“disableScroll”:true,//ios禁止页面整体上下滑动

 {
    "path": "home/index",
    "style": {
     "navigationStyle": "custom",//关闭原生导航栏
     "disableScroll":true,//ios禁止页面整体上下滑动
   }
 },

问题描述:

如下图所示:在安卓真机和开发着工具中都是正常,但是到了大苹果(我不用大苹果我还不知道它还能左滑滑右滑滑~~~)

这是一个样式问题,所以我们看下原本的页面样式代码;

解决方案:

当时我不知道这个问题是怎么回事,后来请教了同事后仔细想想其实这个问题也很好解决,

起初设置的宽度是100%,但是下方又设置了padding内边距, 而盒子宽度默认的计算方式是content-box,下图有详细解释

所以在对应的html页面结构中的父元素中,给它的样式加上这样一句,就可以解决了

六、uni-app中的分享二维码以及保存到相册

这个应该不算是一个难点,这是因为我之前没有做过,觉得很新鲜,所以分享在这里,要实现的功能呢长这个样子,以弹窗的形式出现用户可以选择转发给好友或者是保存相册后从相册转发

1.页面结构,因为是弹窗的形式所以选用了uni-popup

<uni-popup ref="popup" animation mask-background-color="rgba(0,0,0,0.2)" @change="popChange">
			<view class="popup-container">
				<view class="inner">
					<view class="item" @click="sharePictrue">
						<text class="iconfont icon-fenxiangxiaochengxu" style="margin-right: 40rpx;"></text>
						<text class="text btn">转发给好友</text>
						<!-- <button size="mini" id="sharePictrue" style="border:none;" plain open-type="share" class="text btn">转发给好友</button> -->
						<text class="iconfont icon-xiangyou1" style="float:right"></text>
					</view>
					<view class="underline"></view>
					<view class="item" @click="saveToAlbum">
						<text class="iconfont icon-xiangcexuanze" style="margin-right: 40rpx;"></text>
						<text class="text">保存相册</text>
						<!-- <text class="iconfont icon-xiangyou1" style="float:right"></text> -->
					</view>
					<view class="underline"></view>
					<view class="cancel" @click="close">取消</view>
				</view>
			</view>
		</uni-popup>

2. js部分 ——保存相册

保存相册的前提是你有这个图片,(那之前肯定是要获取这个图片,例如通过调用接口获取图片)

uni.getFileSystemManager().writeFile   写文件

详解地址:FileSystemManager.writeFile(Object object) | 微信开放文档

uni.saveImageToPhotosAlbum   保存图片到系统相册

3. 分享二维码

wx.showShareImageMenu()

sharePictrue() {
				wx.showShareImageMenu({
					path: '../../static/ph_fit_qrcode.png' ||
						this.qrsrc
				})
			},

七、vue运行时报错

拿到一个新任务,在终端按照readme 文件指示命令运行报错,如下图所示

1.报错原因:

node 版本过高—— 刚开始我默认安装的node是最新版的,而项目是老项目,我查了下,报错原因是node 版本过高导致的,在报错提示中也有着 node-sass 的身影,所以我查了之前安装的node-sass的版本

可以看到这个版本是4.14 版本的,于是打开 npm中文网 官网

解决方法:

在控制面板中卸载之前的node ,安装对应的node版本Node.js 中文网,找到对应的node版本下载,一路安装即可,可以cmd窗口查看是否安装成功,再次按照命令安装依赖包,启动就可以啦!

总结

以上呢,就是我今天要分享的内容,希望可以帮助到屏幕前的你,bye~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1011721.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

5个关键步骤助您顺利开发跑腿小程序

作为跑腿服务的热门方式&#xff0c;跑腿小程序的开发成为了许多创业者和企业的首选。然而&#xff0c;要成功开发一款出色的跑腿小程序&#xff0c;并不是一件轻松的事情。本文将为您揭示5个关键步骤&#xff0c;助您在开发跑腿小程序的道路上顺利前行。 步骤一&#xff1a;需…

java项目之固定资产管理系统(源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的固定资产管理系统。源码和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&…

Games101作业7 蒙特卡洛路径追踪

文章目录 基本思想基本代码问题1:我们采取每次弹射都弹射N跟光线&#xff0c;此时会发生指数爆炸问题2:这是一个递归的过程&#xff0c;递归的终止条件我们还没规定优化&#xff0c;对光源直接进行采样 本文不涉及:蒙特卡洛积分的原理以及渲染方程是如何推到出来&#xff0c;而…

长胜证券:全球年内最大IPO“首秀”,标普香港创业板指数即将归零?

当地时间周四&#xff0c;美股三大股指团体上涨。到收盘&#xff0c;道指涨0.96%&#xff0c;报34907.11点&#xff1b;标普500指数涨0.84%&#xff0c;报4505.10点&#xff1b;纳指涨0.81%&#xff0c;报13926.05点。 美国8月PPI数据、零售出售月率双双超预期。美国8月PPI同比…

【Feign】feignclient发送formdata请求

文章目录 前言实操示例代码注意 常见问题formdata类型的post请求&#xff0c;为什么参数会被拼到url上&#xff1f;分析总结 RequestPart只可以接收文件吗&#xff1f;分析一些示例注意 前言 小伙伴们在使用feign进行远程调用时&#xff0c;会遇到formdata类型的post请求&…

5.docker可视化工具(Portainer)

本文操作&#xff0c;在 192.168.204.102 机器执行 安装最新版 portainer&#xff0c;请使用 portainer/portainer-ce 镜像。图片来源&#xff1a;https://hub.docker.com/r/portainer/portainer。   来这里可查看最新版本&#xff1a;https://github.com/portainer/p…

SQL 注入攻击的原理是什么

什么是 SQL 注入攻击&#xff0c;SQL 注入攻击的原理是什么 SQL 注入攻击是一种常见的网络安全漏洞&#xff0c;攻击者可以通过注入恶意 SQL 语句来攻击 Web 应用程序。本篇文章将介绍 SQL 注入攻击的原理和如何防范 SQL 注入攻击&#xff0c;并提供一些代码示例。 什么是 SQL…

数据库逻辑透明-架构真题(二十九)

&#xff08;2020年&#xff09;假设某计算机字长为32位&#xff0c;该计算机文件管理系统磁盘空间管理采用位示图&#xff08;bitmap&#xff09;记录磁盘的使用情况。若磁盘的容量为300GB&#xff0c;物理块大小为4MB&#xff0c;那么位示图的大小为&#xff08;&#xff09;…

LeetCode LCR 026. 重排链表

LCR 026. 重排链表 中等 128 相关企业 给定一个单链表 L 的头节点 head &#xff0c;单链表 L 表示为&#xff1a; L0 → L1 → … → Ln-1 → Ln 请将其重新排列后变为&#xff1a; L0 → Ln → L1 → Ln-1 → L2 → Ln-2 → … 不能只是单纯的改变节点内部的值&#xff0c…

服务拓扑串联难?eBPF为滴滴可观测带来解题新思路

上篇文章我们讲到可观测性在滴滴的实践与落地&#xff0c;更多关注的是不同观测信号之间的关联关系。那服务与服务之间的关系又如何串联&#xff0c;业界当前爆火的 ebpf 又在滴滴有着怎样的应用&#xff0c;本文为你揭晓。 背景 业务介绍&#xff1a;业务接口调用观测 滴滴可观…

基于Linux对MySQL数据库的安全加固指南(超实用--实战版)

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

零基础学前端(四)重点讲解 CSS

1. 该篇适用于从零基础学习前端的小白 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码&#xff0c;以身体感悟带动头脑去理解新知识 3. 初学者切忌&#xff0c;不要眼花缭乱&#xff0c;不要四处找其它文档&#xff0c;要坚定一个教授者的方式&#xff0c;将其学通透&#xff…

柏曼的护眼台灯怎么样?明基、书客、柏曼护眼台灯测评对比

台灯是最常见的一种照明灯具&#xff0c;基本每家每户都有着一台&#xff0c;大多数是给孩子学习使用的。而且现在的孩子学习压力都非常繁重&#xff0c;导致很多孩子早早就开始近视了。不少家长也开始重视孩子的视力健康&#xff0c;给孩子挑选护眼台灯。不过市面上的护眼台灯…

抖去推爆款视频生成器怎么制作开发?--短视频矩阵系统研发

在当今的数字时代&#xff0c;短视频已经成为一种非常受欢迎的内容形式。人们通过观看短视频来获取娱乐、学习和营销信息。然而&#xff0c;制作优秀的爆款视频并不容易&#xff0c;这需要创意、技能和时间。为了简化这一过程&#xff0c;抖去推推出了一款爆款视频生成器&#…

无CDN场景下的传统架构接入阿里云WAF防火墙的配置实践

文章目录 1.配置网站接入WAF防火墙1.1.配置网站接入方式1.2.填写网站的信息1.3.WAF防火墙生成CNAME地址 2.配置WAF防火墙HTTPS证书3.修改域名DNS解析记录到WAF防火墙4.验证网站是否接入WAF防火墙 传统架构接入WAF防火墙非常简单&#xff0c;配置完WAF网站接入后&#xff0c;将得…

KPM算法

概念 KMP&#xff08;Knuth–Morris–Pratt&#xff09;算法是一种字符串匹配算法&#xff0c;用于在一个主文本字符串中查找一个模式字符串的出现位置。KMP算法通过利用模式字符串中的重复性&#xff0c;避免无意义的字符比较&#xff0c;从而提高效率。 KMP算法的核心思想是…

【持续记录】深度学习环境配置

1080面对Transformer连勉强也算不上了&#xff0c;还是要去用小组公用的卡 完整记一个环境配置&#xff0c;方便后面自用✍️ nvidia-smi查看GPU信息 ** CUDA版本12.2 conda -V查询conda版本 22.9.0 新建conda环境 准备装python3.8 conda create --name caiman python3.8.2激…

Apollo自动驾驶平台的未来展望:从智能出行到城市管理

引言&#xff1a; 自动驾驶技术已经从科幻概念变为现实&#xff0c;而Baidu的Apollo自动驾驶平台正处于这一技术浪潮的前沿。但Apollo的潜力远远不止于此&#xff0c;它有可能引领整个城市的未来发展。本文将探讨Apollo自动驾驶平台在未来的展望&#xff0c;从智能出行到城市管…

VS Code用AI写代码:Codeium插件

文章目录 Codeiumchat代码生成 Codeium Codeium是基于边缘计算的代码AI工具&#xff0c;提供超过70种编程语言的代码补全、对话、搜索等功能&#xff0c;相当霸道。 在插件栏搜索到Codeium之后&#xff0c;需要科学上网安装&#xff0c;安装完成后会提示注册。注册之后&#…

这应该是Linux用户与用户组最详细的知识了吧!

【微|信|公|众|号&#xff1a;厦门微思网络】 Linux学习专栏​ 1、用户和用户组文件 在 linux 中&#xff0c;用户帐号&#xff0c;用户密码&#xff0c;用户组信息和用户组密码均是存放在不同的配置文件中的。 在 linux 系统中&#xff0c;所创建的用户帐号和其相关信息 (密…