前端开发中正在踩得坑

最新推荐文章于 2024-12-16 11:38:58 发布
最新推荐文章于 2024-12-16 11:38:58 发布
阅读量871 收藏
点赞数
分类专栏： 前端开发问题 文章标签： vue html js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39854011/article/details/113356955
版权
本文总结了Vue开发中遇到的各种问题及解决方案，包括 vant-radio 的字符串name问题，样式scoped的使用，上线资源更新不生效，滚动问题，样式覆盖问题，微信分享iOS兼容性，iOS分享图片和描述缺失，签名失败问题，页面刷新与路由控制，iOS select 选中问题，二维码识别，favicon 404 错误，以及页面切换时的数据传输错误等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vant 使用：

1、vant-radio 中的name是字符串，回显的时候要让它选中，必须从后端获取到的接口数据用toString()也转换成字符串

2、写样式 style 中有 scoped:

如果是要强制修改全局中的样式属性，不能在scoped 中写；直接在style中修改。

3、vue 上线打包修改静态资源后不生效问题，修改了图片的名称，展示的还是原来的老图片

https://blog.csdn.net/liang526011569/article/details/80323733

4、使用overflow:scroll;当页面嵌套在APP中，下拉后无法上拉问题。

类似于将vant中的list 嵌套在中国移动的APP中，scroll滑动到最下面无法上拉的问题，可以实施。

5、样式在本地写是没问题的两个vue文件中都写了相同的类，样式不同，没有用scoped，在本地是不同的页面展示不同的样式，打包到测试环境就之后后面的样式会覆盖前面的，有一个文件中的样式不起作用。

6、vue微信分享和ios二次微信分享invalid signature解决

npm install weixin-js-sdk
页面中引入
import wx from 'weixin-js-sdk'

methods: {
	init() {
		var that = this;
		var url = encodeURIComponent(window.location.href.split('#')[0]);
		http.post(api.getSdk,url,function(data){
				let appId = data.appId;
				let timestamp = data.timestamp;
				let signature = data.signature;
				let nonceStr = data.nonceStr;
				that.initwx(appId, timestamp, signature, nonceStr);
		})	
	},
 
	initwx(appId, timestamp, signature, nonceStr) {
		var link = window.location.href;
		var imgUrl = 'https格式的图片'
		var shareData = {
			"imgUrl": imgUrl,// 分享显示的缩略图地址 ,根据自己情况而定
			"link": link,// 分享地址
			"desc": '描述',// 分享描述
			"title": '标题'// 分享标题
		};
		wx.config({
			debug: false,//调试模式
			appId: appId,// 公众号的唯一标识
			timestamp: timestamp,//生成签名的时间戳
			nonceStr: nonceStr,//生成签名的随机串
			signature: signature,
			jsApiList: ['onMenuShareTimeline', //
			'onMenuShareAppMessage'] //
		});
		wx.checkJsApi({
			jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
		});
		wx.ready(function() {
			wx.onMenuShareTimeline(shareData); //分享到朋友圈
			wx.onMenuShareAppMessage(shareData); //分享给朋友
		});
	}
},

created(){
    this.init();
},

备注：ios第二次分享 会出现invalid signature

原因分享后出现微信会在链接会自动加以下字符串，再次签名的时候，因为&特殊字符传给后台，后台未处理，需要对链接encodeURIComponent处理，就不会出现invalid问题

朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0

https://www.cnblogs.com/zishang91/p/10755488.html

7、ios的二次分享不展示图片,描述，显示链接

最近项目需要接入微信分享，按照微信的分享的流程走了一遍，跑一遍发现在安卓下毫无问题，但是iOS
下就出现了诡异的二次分享不出现图片，描述啦！
在这里插入图片描述

项目眼看上线还出现这种完了赶紧找资料；各种debug，console都是正确的。有说HTTP换HTTPS的。不是问题根本没解决。无意间看到需要把url传给后台的要把字符串作为 URI 组件进行编码。把代码赶紧试试
在这里插入图片描述
在这里插入图片描述

8、vue IOS 微信分享签名失败，二次刷新后就能成功的BUG

https://www.cnblogs.com/super-ldc/p/13377520.html
这个BUG 搞得头大了两天，心态搞TM要蹦了

安卓正常操作使用window.location.href 作为签名链接 一点毛病也没有

然后我用IOS 分享的时候第一次签名失败 然后返回了上一页再进入试着分享就能成功。这是个什么逻辑。。。自己搞懵逼了

然后我就试着把 签名的URL alert出来看看。结果发现 TM一模一样啊，为什么会config 报错签名失败呢

下面是借鉴了一个网友的记录（他写得比较明白）

问题：
在IOS手机微信端，从A页面(http://a.com/A) 跳转到B页面(http://a.com/B)后，B页面进行分享时就会报签名（invalid signature）错误。
 
分析：
从A页面跳转到B页面时，由于是使用vue-router切换，都是操作浏览器历史记录，所以ios端微信浏览器锁定的url的还是A页面的url。
 
这个时候，是不是很多人都会认为，既然页面路由变化了，那我重新请求下url签名接口，不就可以了。呵呵呵，你会发现报错：invalid signature。但是再刷新一下，又没有签名问题，尼玛，这是什么原因呢？？？
 
那么你在请求url签名接口的时候，传递的url参数又是什么呢？大概如下吧：
url1、直接是 location.href （history模式）
url2、自己拼装的 location.origin + '/#' + this.$route.pullPath （hash模式）
这个时候，你请求的接口都没问题，也能拿到签名数据。但是
 
问题就出在：你所请求的url签名地址和浏览器执行jweixin-1.x.x.js时锁定的地址 不一致、不一致、不一致。你当前请求的可能是url1或url2，而此时微信锁定的地址仍然是进入A页面时的url（因为在进入A页面是加载并执行了jweixin-1.x.x.js, 而路由变化A到B时，并没有再次执行jxinwei-1.x.x.js）。所以问题就发生了，但是你再刷新一下，jweixin-1.x.x.js重新执行，此时微信浏览器锁定的url就是你当前刷新的url地址了，所以签名又成功了。
主要是因为：
【IOS】：ios微信端，路由变化时，微信认为SPA的url是不变的。
【Android】：android微信端，路由变化时，SPA的url是会变的（官方在安卓6.2版本，才对SPA变化作了支持）
 
所以，发起签名的url必须是微信锁定的url。

解决方案：

    IOS端，把请求签名的url，保存到全局变量中。路由切换后，在调用分享接口时，使用全局变量里保存的url来请求签名
// 记录进入app时的url
    if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
        window.entryUrl = location.href.split('#')[0]
    }
    // 进行签名的时候  Android 不用使用之前的链接， ios 需要
    let signLink =  /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;最后，每次验签名使用 signLink 获取，就ok了。

以下是博主自己封装的微信分享代码：

import { post } from "../api/http";//分享api
import wx from 'weixin-js-sdk'

// export const shareTitle = '测试';
// export const shareUrl = '测试连接';
// export const shareImg = '测试图片';
// export const shareDesc = '测试详情';
export const option = {};

/**
 *分享
 * @param _this
 * @param shareTitle 标题
 * @param shareUrl 链接
 * @param shareImg 图片
 * @param shareDesc 描述
 */

export const commonShare = (_this, option) => {
  var url = ''
  var u = navigator.userAgent;
   var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isIOS) {
      url=window.entryUrl
    }else{
      url = window.location.href;
    }
  var data = {
    url: url
  };
  //console.log(data.url)
  post('main/getShareSign', data).then(res => {
    if (res.signature != '') {
      var data = res;
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名，见附录1
        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "showMenuItems", "onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
      wx.ready(function () {
        wx.showMenuItems({
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:favorite"
          ] // 要显示的菜单项，所有menu项见附录3
        });
        wx.updateTimelineShareData({
          title: option.shareTitle, // 分享标题
          link: option.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: option.shareImg, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
            // _this.$vux.toast.text('分享成功！！！');
            option.success();
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            // _this.$vux.toast.text('取消分享！！！');
            option.error();
          }
        });
        wx.updateAppMessageShareData({
          title: option.shareTitle, // 分享标题
          desc: option.shareDesc, // 分享描述
          link: option.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: option.shareImg, // 分享图标
          type: "", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function () {//微信2018年5月16日就改了，分享不管是真的分享了还是取消了分享，返回来的都是success
            // 用户确认分享后执行的回调函数
            //_this.$vux.toast.text('分享成功！！！');
            option.success();
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            //_this.$vux.toast.text('取消分享！！！');
            option.error();
          }
        });
        wx.error(function (res) {
          // config信息验证失败会执行error函数
          console.log('微信config失败：', res)
        });
      });
    }
 
  }).catch(err => {
    alert(err)
    console.log(err)
  })
};

9、vue中使用provide和inject刷新当前路由（页面）

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

3.provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

App.vue
在这里插入图片描述
TagViewBar.vue
在这里插入图片描述
TagViewBar.vue

10、iOS 中, vue使用select option，第一个选项无法第一次进入无法选中问题

解决办法

<select v-model=“userDrawBank.provinceName” @change=“selectFn(1)” >
请选择 // 加这一行
{{item.provinceName}}

11、二维码识别率低

11、这段时间，同事在做一个上传图片识别二维码的功能，由于前端识别率很低，有的照片中拍摄包含有文字或其他图片，就会识别失败。希望通过调起摄像头，来解决。要用到navigator.mediaDevices.getUserMedia，但是在本地127.0.0.1 上报错，undefined
原因

navigator.mediaDevices.getUserMedia 报错 undefined
navigator.mediaDevices.getUserMedia 目前支持的url：localhost、file  和  https
http的url下navigator.mediaDevices.getUserMedia 为undefined

12、GET http://localhost:8080/favicon.ico 404 (Not Found)

12、去除html页面中get http://127.0.0.1:8001/favicon.ico 404(Not Found)
html5页面中经常会遇见以下问题，总是看着碍眼，那么怎么解决呢？
GET http://localhost:8080/favicon.ico 404 (Not Found)
在这里插入图片描述

解决的方法：

1、做个favicon.ico文件放在根目录下，在head标签引入favicon.ico文件即可

<link href="favicon.ico" rel="shortcut icon">
或者

2、在Stack Overflow搜索到的，直接在head标签插入以下代码也OK

 <link rel="shortcut icon" href="#" />

13、最近遇到一个线上bug,在页面之间切换的时候有2个tab,这里给他们设置了点击事件goPath()，点击获取tab 的id ,从而通过id去获取菜单，并把这个id存在localstorage中。当点击页面的返回时不会触发这个事件，导致id传输错误。

在这里插入图片描述

14、H5 分页的数据删除后如何刷新页面，使得用户体验好。

15、适配问题，页面在不同手机打开下方Tab会被盖上一部分
// iphoneX 安全区域
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.iphonex-bottom {
padding-bottom: 0.3rem !important;
}
}
/iPhone XS max 适配/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
.iphonex-bottom {
padding-bottom: 0.3rem !important;
}
}
/iPhone 11 适配/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
.iphonex-bottom {
padding-bottom: 0.3rem !important;
}
}
/iPhone 12 适配/
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio:3) {
.iphonex-bottom {
padding-bottom: 0.3rem !important;
}
}
/iPhone 12Pro Max 适配/
@media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio:3) {
.iphonex-bottom {
padding-bottom: 0.3rem !important;
}
}

16、手机和电脑的keyup兼容性不同，需注意

前端开发遇到的坑
kingdalong2021的博客
04-04 491
1.元素消失的方案 (1)Visibility:hidden；元素隐藏但保留位置， (2)display: none；元素隐藏且不保留位置。 2.vue中v-if和v-show的区别 (1)v-if的原理是根据判断条件来动态的进行增删DOM元素， (2)v-show是根据判断条件来动态的进行显示和隐藏元素。 (3)v-for比v-if优先级高， 3.Css中px，em，rem的区别 (1)px像素（Pixel），相对长度单位，相对于屏幕分辨率而言。 (2)em：相对长度单位，相对于当前容器内的文本
前端开发中踩过的坑
weixin_43845328的博客
05-15 713
前言：为了能够加深和方便以后查阅，自己记录了一些我在开发中遇到的各种千奇百怪的bug。 即使代码虐我千万遍，我依旧带它如初恋。 javaScript代码开发中的细节 top变量在全局中声明报错 在全局中声明top变量会报错，是因为top已经在window中定义过，属于关键字系列。 let top = "无法使用"; console.log(top); // Uncaught SyntaxError: Identifier 'top' has already been declared onload事件.
前端开发的你，必须知道这些前端的坑
weixin_44526331的博客
03-05 425
前端是一个相对比较新的行业。但在这几年期间，随着W3C标准的不断更新以及node.js的兴起，基于node.js一系列的工具和诸多前端框架都参差不齐的浮出水面。 大多数不了解前端的人想转行前端，第一点原因是前端极其低的门槛，第二点是他们对前端的理解，普遍停留在毫无计算含量的网页布局以及和美工一样的样式设计。 计算机专业的人选择前端，是因为他们认为前端不需要过多的逻辑思维计算，他们讨厌编程。 非计...
前端 Web端 开发中的坑
酒遥的博客
10-05 201
移动端总结 通用 适配部分机型键盘收起时页面不回弹 <input id="phone" @blur="backToTop"> backToTop() { // 适配部分机型键盘收起时页面不回弹 var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }
移动前端开发的坑
麦峰强的博客
04-10 231
1. 域名劫持 https://mp.csdn.net/postedit/89177394 2.webkit不同版本兼容性问题 1、最痛恨的是红米手机，ua返回iphone，需要结合platform判断，但是还不准确，导致需要ios和android区别对待的时候就坑了。 2、是fixed的问题。这个解决办法是尽量不要用，不过ios7及以下才会出现这个问题。某些情况下红米也会有这个问题。（最近...
前端大屏自适应踩过的坑
kgjfk的博客
09-20 738
自适应大屏项目踩过的坑
阿里前端开发规范pdf
06-08
-现代软件架构的复杂性需要协同开发完成，如何高效地协同呢?无规矩不成方圆，无规范难 ...代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。
微信小程序开发经验不踩过的坑
07-15
- **2016年11月3日**：小程序公测开启，更多开发者加入到小程序的开发中来。 - **2016年12月28日**：在微信公开课上，张小龙对小程序进行了更深入的解读。 - **2017年1月9日**：首批小程序正式发布，标志着微信小...
React开发常见知识及踩过的坑
linzhongshu的专栏
06-19 954
React是一个强大而灵活的前端库，但也需要我们对其内部机制有深入的理解，以避免踩坑。希望本文能够帮助你更好地掌握React开发，写出更高质量的代码。记住，实践是检验真理的唯一标准，多写多练才能更深入理解React。
前端开发中遇到的那些坑
Change!
08-23 1024
前端开发中遇到的那些坑
前端开发遇到的坑（纯属吐槽）
电鳗的博客
04-17 6751
沟通问题！！ 没别的就是沟通问题！！！
前端开发种踩过的坑
Bao_Ge_CCQ的博客
04-24 414
今天聊聊在新公司一个多月来前端所踩的坑 规范 在公司里面，踩坑最多莫过于变量名命名、文件名命名、函数名命名、标签名命名 常量统一下划线加大写 变量统一驼峰严禁下划线，vue文件的name除了驼峰外首字母还得大写 不能使用魔术数字除了1，0，-1 文件名使用功能模块+下划线+具体功能细节，而且每个功能基本拥有一个common文件，用于存储该业务代码复用的组件和工具。对应地，最大的功能模块也有一个c...
持续记录前端开发中小坑
THINK_OF_的博客
03-14 291
1.js区分pc端还是移动手机端    这个正则匹配百度一搜一大堆，基本没啥问题，都是通过naviagtor.userAgent做正则匹配判断的    坑：华为荣耀v8自带浏览器，魅族手机自带浏览器匹配不上（我复制的那个正则匹配不了）    分析：pc端-&gt;userAgent-&gt;"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537....
前端开发问题集，以及一些踩过的坑，希望对你有帮助
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
04-03 1643
总想沉淀开发过程中遇到的问题，避免重复的查询。希望这本问题集能减少你在遇到问题时在搜索引擎中漫无目的且耗时地搜索花费的时间，提升开发效率！ 处理二进制数据流并下载为excel文件（含乱码问题） tag：二进制数据流、XHR请求方式、下载文件、乱码处理 function postXHR(url,data) { var xhr = new XMLHttpRequest(); xh......
前端开发踩过的坑及保持心态解决问题的方法
最新发布
demotang的博客
12-16 510
引言作为前端开发人员，在工作中难免会遇到各种各样的问题和困难。这些问题可能会让我们感到沮丧和无助，甚至一度想放弃。然而，只要我们保持对问题的积极态度，并学会一步步解决问题，我们就能够不断成长和进步。本篇博客将分享一些我踩过的前端开发坑，并介绍如何保持心态，培养解决问题的习惯。
前端踩过的坑
super_bigger的博客
05-20 483
1.关于对于一个异步的对象或者数组数据，直接在template里面使用该数据的子数据的属性会报错，但是视图不会影响。 2.对于类型判断的时候，如果我们直接使用结果会导致项目可读性不高，建议使用枚举来代替。 3.对于有些数据对请求回来的数据操作没有设置默认值，会导致报错例如 const length = array.array.length====>const length = array.array.length || 0 4.if else扁平化，if(){}else{}=====>if
前端开发，兼容问题（IE、wap、小程序）总结，持续更新
IronKee的博客
11-06 461
开发中碰到的一些兼容问题
vant组件库van-radio-group单选组件无法取消选中
zhuang_li_quan的博客
08-27 6675
van-radio-group组件取消反选 遇到一个需求，单选需要可以取消选中。然后我惊奇的发现vantUI组件的van-radio-group不能取消反选。 我的解决思路是这样的：设置一个旧的值，判断当前值和旧的值相等时，则将旧的值和当前值清除。 话不多说，代码如下： <van-radio-group v-model="value"> <van-radio name="new" @click="dyDeselect(0)">新客户</van-radio>
快速高效学习Web前端开发的四大要点
只有踩过坑，才能更好地理解和掌握web前端开发的技术。 因此，在学习web前端开发时，我们需要具备一定的实践能力和踩坑能力。只有具备了这些能力，才能快速有效地学习web前端开发。 最后，如果你想快速有效地学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值