前端开发中正在踩得坑

2023-11-24 12:03:30

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时的urlif (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, // 必填，签名，见附录1jsApiList: ["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，不填默认为linkdataUrl: "", // 如果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

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

解决办法