- 博客(29)
- 收藏
- 关注
RSS订阅
原创 微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式
在项目进行JSSDK使用的过程中，出现了很多问题，其中报错invalid url domain 以及 invalid signature最多，也最头疼，部分坑在文档里也并没有写清楚，这里就简单说下这两个报错的原因和解决方式当报错invalid url domain时 其实离成功不远了，错误原因也很直白，就是url并没有在公众号设置里正确绑定，需要重点检查几个东西注意：在域名绑定时，请确定绑定域名与你H5进行wx.config发起域名一致，http与https一致invalid signature是开发是
2022-06-07 10:30:32
20958
17
原创 微信小程序 -- 原生JS集成腾讯IM实时聊天/实时音视频(踩坑及心得)
最近公司微信小程序需要集成腾讯IM实现实时聊天功能,这篇文章就记录我在集成过程中所踩得坑和心得首先第一步: 当然是进官网读文档文档地址 : https://cloud.tencent.com/document/product/269/36838第一个看到的就是这个一分钟跑通demo(实际上我感觉看了跟没看一样,没啥太大帮助)也就清楚了一下前期准备工作:首先你要有一个可用的腾讯云账号然后你需要登录 及时 通信IM控制台在控制台中添加新应用创建应用后点进去可以拿到应用的 SDKAppId 以及
2020-11-11 17:30:59
13156
64
原创 微信小程序 --自定义堆叠式Swiper
三张卡片堆叠式swiper，居中的为展示，左右两边为前一个和后一个，如果是第一长，或者最后一张，对应的前后无阴影堆叠。
2023-03-21 17:38:51
2140
原创 高德地图AMap --- infoWindow 与 setCenter 冲突问题
背景： 在高德地图上渲染了很多marker， 点击marker后加载infoWindow并对地图amap进行setZoom和setCenter将marker缩放至视图中心出现问题： 当要点击marker不在视图中心时，点击marker后加载了infoWindow，但是此时setCenter却不能够正确的设置中心点，会出现偏移复现步骤：1.地图渲染marker2.点击右上角边缘marker（此时获取了marker的position，并用此position进行setCenter，setZoom，预期
2022-05-25 17:21:35
2413
5
原创 概念 -- 浅谈前端工程化、组件化、模块化
我们发现前端工程化、组件化、模块化几乎成了每一个招聘需求或者面试问题中的必须选项,那么如何简单的来将这几个概念区分明确呢,我这里进行一个简单的解释:首先,作者并不是一个科班出身的程序猿,作者是建筑工程程序猿,是的,没错,作者以前是搬砖的…那我就非常非常容易的将这几个概念与实际的建筑工程做了一个对比,发现异常契合!!!接下来就是整体工程化:往大了看: 我们一个项目,从一个需求到最终实现,有着很多很多的事情需要我们做,粗略的诸如需求讨论、设计、修改、开发、测试、上线等等一系列的步骤,整个这一个大的周
2021-03-12 09:42:59
421
原创 JavaScript -- EventLoop浏览器/宏任务/微任务概念及示例
最近看了很多关于浏览器EventLoop的文章,学习了很多,这里将这些进行一个简单的总结:1.概念什么是EventLoop:Event Loop是一个程序结构，用于等待和发送消息和事件。（a programming construct that waits forand dispatches events or messages in a program.）简单来说就是计算机系统的一种运行机制什么是宏任务/微任务:...
2021-02-26 14:36:50
2756
12
原创 微信小程序 -- 页面骨架屏使用
有些时候在我们的页面中有大量数据或者图片加载,如果不做任何处理,整个进入加载的用户体验会很差很难看,目前大部分有两种方式优化增加用户体验,第一种为增加菊花加载或其它样式的加载按钮,在数据加载完成后隐藏,第二种就是骨架屏形式,现在小程序已经支持快速生成骨架屏,用起来相当方便.1.骨架屏使用首先进入我们需要生成骨架屏的页面,然后在我们开发者工具中点击生成骨架屏它会提示你是否生成XX页面的骨架屏,确定是我们需要生成骨架屏的页面即可点击确定点击确认后会发现在文件目录中生成了两个骨架屏的文件按照要求将
2021-02-02 10:10:25
1141
原创 JavaScript -- 常用的实用功能代码(不定时持续更新)
日常业务实现时,有许多常用的,实用的JavaScript代码,梳理如下:判断数字的奇偶let IsEven = num => num % 2 === 0 (是否能整除2)console.log(isEven(4)) //trueconsole.log(isEven(5)) // false获取一个随机的布尔值(通过Math.random()来生成一个0-1随机数,判断其与0.5的大小来得到真或者假)let randomBool = () => Math.random() &
2021-01-26 10:35:32
244
原创 webpack -- webpack-dev-server 启动报错解决
今天在启动webpack-dev-server的时候报错报错原因: 搜了一下github和百度,应该是webpack-cli的版本与webpack-dev-server版本的冲突解决方式:1.删除已有项目webpack依赖 npm uninstall -D webpack-cli2.重新安装 npm install -D webpack-cli@3再次运行:成功开启服务器注: 如果按照上述方法仍然报相同错误,可以尝试将webpack webpack-cli webp
2020-12-29 17:06:20
1279
原创 css -- ie兼容写法
简单的记录一下css兼容ie的写法:color:#FF5246; //一般浏览器识别color:#acacac\9; //IE8,IE9及以上版本识别*color:#3c3c3c; //IE7识别_color:#f4f4f4; //IE6识别在正常的css代码后加 ‘/9’ 只有在IE浏览器才能识别,其它浏览器会自动忽略,因此通过此条语句来区分是ie浏览器还是其它浏览器然后因为ie版本问题,我们需要兼容一下低版本的ie7 / ie6因此在通过*color
2020-12-23 10:48:20
1535
转载 微信小程序 -- ios 底部小黑条安全距离兼容解决方案(转载)
在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，如下图。在微信小程序上适配安全区域三种方案：使用已知底部小黑条高度34px/68rpx来适配（不推荐）使用微信官方API，getSystemInfo()中的safeArea对象进行适配（推荐）使用苹果官方推出的css函数env()、constant()适配（推荐）方案一：使用
2020-12-23 09:32:45
9070
原创 微信小程序 -- 真机不打开调试无法正常使用小程序的坑
这两天我在写公司项目的时候,突然发现在真机上不打开调试功能,就没办法正常进入小程序,百思不得其解呀.后来发现````问题在域名配置上,没有配置域名呀!!! 接口全部出问题了大家伙一定要注意,因为如果打开了调试功能,会忽略域名验证,所以一切欧克一定要在上体验服以及正式服的时候 提前检查 域名配置!!!小程序所使用的域名一定要配置全,注意如果集成了别人的 某些插件,功能,SDK 等 ,如果有域名需求的也要配置哟配置的地方在:微信公众平台 -> 登录小程序管理账号 -> 开发板块 -&g
2020-12-16 14:24:41
3570
原创 微信小程序 -- scroll-view组件在ios上无法滑动的坑
当我们的scroll-view组件在页面中使用,且页面.json设置为页面可滑动时或可触发下拉刷新时"enablePullDownRefresh ": true, "disableScroll":true,会出现我们的scroll-view组件在ios真机上会出现卡死,无法滑动的问题造成这个的原因是因为ios系统内核允许我们将页面进行下拉,可以拉出一段空白的区域,这个时候如果我们滑动下拉页面,会认为我们是在使用ios的下拉,而不会拉动我们的scroll-view组件要避免这个问题就必须在页面.j
2020-12-14 14:44:04
7019
5
原创 值得收藏的网站记录
兼容性查询网址:(用于查询各种属性目前各浏览器的兼容性)https://caniuse.com/廖雪峰学习网址(Python):https://www.liaoxuefeng.com/wiki/1016959663602400
2020-11-05 16:02:25
357
原创 CSS/CSS3 变量var()使用 以及 calc()函数计算的使用
在这里记录一下开发过程中突然喜欢上的CSS/CSS3 var()变量以及calc()函数 , 让在不使用sass以及less的情况下也能进行一个比较高效的样式设置var()变量var变量的定义语法 : - -变量名 两个短横线加上变量名var变量的使用 : var(- -变量名)我们可以在body中或者任何一个我们想要使用的变量语法的层级中定义var()变量并进行使用例如在body中定义:body{ --fontSize: 18px; --color: #000000;}在某
2020-11-05 15:52:02
9744
5
原创 CSS3- img标签content属性url修改 遇到的坑
最近在做网页的时候,需要动态修改icon,然后发现了img标签在样式中使用content属性的url可以进行修改起图片引用地址以达到修改的目的,但是使用了之后发现了坑,好像只有Chrome浏览器支持,FF等好多其它浏览器都不能支持这种方式.<style> body{ display:flex; justify-content:space-around; } div{ width:300px; height:
2020-10-21 11:06:08
2350
原创 JavaScript-判断浏览器内核方法
在某些时候我们需要获取浏览器内核以进行兼容我的方法是结合Navigator 对象的 userAgent 属性返回的值来判断当前浏览器内核直接上代码:function getRE( ) { var RenderingEngine = ""; if(navigator.userAgent.indexOf("MSIE")>0) { RenderingEngine = "MSIE"; } if(isFirefox = navigator.user
2020-10-21 10:48:26
687
原创 微信小程序-自定义组件(页面与组件间的通讯传值)
最近项目上需要用到微信小程序的自定义组件,对于小程序来说这一部分的知识还是很重要的,这里简单的梳理一下自定义组件与页面间的传值及通讯一、自定义组件的构建:首先需要构建我们的自定义组件,最好将所有的组件统一放在与pages目录同级的components文件夹(如果没有就创建一个吧)中,创建我们的组件文件夹test,在文件夹中建好4个必要文件json、wxml、js、wxss确保test.json文件中声明好是组件{ "component": true,}test.js文件中
2020-07-30 15:09:53
2956
原创 CSS3-多行溢出样式设置
在开发过程中,经常碰到需要设置多行溢出时的样式,例如一个块要求文本需要在第二行溢出时显示省略号,此时就需要进行多行溢出设置.核心:-webkit-line-clamp此样式必须要与另外几个样式配合使用：display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。text-overflow 设置文本超出之后的显示方式。若需要设置两行文本溢出后省略号显示则overflow: hidden; //设置超出
2020-07-30 11:23:59
505
原创 CSS3-设置背景图片固定大小 其余部分用固定颜色填充
##CSS 设置背景图片固定大小 无论屏幕如何增大 背景图片保持中间 多余两边用颜色填充,适应各种大屏幕及拉伸.test-img{ background-image: url("./XXX.png"); background-position: center; background-size: contain; background-repeat: no-repeat; background-color: rgb(116,177,255);}中间粉色部分
2020-07-10 09:55:35
2276
原创 CSS3-关于input框autocomplete开启后 input框补全后默认背景颜色
今天在开发过程中碰到了这样的情况,input框在我设置好样式后,我点击进行输入值,一旦我选择自动补全(及它弹出的下拉框中的以前填过的数据),就会出现默认的背景颜色,极容易影响整体框体效果如:出现的这个默认背景颜色很影响整体效果,于是要进行清除,最终查到了input有个属性设置,设置如下即可清除input:-internal-autofill-previewed,input:-internal-autofill-selected { transition: background-color 5
2020-07-07 15:50:46
2157
原创 CSS3-input框 类似Google登录的动画效果
用css3将input框写出类似Google登录页面的动画效果效果一效果二效果一focus前focus后代码如下CSSbody{ background-color:#acacac; } .form-container{ display: block; position: relative; width: 400px; height: 400px; background: #fff; margin: 50px auto;
2020-07-07 15:24:21
614
原创 JavaScript-浏览器是否在当前页面监听事件(页面切入切出事件监听)
最近在做项目的时候碰到需要监听浏览器是否处于当前页面,即需要监听页面的切入及切出使用页面可见性改变时间visibilitychange可能使用的场景:1.页面使用自动轮播时,如果不监听页面的切入切出,如果长时间切出后再次切入进来,会造成轮播图快速的切换很多次,影响用户体验2.当页面有视频,音频等时,当需要在页面切出时进行暂停或者关闭3.其它动态自动更新的板块,当需要在页面切出时暂停更新,重新切入时进行更新// 监听是否在当前页document.addEventListener("visibil
2020-06-30 15:40:50
3414
原创 JavaScript-正则表达式邮箱验证
JavaScript 邮箱验证正则表达式最近对正则表达式进行了一个梳理,刚好这段时间项目有很多个地方需要进行邮箱验证,之前都是在网上搜的,这里还是自己总结一下验证规则首先邮箱的格式是: 登录名@主机名.域名然后我在网上搜了几个比较主要的邮箱网址,进行注册,看了下他们的注册规则(接下来也就是我们的验证规则)几个国内主要的邮箱网址截图如下:----根据上面几个的反馈,目前国内邮箱登录名部分是以数字(典型qq邮箱)或字母(大部分)开头,中间可以使用下划线"_" (网上部分说的还可以使用中线"-
2020-06-29 16:00:37
8205
1
原创 JavaScript-正则表达式由浅入深 梳理
正则表达式由浅入深 简单梳理概念: 正则表达式是一种[字符串检索模式],其具体表现为一个字符串的样子原理: 通过参数字符串设置检索规则,在指定字符串中检索出符合规则的字符串作用: 可以用来进行各种字符串格式验证(邮箱验证,地址验证,手机号验证等),或进行文本替换...
2020-06-28 16:43:44
330
原创 微信小程序-HTML渲染插件
此插件是网上大佬根据WxParse进行重构的产物,使用非常简单,且在持续维护,用起来相当便捷详细使用方法及功能介绍请进入Git地址查看Git地址:https://github.com/csonchen/wxParse使用方法原生组件使用方法克隆 项目 代码，把 components目录 拷贝到你的小程序根目录下面;在你的 page页面 对应的 json 文件引入 wxParse 组件{ "usingComponents": { "wxParse": "/components/wxP
2020-06-28 09:43:44
420
原创 微信小程序-使用对象格式数据进行遍历的坑(对象格式的赋值及遍历顺序)
需求背景项目需要做一个类似于及时聊天的留言板功能(其实除了不能实时刷新消息,其它也没差别了),需要按照时间顺序,将最新的消息展示在最下面,下拉则加载更多历史消息正文因为前期未充分考虑到数据结构问题,后台给我的数据格式如下data = { 2020-06-10 : [ {id:1,message:'xxxxxxxx'},{id:2,message:'xxxxxxxx'},{id:3,message:'xxxxxxxx'} ], 2020-6-12 : [ {id:4,message:'xx
2020-06-23 16:50:26
1625
1
原创 微信小程序-swiper自适应设置高度
需求背景项目需要做一个swiper切换栏,但是每个swiper-item中有一个类似手风琴风格的收缩栏,展开后其内容不定,高度不定,无法预知,由于微信小程序的swiper组件并不是自适应高度的,所以就需要通过某些方法使其自适应首先要动态设置swiper高度,就应该先将swiper组件的高度设置为动态值,并根据收缩栏收起时的最小高度初始化为一个默认值<swiper bindchange="swiperChange" previous-margin="20px" next-margin="10px"
2020-06-17 11:04:31
5036
1
原创 微信小程序-url地址传参的参数处理
微信小程序url地址传参的参数处理传递参数为对象格式传递参数中含有? = &等特殊字符传参页面及接受页面代码传参页面接收页面传递参数为对象格式若参数为对象则需先使用 JSON.stringify()进行转换 , 接收后使用JSON.parse()转为对象传递参数中含有? = &等特殊字符若传递参数中含有=,?,&等特殊字符 无法正常传递参数 则需要进行编码解码 传递时使用encodeURIComponent() 接收时使用decodeURIComponent()传
2020-06-17 10:28:21
5886
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人