- 博客(147)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 H5获取手机型号，获取具体手机型号
需求：需要读取系统手机型号，并显示出来。分析实现：因为H5 是运行在浏览器上的，只能获取window上给的信息也就是浏览器信息。如下图所示，这是安卓机（华为）的拿取到的信息。重这个信息中我们可以获取到手机的入网机型代码，这个也是唯一，是由工信部批准的，是唯一不会变的。苹果的我们是拿不到这个信息的，不过苹果我们可以根据逻辑分辨率来时区分机型（此方法无法区分具体机型比如与11都是414,896,2）那就做折中方案苹果机型做或的处理iPhone 11(XR)下面是代码实现。
2023-08-22 21:48:15
1993
原创 高德地图使用坑点记录。
1、AMap.AutoComplete的大小写问题，在v2版本中，从Autocomplete改成了AutoComplete，变成了大驼峰，真的坑死，千万别看错文档，不然就变成大家来找茬。2、AMap.AutoComplete中的city属性限制，只能限制城市！不管是citycode还是adcode还是文字，如果你设置省份，如河北省，山东省，370000，根本无效！但是AMap.PlaceSearch对于省份设置是有效的，无语。
2023-03-21 09:47:42
731
原创 vue3学习记录。（模板引用和组件基础）
的组件中，才可以使用defineProps，它是一个编译宏命令，并不需要显式地导入。的组件中，则还是使用props，其中props的对象格式校验，type，required，default，单向数据流等特性还是和vue2中一样。emits是vue3新增的属性，当组件显式的调用setup函数时，必须设置emits属性。如果绑定多次则最后一次绑定会覆盖前面的，因此获取到的是最后绑定的元素。，那么父组件可以访问到子组件中的任何属性和方法，同vue2中一样。的子组件中的任何东西。一个父组件无法访问到一个使用了。
2023-02-28 18:44:26
595
原创 基于vite搭建的vue3项目中如何引用环境变量
注意，无论是方法1还是方法2，只有NODE_ENV，BASE_URL和以VUE_APP_开头的变量才能通过静态地嵌入到客户端侧的代码中。1、直接在vue.config.js中定义如这里我们可以在vue.congif.js中定义：2、在.env 文件中定义。1、直接在vite.config.js中定义可以直接在vite.config.js中定义环境变量。2、在.env 文件中定义。同vue/cli，只是这里 将VUE_APP_XXXX 换成了 VITE_XXXX_XXXXX。
2022-12-13 11:40:42
2571
原创 配置vue3适用的vue-devtools
然后执行yarn run build，我看到有的说执行yarn run build:watch，我试了下很慢，非常慢，最后只执行了yarn run build。打开chrome的拓展程序，选择加载已解压的拓展程序，然后找到项目中，packages目录下的shell-chrome文件夹，选择文件夹进行添加即可。进入下载好的vue/devtools项目库，项目根目录下运行yarn install。vue/devtools的项目库，必须使用yarn来编译，npm会报错。6、重启浏览器，运行项目。
2022-12-12 17:23:04
2051
原创 Vue中keep-alive时，activated钩子函数比beforeRouteEnter钩子先执行。
Vue中开启keep-alive时，activated钩子函数比beforeRouteEnter钩子先执行。
2022-11-28 12:27:48
549
原创 nvm报错：Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt.
nvm报错：Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt.解决
2022-11-08 11:21:46
859
原创 webpack打包出多文件——配置多入口和多出口
前言：有时候，我们发布一个npm包时，需要打包出多个文件，可能对应不同的功能。这时就需要知道如何配置webpack打包出多文件，原理是通过配置多入口和多出口来实现。一、打包成单文件配置先看一下原来的打包单文件配置是啥样的。const path = require('path');module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, '../lib/'),
2022-04-21 09:36:14
3694
原创 CSS 使用:not(:last-child) 来选择集合中非最后一个的元素
使用:not(:last-child) 来选择集合中非最后一个的元素。<div class="zone-tab"> <img class="tab-item"/></div><style lang="less">.zone-tab { .tab-item { width: 2.2rem; height: 1.9rem; &:not(:last-child) { margin-right: 0.
2022-04-19 10:56:51
6362
原创 npm包发布时，package.json中的main属性作用
当设置了main属性时，引用发布的npm包时可以直接写成：require("some-module")
2022-04-06 11:12:24
2715
原创 抖音内打开的h5页面，跳转到抖音商户页面方法记录。
需求说明：最近在开发抖音内嵌H5页面，需要上传抖音视频，其实上传主要是通过后端封装抖音提供的openapi接口来实现。但是产品突然提了一个需求，说能不能上传成功后跳转到抖音其他页面呢？于是我翻遍了官方提供的js桥文档，但是官方文档里面根本没有相关的js桥和跳转方法。于是使出了程序员的三连：做不了，实现不了，没有这个功能。结果产品发来一个二维码，抖音扫码进去后是某商户的推广H5，功能大概是授权后上传素材视频，但最后它上传成功后居然跳转到了抖音的商户页面！啪啪打脸。于是开始研..
2021-12-15 10:09:21
26761
4
原创 webrtc学习记录附一【通过centos8搭建一个基础的coturn服务器】
前言一、安装Centos8图形化界面。1.1、安装图形桌面的软件包1.2、设置图形模式为默认模式启动1.3、重启后，即可登录图形化界面2、开始安装coturn服务器2.1、修改host，以便能正常连接gitlab2.2、下载，编译，安装coturn2.2.1、折磨部分，欧皇和大牛可以不看。2.3、记录内网，外网ip地址。2.4、关闭防火墙2.5、修改coturn服务器的配置文件2.6、关于openssl证书。2.7、运行coturn服务器。2....
2021-11-30 00:45:55
1671
原创 onPageStateChange在iphone上的2大坑点
用法:坑点：1、在安卓和iphone下返回的值不一样。2、在部分iphone机型下，只有点击小程序右上角的圆点返回才能触发！！！用法:onPageStateChange这个api，从微信7.0.3开始，webview内可以通过判断下面的方式判断小程序是否在前台：WeixinJSBridge.on('onPageStateChange', function(res) { console.log('res is active', res.active)})有了这个api，..
2021-11-24 12:30:46
2444
原创 腾讯坐标系转化成百度坐标系
目录需求描述：1、通过数学公式计算后转换。1.1、腾讯/高德地图经纬度转换成百度经纬度1.2、百度经纬度转换成腾讯/高德地图经纬度2、利用官方提供的api文档进行转换。2.1、腾讯坐标系转换成百度坐标系。2.2、百度等其他坐标系，转腾讯坐标系。验证结果：需求描述：不同坐标系之间的转化是比较常见的需求，今天恰好我也遇到了一个相关场景。要求是讲小程序传来的腾讯坐标系转换成百度坐标系，再传给后台。经过查阅相关资料后，发现主要有以下2种方式：1、通过数
2021-11-11 18:34:13
6805
原创 Vue封装一个tab组件
1、封装好的组件使用方式。<!-- --><template> <div class=''> <GetBagTabs class="tabs" v-model="activeIndex"> <GetBagTab title="扫码取袋" name="1"> 扫码取袋展示内容 </GetBagTab> <GetBagTab title="支付取袋" name=
2021-11-09 18:18:05
1267
原创 JS判断两个连续号码区间是否有重叠部分的方法
需求描述：购票系统中，经常会根据票价金额区间来进行梯度费率设置，例如1-500元，收取1%的费用，501-1000元收取2%的费用。而这个梯度价格区间，是管理人员手动输入的。那么在输入的时候，就会面临一个判断，新输入的价格区间，可能和旧的价格区间有冲突。所以此时需要前端进行校验，并找出冲突区间并给与提示。代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-
2021-10-19 16:38:45
687
转载 纯CSS实现横向瀑布流代码记录
<div class="container"> <div class="item" style="height: 140px"></div> <div class="item" style="height: 190px"></div> <div class="item" style="height: 170px"></div> <div class="item" style="height: 120p.
2021-10-12 17:51:38
661
原创 记录一次购买ECS云服务器/轻量应用服务器部署nodejs服务器后却无法通过公网ip地址访问的坑。
场景描述我真的是被自己蠢哭了：之前腾讯的服务器到期了，续费又贵，于是转战百度。看到有活动，便买了一个99的轻量云应用服务器，又把域名转过来，花了六七十，前后花了一百多。通过rdp连接服务器，安装完node和相关开发工具后，启动项目，本地端口正常运行。然而通过公网ip访问的时候，却一直无法访问！以前通过腾讯服务器，node项目运行之后，是可以直接通过IP:端口来直接访问的，为啥现在不行呢？于是经过一通折腾，什么服务器管理器，iis，乱起八糟的东西都尝试了一遍，结果还是不行。.
2021-10-09 18:48:10
1006
4
原创 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory vue项目内存超出报错处理。
1、npm install -g increase-memory-limit2、进入工程目录，执行：increase-memory-limit3、运行：npm run dev如果不报错，那就直接可以用了。如果报错node --max-old-space-size=10240“‘ 不是内部或外部命令，继续往下走：4、在项目中全局搜索node_modules文件夹中的"%_prog%" 替换成 %_prog% (即去掉双引号)5、重新运行：npm run dev...
2021-09-26 10:17:44
3336
1
原创 webrtc学习记录三【创建基于RTCPeerConnection本机内的1v1音视频互通】
系列文章目录webrtc学习记录一【媒体录制MediaRecorder】webrtc学习记录二【基于socket.io创建信令服务器聊天室】前言记录webrtc学习过程中的要点，以便温故知新。本章主要是基于RTCPeerConnection，创建一套本机内的1v1音视频系统，没有通过UDP服务器和信令服务器的中转。提示：以下是本篇文章正文内容，下面案例可供参考一、nodejs信令服务器首先使用nodejs和express实现一个简单的服务器，由于这里我使用的是https，..
2021-07-09 11:53:18
1377
4
原创 webrtc学习记录二【基于socket.io创建信令服务器聊天室】
系列文章目录目录前言记录webrtc学习过程中的要点，以便温故知新。本章主要基于socket.io创建一个信令服务器，并且实现一个简单的聊天室功能。同时，由于学习视频中的socket.io的版本比较低，和最新版的有区别，所以学习过程中也踩了一些坑，用新版本实现了功能并且处理了一些问题，如跨域等。提示：以下是本篇文章正文内容，下面案例可供参考一、nodejs信令服务器首先使用nodejs和express实现一个简单的服务器，由于这里我使用的是https，所以额外配置了一些证书相..
2021-07-05 16:16:42
1213
原创 webrtc学习记录一【媒体录制MediaRecorder】
系列文章目录文章目录前言记录webrtc学习过程中的要点，以便温故知新。本章主要学习媒体录制相关提示：以下是本篇文章正文内容，下面案例可供参考一、MediaRecorder类的使用媒体录制功能主要是基于MediaRecorder这个类来实现的。总结提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...
2021-06-30 18:00:01
1795
1
原创 v-for循环中的点击事件无效，不报错也不崩溃处理心得。
晚上加点东西到列表循环里，结果发现怎么改点击事件都不生效。查看控制台，也没有报错，只是单纯的点击不生效。于是写了个测试按钮，一步步的挪，发现都是可以的。一直挪到v-for中就会失效。 <div class="hot_list"> <div class="hot_info_item" v-for="(item,i) of currentImageItem.hotAreaConfigInfoList" :key="item.id">
2021-06-14 23:19:59
3030
原创 react学习记录（二）井字棋基础功能开发和学习总结
这里写目录标题入门教程demo完成总结：一、使用slice()方法浅拷贝数组。二、不含有state的组件可以写成函数组件，避免class组件的繁琐。三、状态提升和组件重构。四、基础功能代码。入门教程demo完成总结：看了一下午，晚上又瞟了几眼，终于把井字棋的教程看完了，因此做一些总结。一、使用slice()方法浅拷贝数组。教程里有个slice()快速拷贝数组的方法。const squares = this.state.squares.slice()以前倒是没特意留意这些。虽然也比较简单，但是
2021-04-12 01:43:47
339
原创 react学习记录（一）环境搭建，项目创建和启动。
前言：公司有个项目框架用的是react，所以需要学习一下相关内容，开立此贴记录一下自己的学习过程，同时也督促自己持续学习。文章目录一、搭建开发环境：1.1、node和npm环境要求。1.2、创建项目1.3、本地启动项目1.4、打包项目一、搭建开发环境：看了半天文档，也不知道应该怎么搭建环境，也许是vue开发习惯太深，总想找个脚手架来生成。而react里似乎没有对应的描述，只找到了几个工具链，不知道这里的工具链是否就是指的脚手架？不纠结了，随便选一个工具链来开发。最终选择基于Create Rea.
2021-04-10 17:44:01
197
原创 一些常用的正则表达式，正整数，邮箱，url等
好久没写文章了，赶紧记录一下。记录一些常见的正则表达式："^//d+$" //非负整数（正整数 + 0） "^[0-9]*[1-9][0-9]*$" //正整数 "^((-//d+)|(0+))$" //非正整数（负整数 + 0） "^-[0-9]*[1-9][0-9]*$" //负整数 "^-?//d+$" //整数 "^//d+(//.//d+)?$" //非负浮点数（正浮点数 + 0） "^(([0-9]+//.[0-9]*[1-9][0-9]*)|([0-9]*[1-
2021-03-22 16:31:38
178
原创 Vue属性书写顺序推荐：
为了降低代码阅读成本，同时规范化代码，这里推荐一套vue属性书写顺序：使用方法如下，vscode编辑器，点击【文件】——【首选项】——【用户片段】——【新代码片段】，然后输入一个命名，比如：test，然后回车，然后复制以下代码段即可。代码片段如下：{ // Place your gold-mall-admin-dev 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, bo
2020-12-07 10:59:52
1654
原创 封装自定义组件使用v-model的方法：
以前对封装自定义组件使用v-model时理解不深，甚至有些错误理解。导致每次写v-model时非常麻烦，不愿意使用。今天再次用到时，查了相关资料，终于理解了如何最直接的使用v-model以及model。举个例子：需要封装一个tab组件，并且使用v-model来获取当前tab栏的值。那么父组件调用的代码则期望是这样的：而v-model是绑定参数和绑定事件的语法糖，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为input 的事件，因此v-model一般情况下是：:va
2020-11-12 17:48:51
3019
1
原创 微信浏览器中，使用touchMove等事件时，会同时导致整个页面下拉显示网址问题解决！！
问题描述：页面需要做一个上拉下拉的滑动效果，所以自己加了一些touchmove，touchstart，touchend等事件来控制。pc下效果都挺不错的，但是到了微信浏览器中，恶心的情况就来了：每次下拉的时候，都会导致微信浏览器整个页面下拉显示网址，同时由于这两个事件冲突导致下滑效果非常差。问题分析过程：先来一通疯狂百度再说。结果查到的东西全是让禁用touchmove事件，还有一些高级点的加了一些判断，比如通过类名或者设置原型链上的某个属性值来判断是否阻止默认事件。 document
2020-11-04 10:38:19
2080
3
原创 vue中的vant使用心得及踩坑事件：轮播组件swipe渲染的宽度为0
文章目录问题现象：轮播组件swipe渲染的宽度为0问题描述：问题分析：问题解决：问题现象：轮播组件swipe渲染的宽度为0问题描述：今天开发的时候，需要使用一个轮播图组件。由于渲染的很多数据都是接口获取的，因此我这里通过hadImageDetail字段控制是否开始渲染。而下图的代码中，hadImageDetail是从接口异步获取到的，而van-swipe却会在vue的mounted阶段就开始渲染，导致此时轮播图获取到的宽度为0.如下图：问题分析：原因就是前面提到的，hadImageDet
2020-10-24 22:30:59
3294
原创 获取dom元素的真实style属性。
今天需要写一个滑动的特效，在开发的过程中发现，通过js获取dom的style样式时，style中的属性全是空字符串，而css中明明已经定义了bottom，z-index等等属性。查阅了相关资料后了解到，js获取到的dom对象的style通常是没有值得，因为我们都写在外部文件中。而dom.style这种方式获取到的样式只能是内联样式。要想获取到实际的css样式，我们需要使用以下方法，来获取实际的style样式：function getStyle (obj, attr) { if (obj.curre
2020-10-24 11:01:39
2747
1
原创 Photo Sphere Viewer的陀螺仪必须在https下才能开启，否则无效。！！！
我也是真的服了，找了七八个小时的问题，明明配置正确，代码ok，还找到react的代码对比，结果就是不行。最后翻github的issue，发现有人提到陀螺仪必须在https环境下才能开启。我尼玛啊。。。。！！！！！...
2020-10-12 20:26:25
575
5
原创 vue项目使用vant匹配rem时使用pxtorem的配置操作。
目标：能够正常使用vant组件库，且匹配公司现有的rem单位。版本信息：vue/cli3脚手架。postcss-pxtorem: ^5.1.1vue: 2.6.11vant：^2.10.2代码文件：vue.config.js中，找到module.exports位置，然后添加如下代码，懒得一句句解析了。module.exports = { publicPath, outputDir: 'dist', assetsDir: 'static', ...... css: {
2020-10-12 14:58:25
964
原创 vue/cli2和cli3框架下bable解决es6语法不兼容问题，适用于ie11，ie10的项目兼容。
我们引用一些第三方插件的时候，经常会出现node_modules中的es6语法没有被转换导致报错，而且这样的报错往往比较奇怪，无法直观的根据报错信息查看原因。例如缺少“；”，“无法识别”，等乱起八糟的报错。此时一般是通过babel来解决。对于vue/cli2脚手架搭建的项目来说，babel其实已经引入了，.babelrc文件也已经创建好了。但是实际操作的过程中，我们还是需要进行一些配置。配置文件位置是 build/webpack.base.conf.js然后找到module——rules找到b
2020-09-21 15:56:28
3985
1
原创 vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339）
文章目录问题描述：解决过程：解决办法：问题描述：今天早上一开机，打开项目，发现项目一片醒目的红色，查看报错原因提示：Property ‘xxxx’ does not exist on type 'CombinedVueInstance<{ readyOnly: unknown; businessPrice: unknown; travelStaffInfo: any; } & Record<never, any> & Vue, object, object, obje
2020-09-04 11:13:25
8798
18
原创 按字母A——Z排列的中国城市（地级市）json数据
{ "city":[ { "title":"A", "lists":[ "阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门" ] }, { "title":"B", "lists":["北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州" ] }, { "ti
2020-08-24 16:57:26
3757
1
全国省市区json数据，扁平树结构
2021-04-14
全国省市区街道的树形json数据结构
2021-04-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人