timebeign的博客

原创 h5微信分享只是链接，没有卡片

微信H5已成功接入，微信api以及配置项验证正常，通过手机微信里面链接打开页面进行分享，分享出去的还是链接。原因：全域名开放（即微信可访问淘宝、支付宝等友商的链接）造成的；3、公众号图文消息进入。5、公众号原文链接进入。

原创 vue 分页器组件+css动画效果

2、点击下一页的时候需要有动画效果过度，如果当前页数是当前显示最后的一页，则停了当前显示最后的位置，但是点击下一页的时候需要用户感知。全网都找了一遍没有找到符合UI需求的分页动画，于是就主动上手了。1、分页最多显示9页，总页数最多显示无上限；

原创 vue周日历组件，从周一开始周日结束

4、 如一周内出现两个月份，则当前选择的月份正常显示，未选中页面则置灰。1、左右按钮为【上一周】【下一周】。日期显示一到日（对应为周一到周日）3、 点击对应月份的时间，则该月份亮起，顶部时间显示对应月份。活动日历组件，从周一开始。2、默认选中当前日期；

原创 quill光标位置插入html，quill编辑器+word文档上传，插入指定位置

官方quill没有直接给出插入html的方式类似，下面两个方法，是quill框架提供的，但是并没有提供可以在指定光标位置插入htmlquill.pasteHTML：这个方法已经废弃了，但目前还是可以使用；dangerouslyPasteHTML：这个方法也可插入html代码；如何在quill光标位置插入htmlquill.clipboard.convert(bodyHTML) //把html转换成delta格式let range = quill.getSelection(true)

原创 h5微信公众号分享：错误40048,invalid url domain与错误63002,invalid signature问题解决

1、错误：63002（1）发送当前接口请求的页面URL需要跟后台协商，是否需要编码，以什么样的形式发送（2）就是URL编码没除去#或者没有动态获取导致签名不一致，此次后台要求可以直接发送url无需要编码，但是#后面的阐述需要去除2、错误：4004840048就是只有一个错误了，甚至可能手机是好的，电脑看是坏的，同时要确保js接口安全域名配置的正确...

原创 swiper轮播图3d效果coverflow模式实现两端缩小中间放大，swiper插件实现中间大两边小的轮播图效果

css<style> * { margin: 0; padding: 0; } body { overflow: hidden; } .swiper-container { margin-top: 20px; width: 100%; height: 550px; margin-bottom: 53px; overflow: visible !important; } .swiper-cont

原创 图片二进制地址blob转化文件file格式createObjectURL创建的图片url地址转化文件地址file进行上传

图片二进制地址blob转化文件file格式createObjectURL创建的图片url地址转化文件地址file进行上传主要代码//blob文件转化function httpRequest(src){ return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); xhr.open('GET',src,true); xhr.responseType = 'blob'; .

原创 quill自定义清除格式功能，选中内容清除格式

quill自定义清除格式功能，选中内容清除格式除了图片和换行符合其他都需要清除找了很久都没有找到合适的，最后研究了一下文档，结合GitHub上面贴了很多复制粘贴清除自定义格式进行改编直接附上代码这是注意代码块首先自定义一个方法数据引入点击触发事件，进行格式自定义清除在此模块中有几种形式是需要特殊处理的原因：1、图片模式是自定义对象2、链接...

原创 quill富文本编辑器监听复制粘贴清除格式（防止粘贴滚动条回到顶部、网页抖动）

quill中文文档https://www.kancloud.cn/liuwave/quill/1409382quill英文文档https://quilljs.com/一、需求1、保留图片跟空格2、清除其余所以样式真的是太开心的了在网上各种百度搜索终于找到了一个方法，文档没有详细说明下面看例子吧quill.clipboard.addMatcher(Node.ELEM...

原创 真机上小程序图片浏览器wx.previewImage无法加载图片，小程序图片请求报错no-referrer-when-downgrad

真机上小程序图片浏览器wx.previewImage无法加载图片小程序开发工具中的使用wx.previewImage图片很快就显示出来了，但是在手机上图片打开浏览器却一支显示加载状态网站图片支持http和https访问但是接口返回的是http的形式在工具中会出现如下报错，状况如下：1、图片正常循环渲染在小程序开发工具中不显示，但是在真机可以访问。2、但是wx.previ...

原创 vue配置less全局变量

这个过程真是艰苦东搞搞西搞注意：1、此为vue cil 2.x版本的配置最后的解决办法是需要安装sass-resources-loader。找到build文件夹下面的utils.js 找到 less: generateLoaders('less') 修改成less: generateLoaders('less').concat({loader: 'sass-r...

原创 vue+webview+less 实现夜间模式换肤功能

第一步建立less文件第二步：在less中加入代码第三部：解析代码1、动态添加.test-dark 类名，触发styleChange（）函数这里我把类名写死，方便测试2、注意如果我想要改变头部 .Header-noOpen 背景色那么注意要在styleChange中改变个人记录总结，勿喷哈哈哈哈哈...

原创 最近使用百度分享的api，引发 了一下问题，微博分享的页面跳转不成功

1、导致问题的原因有可能是百度分享的服务器有时候无法跳转到微博（个人分析）2、最后我的解决方式，点击事件，让浏览器直接跳转到微博分享的页面window.location.href="http://v.t.sina.com.cn/share/share.php?title=“自定义标题” &amp;pic=“自定义分享图片地址”&amp;searchPic=false"searchP...

原创 wangEditor 尝试开发<hr>分割线

原创 修改wangeditor编辑器的无序列表与有序列表为单独一个无序列表

 1、修改wangeditor编辑器的无序列表与有序列表为单独一个无序列表2、解决了wangeditor编辑器点击无法撤销问题（找到源码wangEditor.js 中列表设置的源码位置，挺容易找的）1、注释改部分代码 2、把this.type的类型改变为click事件 3\把有序列表与无序列表部分操作注释、改为click方法（onClick方法中的代码一...

转载 css 锚点 链接

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

原创 调用百度分享api，在微博分享的时候图片地址显示403问题

 这个图的在浏览器直接访问没问题，在网页解析就4032、是防盗链的原因引起3、在图片存放的服务器地址中，宝微博加入白名单、允许第三方网站访问资源图片 4、weibo.com加入白名单5、最后图片出来了...

原创 video.js+swiper 视频播放结束后三秒播放下一个，点击播放视频

部分代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;video id="example_vid

转载 vue-router路由懒加载（解决vue项目首次加载慢）

vue-router路由懒加载（解决vue项目首次加载慢）懒加载：----------------------------------------------------？　　　　也叫延迟加载，即在需要的时候进行加载，随用随载。为什么需要懒加载？　　　　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过...

原创 Vue中如何引入CKeditor 文本编辑器

1、下载编辑器包：https://www.npmjs.com/package/ckeditor2、放到静态资源目录中 在index.html中引入文件ckeditor.js&lt;script src='static/ckeditor/ckeditor.js' type="text/javascript"&gt;&lt;/script&gt;3、配置webpack文件配置  build/webpa...

原创 使用affter伪类实现1px 边框

设置根元素的字体为62.5%,1rem 等于10px;html{font-size:62.5%}Bottom1px { width: 100%; height: 10rem; position: relative;}.Bottom1px:after { content: ''; display: block; position: absolute; width: 100%; lef...

转载 微信二次分享不显示摘要和图片的解决方法

微信二次分享不显示摘要和图片的解决方法 解决不显示摘要和图片的问题，需要调用微信公众号的js-sdk的api ,需要前端和后台的配合，后台需要返回 appid (公众号的appid ) 、 timestamp (生成签名的时间戳) 、nonceStr (签名的随机字符串) 、 signature (签名* 可能出错)；1.绑定域名    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“j...

转载 判断浏览器是不是微信浏览器

判断浏览器是不是微信浏览器function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; }else{ return false;...

转载 http请求状态码

200请求已成功，请求所希望的响应头或数据体将随此响应返回。400语义有误，当前请求无法被服务器理解或请求参数有误。403服务器已经理解请求，但是拒绝执行它。500服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理503由于临时的服务器维护或者过载，服务器当前无法处理请求。301,302从定向...

转载 ready与onload区别

$(document).ready和window.onload的区别$(document).ready和window.onload都是在都是在页面加载完执行的函数，大多数情况下差别不大，但也是有区别的。$(document).ready:是DOM结构绘制完毕后就执行，不必等到加载完毕。 意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。win...