- 博客(57)
- 收藏
- 关注
RSS订阅原创 vue项目多个不同的服务器请求地址管理
多服务器请求地址的情况下，axios请求封装中，需要根据不同的请求地址创建不同的axios对象，通过axios.create()设置不同的baseURL地址。在后续封装请求API时，根据不同的接口使用不同的axios对象即可实现同一个vue项目请求不同的服务器地址。在vue项目开发过程中，获取不同的数据可能会出现需要请求多个不同服务器地址的域名，这个时候需要对不同域名的请求地址进行管理以及跨域的代理。这是单一服务器请求地址的写法，直接在axios.defaults选项中配置baseURL地址。
2023-11-28 15:41:32
1855
原创 美团小游戏rpk包对接流程小记
原因可能是美团CLI工具版本差异的问题，有碰到过美团CLI工具更新到最新版本之后，debug调试上传代码一直失败，说包体超过限制大小的情况，回退美团CLI工具至低版本重新debug没有问题重新上传。美团游戏开放平台文档中有说明，API接口是与微信小游戏高度一致的，能自动兼容wx.前缀的接口，意味着可以直接使用微信小游戏包转美团包。但是实际操作过程中，直接使用微信小游戏包转包，除了API接口需要注意之外，还会有各种语法兼容的问题，很多微信小游戏正常运行的语法，在美团小游戏上就会报语法错误，需要重复调试解决。
2023-11-28 15:00:42
728
原创 微信小程序data-item设置获取不到数据的问题
*{{item}}等同于{{item}}注意： 花括号和引号之间如果有空格，将最终被解析成为字符串{{item}}等同于{{item}}另外：花括号内，花括号与变量之间允许存在空格官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.htmlend。
2023-08-14 16:15:22
1771
原创 Vue 3 + vite技术架引入静态文件的问题（require和import方式）
研究了一下才发现，好像vite引入静态资源或者插件啥的，不用require()引入，好像只能使用import引入。郁闷，require()挺好用的捏，居然不行了。使用require()引入可以在data()里面，return返回自定义的数据时，直接挂钩，使用import引入就只能提前引入。使用Vue 3 + vite技术架开发过程中，引入静态资源时，习惯性使用require()引入，突然发现报错了。
2023-06-28 12:15:40
2204
原创 Vue+vite创建项目关于vite.config.js文件的配置
vue-cli 创建的项目，项目配置文件文件名为vue.config.js,webpack 创建项目的项目配置文件文件名为webpack.config.js，而vite工具构建完成的项目，项目配置文件文件名为vite.config.js。Vue项目创建时，我们见过vue-cli 创建项目和webpack 创建项目等方式。创建完成的项目，最明显的去别就是，项目配置文件命名不同，当然，配置语法也有不同。根据需要添加自定义配置，比如项目运行时的配置及项目打包输出的打包配置。
2023-06-27 17:59:51
3802
原创 Vue 2和Vue 3路由Router创建的区别简记（在main.js文件中引入的区别和router的js文件中创建语法的区别）
Vue 2到Vue 3的改版升级，同样的带来Vue Router的升级。创建Vue项目之后，我们可以在package.json文件中看到，Vue 2创建的项目往往是与Vue Router 3.X版本搭配的，而Vue 3创建的项目与Vue Router 4.X版本搭配。Vue 3版本则改为在createRouter()API中通过history参数来设置，且history参数是必须的，如果不填会报错。
2023-06-07 18:13:21
877
原创 git仓库新建项目第一次推送代码流程记录
遇到这个报错基本上就是无法上传，用https和SSH链接都一样，原因是当前用户没有生成公钥，且没有将公钥添加至git仓库后台，无法对推送账号进行合法性验证，拒绝连接。连接目标仓库：git remote add origin “url” （说明：url是在git仓库创建项目生成的仓库地址。换了个坑之后，公司改用SVN管理代码，隔了好长时间没用git，突然又捡起来，有点懵逼，简单记录一下。电脑安装git之后，在项目父文件夹处，右键选择“Git Bash Here”打开git小黑窗。
2023-05-12 14:39:15
940
原创 前端使用crypto-js加解密的封装
crypto-js是一个纯JS的加密算法类库，方便前端对重要数据信息进行加解密操作。crypto-js是Google开发的，目前已经支持MD5、AES、RSA、DES、Rabbit、RC4、Triple DES、SHA-1、SHA-256、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等算法加解密。其实我没找到国内文档，这里就不贴了。
2023-05-09 18:55:32
381
原创 vue导航守卫（路由守卫），包括V3、V4版本的区别
这和 router.beforeEach 类似，因为它在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。全局路由守卫就是全局设置的路由守卫，每一个路由都会调用，分为全局前置守卫（beforeEach）、全局解析守卫（beforeResolve）和全局后置钩子（afterEach）。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
2023-05-09 16:17:25
1145
1
原创 (vue、react)使用axios请求的接口状态监听处理
完整流程1、引入axios对象：2、设置请求地址：3、请求超时时长设置：4、设置请求头：5、请求接口的状态监听及处理（敲黑板！重点！重点！重点！）：（1）请求前拦截处理：箭头函数写法（比较推荐）使用function的写法（2）请求响应处理箭头函数写法使用function的写法差不多就这样。来一份完整代码end如果对你有帮助，记得点个赞噢（~~）
2023-05-05 12:35:04
863
原创 微信小游戏/微信小程序直接唤起授权面板wx.getSetting()、wx.getUserInfo()、wx.getUserProfile()、wx.createUserInfoButton()
获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
2023-04-14 17:28:51
824
原创 移动端横竖屏监听小记（window.orientation、orientation）
简单逼逼两句：不干别的，就是监听，其实是老属性了，监听window.orientation的数值做判断，其实就是旋转角度。判定之后做相应处理就行啦。移动端业务开发中经常会碰到横竖屏的需求，要么需要做适配，要么也得给个提示，增强用户体验。如果只是搞css样式，用第二种比较好，如果还要做相应的逻辑处理，那就搞第一种。媒体监听orientation属性，再对css样式做处理。
2023-03-27 18:53:01
1211
原创 vue路由中component的动态引入（import、require的各种写法）
常用写发，先用import通过路径引入组件对象，再赋给component。直接“@”到目标主文件夹，不用敲那么多点点点。
2023-03-24 19:37:43
5614
原创 vue语法检查工具eslint报错小记（error Unexpected trailing comma、Extra semicolon、error ‘loadingInstance‘ is nev）
vue项目开发中开启语法检查工具eslint，尤其是接手别人的代码继续开发时，如果不注意语法习惯，项目运行时会出现一堆warning、error，乍一看就头大，仔细以看也没啥。语法检查工具eslint对符号也有严格限制，每一行代码，如果不是语法需要，最后加上逗号或者分号结尾，会被判定多余，不影响运行，但是会error红牌。第二：如果项目已经使用eslint，直接在package.json文件注释eslint或直接删除，比较粗暴，谨慎操作；不检查某个文件，写在文件首行，对整个文件生效。尾部意外出现多余逗号。
2023-03-22 12:36:18
1173
原创 微信小程序云开发服务怎么关闭？
点击右上角的“设置”按钮，进入云开发环境管理界面。点击环境名称的内容，会展现“我的环境”以及管理按钮。（PS：扫码验证时候提示删除成功，但是你重新进入这个管理界面可能还会看到原开发环境还在，猜测可能要这个云服务到期之后才真正生效。**来源：**使用微信开发者工具创建项目时，后端服务这一块会默认选择微信云开发，项目创建之后会配置一个云开发环境。在环境管理界面可以看到当前配置的云服务环境，后面会有蓝色“删除”按钮，二话不说，直接点删除。**查看云服务：**微信开发者工具打开项目，可见菜单云服务选项。
2022-09-19 12:20:39
4659
原创 js监听页面滚动
意义：当滚动距离scrollTop + 可视区域高度ch = 总高度sh时，则滚动条滚动到底部，可以执行相关事件代码，如列表滚动到底部自动加载更多等。
2022-09-16 21:03:29
11228
1
原创 vue项目设置打包后的静态文件访问路径
*啰嗦一下：**相同域名下可能会存在两份相关或不相关的代码，需要通过切换文件夹路径进入不同项目时，需要在项目打包输出代码时设置静态文件的访问路径（vue、react都要）。**静态文件访问路径说明：**项目的静态文件访问路径在本地运行和服务器访问是有区别的，默认状态下服务器上的项目代码，访问路径是从服务器根目录开始。vue项目的最终项目文件需要经过打包输出，静态文件的访问路径需要在vue.config.js文件中设置。**H5中的访问设置：**在H5中，静态文件访问路径的区别。...
2022-08-31 16:04:15
15690
原创 js判断字符串是否包含空格及清除空格方法小结
js判断字符串是否包含空格及清除空格方法小结一、判断字符串是否包含空格：方法1：RegExp()正则表达式匹配var textStr= "khj kshdf";var judgeFn = new RegExp(/\s+/g);if (judgeFn.test(textStr)) { console.log("【结果】：内容包含有空格!");}运行结果：方法2：trim()方法trim()方法：去除字符串首尾空格应用：var textStr= " ";if (textSt
2022-05-23 17:50:10
11823
原创 第三方（网页/小程序）唤醒微信app小结
第三方（网页/小程序）唤醒微信app小结在实际业务中，要在第三方网页或者小程序实现唤醒微信app，其实很简单，贴代码：<a href="weixin://"></a>或者window.location.href = 'weixin://'或者window.location.replace('weixin://')其实就是将跳转地址设为“weixin://”。结果：注意：之前在实现这个业务需求时，曾求助过度娘，找到的帖子内容清一色都是这个实现方式，但其实在不同设
2022-04-23 18:12:45
2442
原创 vant ui picker选择组件展示值text设置遇到的坑
vant ui picker选择组件展示值text设置遇到的坑做移动端项目时，用了vant UI组件，使用picker选择组件时遇到了些问题，简单记录下。在官方文档的例子中，picker组件默认展示的字段是columns数据中的text字段在实际项目中，接口返回的数据往往是没有text字段的，因此需要设置指定的展示字段。在官方文档中，说明需要使用columns-field-names属性设置，属性值为object数据，如：{ text: ‘text’, values: ‘values’, chil
2022-02-19 20:15:11
4006
6
原创 js简单的移动端横竖屏适配
js简单的移动端横竖屏适配1、先判断处于横屏还是竖屏状态：简单的判断方式（不是很严谨）：竖屏： 宽度 < 高度；横屏：宽度 > 高度；function getWandH() { let W = document.documentElement.clientWidth || document.body.clientWidth; let H = document.documentElement.clientHeight || document.body.clientHeight
2022-01-20 12:35:05
2794
原创 vue 获取当前路由地址
vue 获取当前路由地址1、router和$route的区别$router: 路由操作对象，只写。需要对路由进行操作时使用。如路由跳转$route: 路由信息对象，只读。获取路由相关信息时使用。如获取当前路由地址2、获取当前路由地址：this.$route.path原生方法：window.location.href3、获取路由参数（query/params传参）:query传参时：路由跳转：this.$router.push({ name: 'name', query: { id:
2022-01-14 18:28:47
18379
4
原创 js轮询（延时setTimeout）
在vue项目中显现延时轮询data() { return { initTimer: null, count: 0 } },定义轮询方法：polling (data) { let _this = this; if (_this.count == 3) { clearTimeout(_this.initTimer); console.log('【轮询结束】') } else {
2022-01-12 12:26:56
2026
原创 VUE2.0全局方法注册
vue2.0全局方法注册上一篇简单记录了时间格式方法，如果将其注册为全局方法，就可以在项目中随时调用。1、新建common.js文件：新建js文件，定义函数并将其暴露出来。function formatDate(date, format) { let yFull = date.getFullYear(); let y = date.getYear(); let m = date.getMonth() + 1; let d = date.getDate(); l
2022-01-04 12:24:07
1074
原创 原生js时间格式化方法封装
原生js时间格式化方法封装创建formatDate函数，传入date（时间）和format（格式）两个参数，简单判断format返回相应格式的时间注意：getMonth()方法获取到的月份会比实际月份小1，因此需要加1function formatDate(date, format) { let yFull = date.getFullYear(); let y = date.getYear(); let m = date.getMonth() + 1; let d =
2021-12-28 19:15:18
440
原创 vue项目中vant ui日期选择器Calendar踩坑记录（弹出、minDate设置...）
vue项目中vant ui日期选择器Calendar踩坑记录（弹出、minDate设置…）感觉vant ui组件库在移动端使用还挺方便，最近上手，顺便记录下1、vue项目使用Calendar日历组件实现弹出：vant ui是一款小程序ui组件库，官方文档也是小程序的写法，在vue项目中使用写法有些不同。直接v-module指令控制。<van-calendar type="range" v-model="showCalendar" title='请选择日期' />data() {
2021-12-28 19:08:18
9084
原创 vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）在vue项目中，存在从列表页跳转到详情页查看，而后又返回列表页的操作时，如果列表过长，我们往往希望从详情页返回列表页时，列表页能留在我们滑动的位置，即保留页面状态，通过设置vue路由的keepAlive属性可以实现。vue中的路由跳转默认都是刷新的，默认情况下从详情页返回列表页，列表页重新初始化。设列表页路由为’/list’，在meta中将keepAlive属性设置为truekeep-alive是vue中的一个抽象组件，被keep-
2021-11-05 18:33:31
2932
原创 iframe页面中打开滴三方链接
iframe页面中打开滴三方链接场景：在A界面中iframe嵌入界面B，在B界面中打开第三方链接C1、最常用的方式window.location.href：window.location.href = C；说明：window.location.href 方式在window系统浏览器打开是有效的，在安卓手机浏览器打开也是有效的，在IOS系统手机中打开无效。2、parent.location.href方式：parent.location.href = C；说明：parent.location.hr
2021-11-04 16:30:47
2077
原创 vue项目实现复制内容到剪切板
vue项目实现复制内容到剪切板介绍vue项目中实现复制内容到剪切板的两种实现方式：1、execCommand(‘Copy’)方法：(function () { document.oncopy = function (e) { e.clipboardData.setData('text', '要复制的内容'); e.preventDefault(); document.oncopy = null; }})(
2021-11-04 15:54:25
4644
原创 vue项目中字符串换行显示（返回的数据包含‘\r\n’字符）
vue项目中字符串换行显示（返回的数据包含‘\r\n’字符）在vue项目中，请求后端接口获取到的数据是一整条字符串，如：‘1、和加速度和环境，\r\n2、技术的进步是否，\r\n3、讲述的就是不对’（数据是随意的，各位大佬别纠结（~~））这种格式的文本数据我们希望在界面中展示是换行的， 如下：1、和加速度和环境，2、技术的进步是否，3、讲述的就是不对但是在vue项目中，数据渲染时无法识别换行符‘\r\n’处理方法：先定义一个字符串数据var str = '1、和加速度和环境，\r\n2
2021-10-14 21:13:25
28250
5
原创 js判断移动端PC端
js判断移动端PC端用js如何判断用户通过移动端还是PC端来访问页面？涉及的知识点：window.navigator：window.navigator包含访问者的浏览器信息，包括浏览器appCodeName（代号）、appVersion（版本）、appName（名称）、userAgent（用户代理）等信息，window.navigator 对象在编写时可不使用 window 这个前缀。navigator.navigator用户代理属性navigator用户代理属性是一个只读的字符串，声明了浏览器
2021-09-29 19:05:13
195
原创 移动端调试神器vconsole小结
移动端调试神器vconsole前端开发过程中，往往会出现开发时在电脑中模拟移动端都是正常的，但真正在移动端运行时会出现偏差，而在移动端中又不能像在电脑浏览器中随时查看浏览器console，检查问题，这时候就需要用上移动端调试神器vconsole。vconsole 在H5中使用：在H5中使用vconsole直接在script 标签中引入（下面的示例代码引入的是3.9.0的版本）：<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9
2021-09-27 12:18:53
2249
原创 vue组件递归（组件内引入自己）
vue组件递归（组件内引入自己）今天看到大佬在vue项目中有个写法，在组件引用自身，一时觉得神奇，从未用到过，今天记录下。1、现在组件内export default {}中设置好name值。2、组件内引用是直接使用同名标签name命名时注意与关键字同名。如果对你有帮助，记得点赞噢（~~）...
2021-08-27 21:26:13
1811
原创 三元运算符及“??”和“?.”的意义
三元运算符及“??”和“?.”的意义1、三元运算符：三元运算符是一种固定的运算格式，语法格式为 “a ? b : c”， 其意义为：a为判断条件，如果a成立，则取b的值，如果a不成立，则取c的值。其中某些条件下a可以为b或者可以为c。比如a是一个有数值的key值，则可以判断a在有值时取a的值，即“a ? a : c”。b、c可以为空或null。2、“??”运算符：”??“是一个逻辑操作符，语法格式为a ?? b。其意义为：当a为 null 或者 undefined 时，返回a的值，否则返回b的值
2021-08-27 21:14:29
5400
5
原创 js实现指定dom元素滚动到可视窗口
js实现指定dom元素滚动到可视窗口const rollDom = document.getElementById('domId') // 获取想要滚动的dom元素rollDom.scrollIntoView({ block: 'center' }) // 通过scrollIntoView方法滚动到可视窗口中间block的值：start、center、end、nearest如果对你有帮助，记得点赞噢（~~）...
2021-08-17 18:29:57
1331
原创 关于CSS :hover选择器的用法（控制子元素样式、控制同级元素样式）
关于CSS :hover选择器的用法（控制子元素样式、控制同级元素样式）1、hover定义：:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。2、支持的浏览器：3、:hover控制自身样式：<div class="aa"></div><style> aa:hover {
2021-08-05 12:34:49
26279
6
原创 IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题在iOS系统中打开网页，input框输入时，输入框获取焦点的时候页面会放大，如果没有经过设置，页面放大之后就不会自动还原。使内容撑开浏览器，底部产生左右滑动的滚动条，相当恶心。原因：没有禁止页面缩放。解决：在html文件的标签中加入下面代码。听说这个方法可能不会百分百生效（iPhone X
2021-08-04 19:33:39
1287
原创 vue 项目无痕刷新页面，router-view控制
vue 项目无痕刷新页面，router-view控制vue项目开发过程中，需要在页面提交表单信息之后清空还原，即恢复页面初始状态，第一想法就是对当前页面刷新，重新加载。想起location.reload()方式和this.$router.go(0)方式跳转，但两种方式都会出现明显的闪屏（即页面出现明显空白时间），因此研究一番之后采用router-view控制方式：一、设置App.vue文件： 通过true和false值控制页面路由部分的显隐， 代码：<template>
2021-08-03 19:59:53
874
空空如也
vue3+vite开发项目在华为手机自带浏览器白屏
2023-11-28
vue3+vite的低版本浏览器兼容问题
2023-11-28
TA创建的收藏夹 TA关注的收藏夹
TA关注的人