- 博客(231)
- 收藏
- 关注
RSS订阅
原创 微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一、缓存带来的问题和原因我们在发布新版本的时候，在打开微信小程序嵌套的h5页面和微信公众号h5页面的时候，常常会发现页面还是上个版本的旧页面或者打开直接空白 白屏了，那么为什么会存在这个问题呢？原因是微信浏览器为了提高性能，自带缓存功能，缓存了html文件，比如页面 https://www.xxx.com/abc.html,虽然这个页面内部内容都全部替换了，但是页面路径还是同一个，还是https://www.xxx.com/abc.html，缓存就会生效，还是会请求...
2021-11-02 12:32:21
16322
原创 Fiddler弱网测试uni-app
本文仅代表个人意见，仅供参考ABC小程序与uni-app小程序弱网测试报告本文在弱网环境下，在页面请求完成耗时和页面加载完成耗时这两个维度，对现有ABC小程序（后面统一称ABC小程序）和uni-app改造后的ABC小程序（后面统一称uniapp小程序）做一些比较。一、什么是弱网？很多时候我们在地铁或者在电梯上浏览网页时，网页一直在转圈或者提示加载错误，这样的网络环境就可以称为弱网环境。按照移动的特性来说，一般应用低于2G速率的都属于弱网，也可以将3G划分为弱网。以下是常见的网络制式的上行、下
2021-08-03 12:15:40
2505
3
原创 uni-app、taro、flutter、kbone 跨端、小程序选型对比、区别
本文只代表本人观点，在自己的一些实践经验上的出的粗浅结论。也只适合在公司目前业务所得出的方案，仅供参考，可能随着技术的发展，其他框架也会越来越好。一、背景 随着移动互联网的百家争鸣，越来越多的“端”如雨后春笋快速兴起，安卓、ios、鸿蒙和各种小程序等。同一个应用，各个“端”独立开发，不仅开发周期长而且人员成本高，不利于团队成员形成合力提高开发效率。这种重复、低效的工作状态直接影响到新品的迭代和发布，在这样的形势下，跨端技术受到越来越多人和企业的关注。 使用跨端方案进行...
2021-08-03 12:02:07
17484
2
原创 mpvue小程序分页面的页面配置，颜色、标题、背景等不起作用
在app.json配置了全局的页面配置但是在单个页面的配置却不起作用，没有覆盖全局的配置，貌似是 版本更新，原来的一些配置又改了，但是mpvue的文档又没有说明。网上找了一下原因，发现是①mpvue-loader版本修改所致，所以首先需要升级一下 mpvue-loader的版本例如：npm install mpvue-loader@^1.1.4②在子页面下新增 ...
2018-11-23 14:16:17
5724
2
原创 点击链接跳转到微信公众号关注页、微信关注链接
感觉现在微信又更新了，原来 好好的方法不给用了，可能是微信一直在禁用通过外部链接引导到关注页的举动，不支持。通过重定向跳转至全部消息列表页，关注按钮一闪而过，然后消失了。。。暂时没有好的解决方案。所以以下文章可以略过。。 现在的公众号引流一般都只能是 二维码扫码后关注，那么通过点击一段网页链接（图片、或文字）怎么引导用户到公众号关注页呢？一、首先打开需要设置关注页 的公众号此时...
2018-10-25 14:46:09
91735
23
原创 解决微信授权成功后点击按返回键出现空白页和报错的问题
微信授权 的操作可以阅读我的另一篇文章 https://blog.youkuaiyun.com/qq_35430000/article/details/79299529微信授权我是 在index.vue做的授权，是一个空白页，因为授权需要回调所以这个页面会刷新两次，当我们授权成功进入主页面后，点击返回键或者点击手机的物理返回键，因为浏览器history机制，按物理返回或者返回肯定是会进入这个授权页面的，而...
2018-08-08 12:03:12
12780
2
原创 Vue刷新token，判断token是否过期、失效的最简便的方法
看了许多小伙伴分享的刷新token和判断token是否失效的方法，个人感觉有些难懂和不够简便。现结合个人开发实践分享一下使用vue axios请求拦截的方法来刷新token和判断token是否过期、失效的方法。刷新token和token是否过期的操作都是由后端实现，前端只负责根据code的不同状态来做不同的操作：一、判断token是否过期、失效举例：一般响应状态码 code :0，表示...
2018-06-25 20:49:12
84158
23
原创 vue打包后如何区分开发、测试和生产等不同的开发环境
看过vue和webpack api的同学都知道，使用npm run dev可以运行开发环境的代码，使用npm run build就是打包生产环境的代码。但是如果我还有测试环境和预发布环境，运行npm run build命令只能在生成环境也就是线上环境运行，那我的测试和预发布环境怎么打包?参考了网上的一些文章，我觉得还是从 axios调用接口api，修改 axios的 baseURL入手比较方便...
2018-05-28 17:45:45
22924
5
转载 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
2018-05-11 10:08:55
169847
19
原创 简单而又详细的react+reactRouter+redux项目
看了网上的很多关于reactRouter和redux的文章，感觉自己理解的都很乱，众说纷纭，不知道从何下手，其实我就是想要一套开发项目的模板，就这么简单。看了挺多文章，所以现在做了些总结。一、构建项目为了让我们的项目更加简单，所以使用官方提供的react-create-app这套脚手架工具构建我们的项目，这里创建的具体步骤我就不具体阐述，可以参考我这篇文章https://blog.youkuaiyun.com...
2018-04-11 18:07:50
4519
1
原创 vuex最详细完整的使用用法
为什么使用vuex?vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手。需求：两个组件A和B，vuex维护的公共数据是 餐馆的名称 resturantName,默认餐馆名称是 飞歌餐馆，那么现在A和B页面显示的就是飞歌...
2018-03-01 15:05:10
38432
16
原创 微信h5静默、非静默授权获取用户openId的方法和步骤
微信h5静默、非静默授权获取用户openId的方法和步骤:一、openId是什么？openId是用户在当前公众号下的唯一标识（‘身份证’），就是说通过这个openId，就能区分在这个公众号下具体是哪个用户。二、openId有什么用？假如用户A在当前公众号下购买了一件商品，用户的下单信息肯定要存储到后台数据库，那根据什么进行存储呢？openId是用户在当前公众号下的唯一标识，通过op...
2018-02-09 16:10:32
145293
49
原创 vue通信、传值的多种方式（详细）
Vue通信、传值的多种方式，详解（都是干货）：一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B②在B组件中获取A组件传递过来的参数...
2018-02-08 18:29:45
120457
20
原创 使用apng-js，apng动画连续播放，取代gif
通过使用apng-js可以控制播放图片，或者点击按钮达到播放多次动画的效果，在动画播放结束页可以执行一些操作。4、传入具体的apng图片（本地地址）、canvas命名和apng要插入的某个父容器id。3、对应页面引入上面定义好的apng.js，具体路径根据自己项目定。2、新建apng.js文件，里面做了一些通用封装。废话不多说，直接上代码。
2024-10-25 13:01:08
597
2
原创 vue3 使用vue-masonry加载更多，重新渲染
vue3中通过provide已经向外部导出了 redrawVueMasonry方法，所以只需要在 相应页面和组件中使用inject 接收redrawVueMasonry方法就可以使用了。在使用 van-list做上拉加载更多，加载下一页的时候，会出现瀑布图重叠，原因是布局没有重新更新，所以需要 调用 vue-masonry更新布局的方法。然后在加载数据后 使用 $redrawVueMasonry()方法，即可大功告成。看了源码才知道可以这样用，api都没写，隐藏太深了。
2024-08-28 13:08:36
671
1
转载 谷歌浏览器调试微信H5网页或者微信小程序的方法
5、点击对应网页或者小程序 inspect 即可出现调试栏，然后像正常调试页面即可，小程序可以打开webview嵌套的h5页面，这样就能打开调试模式，看到接口请求、图片等调用情况。1、首先USB数据线连接手机进入调试模式。等待一会儿 （浏览器需要具备翻强功能）确定是否可以用（能打开就能用）3、微信上打开你需要调试的页面。4、谷歌浏览器地址栏输入。
2023-04-28 12:02:09
15441
2
原创 tinymce采用cdn.jsdelivr.net cdn经常挂怎么办？
原tinymce使用的是https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js地址，这个网站在国外会存在挂掉的情况，所以考虑使用国内稳定的cdn节点国内常用节点有：七牛 https://www.staticfile.org360 https://cdn.baomitu.com字节跳动 https://cdn.bytedance.com举例:把节点替换为 七牛的// why use this c
2022-05-18 11:24:08
18275
8
转载 Element-ui input 输入框限制只能输入数字的问题
需求说明后台管理系统，使用element-ui el-input组件，要求只能输入数字，最先使用的办法：<el-input v-model.number='count' type='number' maxLength='9'/>复制代码存在的问题1. maxLength不生效2. 可以输入e3. 可以输入1.1.....11...1复制代码目前解决的办法（可以生效）<el-input v-model='count' oninput="val
2022-05-17 12:22:21
22023
1
原创 vue使用v-for为列表每一项动态添加ref
有这样一个需求:因为list列表可能每一项的高度都不一样，要实现左侧步骤条动态高度，需要获取列表每一项的具体高度。所以想到给list每一项添加一个 ref，从而获取每一项的高度。1、使用index给每一项添加 ref ,:ref="`line_item${index}`" ,这样每一项都会有一个不同的 ref,line_item0、line_item1... <div class="line_item" :ref="`line_item${index}`" v-for="(item,
2022-05-09 16:37:15
3263
转载 实现双向绑定Proxy比defineproperty优劣
前言双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一.Vue三要素响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定 模板引擎: 如何解析模板 渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染可以实现双向绑定的方法有很多,KnockoutJS基于观察者模式的双向绑定,Ember基于数据模型的双向绑定,Angular基于脏检查的双向绑定,本篇文章我们重点讲面试中常见的基于数据劫持的双向绑定。常见的
2022-05-08 11:52:56
422
转载 用自己的方式（图）理解constructor、prototype、__proto__和原型链
在看了网上很多相关的文章，很多都是懵逼看完，并不是说各位前辈们写得不好，而是说实在不容易在一两次阅读中理解透。我在阅读了一些文章后，自己整理总结和绘制了一些相关的图，个人认为会更容易接受和理解，所以分享在此。也因此以下的所有的理解和图解都是出于个人的理解，如果有错误的地方，请各位前辈务必见谅，并辛苦在下方提出和纠错，我实在担心自己不成熟的理论底子会误导了其余的小兄弟。一开始，先说说为何这个知识点为什么理解起来这么乱个人感觉原因有三：JS内函数即对象。 Function对象和Object对象这两
2022-05-01 22:32:19
1396
2
原创 vue中怎么重置data和data中某个属性的初始状态？
Object.assign（）方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象this.$data获取当前状态下的datathis.$options.data()获取该组件初始状态下的data。object.assign(this.$data, this.$options.data())使用场景：有一个表单，表单提交成功后，希望组件恢复到初始状态，重置data数据。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前
2022-04-27 12:09:39
1642
转载 html2canvas生成的图片偏移不完整
情景一：问题背景：生成的图片在一个弹窗里面，如果页面没有滚动条就是正常的，但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边，如下：解决办法：楼主查了很多资料，也用了很多方法都没能解决这个问题，一气之下打算研究研究html2canvas的配置参数，果不其然，在配置参数RenderOptions下找到如下配置眼尖的楼主立马发现了scrollY这个东西。没错，这个肯定是配置偏移量的对吧，既然你是向下偏移我页面滚动的高度，那我把scroll..
2022-04-15 11:05:14
1390
转载 如何在uni-app中计算出微信小程序导航栏的高度
为什么要拿到导航栏的高度拿到导航栏的高度当然是为了自定义导航栏，uniapp默认为我们提供了一个导航栏，也就是每个页面上面的标题，但如果对这个默认的导航栏不满意，我们就可以选择自定义导航栏，比如我在下面，为了满足业务需求，放了一个搜索框，取代了原先的标题栏。不仅仅是在导航栏放放东西，如果你要导航栏自定义大背景，也需要自定义导航栏，如下(图片来源网络)：小程序头部的几个参数如果我们要开启页面自义定导航栏，以首页index为例，我们要在pages.json中加入以下代码，它默认是defa
2022-03-21 12:09:22
18950
2
转载 JS 的 6 种打断点的方式，你用过几种？
Debugger 是前端开发很重要的一个工具，它可以在我们关心的代码处断住，通过单步运行来理清逻辑。而 Debugger 用的好坏与断点打得好坏有直接的关系。Chrome Devtools 和 VSCode 都提供了 Debugger，它们支持的打断点的方式有 6 种。普通断点在想断住的那一行左侧单击一下就可以添加一个断点，运行到该处就会断住。这是最基础的断点方式，VSCode 和 Chrome Devtools 都支持这种断点。条件断点右键单击代码所在的行左侧，会出现一个下拉框
2022-02-28 12:15:34
1867
原创 uni-app 淡入淡出 支持左滑右滑轮播图
<template> <view class="grapSwiper"> <view class="banner" @touchstart="touchStart" @touchend="touchEnd"> <image v-for="(value,index) in swiperList" :key="index" class="pic" :src="value.imagePath" :animation="num==inde...
2022-01-14 13:49:49
1243
转载 css 文本、文字展开与收缩，查看更多收起
<view class='containers'> <text class="content {{ellipsis?'ellipsis':'unellipsis'}}"> 飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发前二十阿里附近发打发打发是范德萨发放就开了房间爱离开房间爱卡房间爱疯爱疯飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发飞房间卡了飞机而来发发色法尔范发疯安峰山粉色案发 </text> <view bindtap='elli...
2022-01-07 10:59:47
1924
1
转载 Jenkins +miniprogram-ci 构建 发布、预览微信小程序
要实现这样的效果,需要下面3步：1.下载node依赖包miniprogram-ci，编写预览和上传功能2. 登录微信公众平台,下载项目的privateKey+添加代码上传IP白名单3. 安装配置JenkinsStep1下载node依赖包miniprogram-ci,编写预览和上传功能,在微信小程序项目下创建package.json，wxCI.js文件，package.json内容如下，执行yarn 或npm install指令 ,安装项目运行时需要的依赖...
2022-01-05 11:36:03
3190
1
原创 vue下载pdf、word、excel、png图片
知道文件的下载路径后，执行文件下载操作，支持 pdf、pdf、word、excel、png等资源。downItem(filename, filePath) { let link if (filePath.includes('pdf') || filePath.includes('png')|| filePath.includes('jpg') ||filePath.includes('jpeg')) { link = document.createElement
2021-12-07 19:34:04
876
原创 vue base64文件转pdf
//best64转Blobconst dataURLtoBlob = function (baseData) { var bstr = atob(baseData) var n = bstr.length; var u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: `application/pdf;char.
2021-12-07 19:32:04
1698
原创 elemen-ui 自定义 tabs 样式
::v-deep{ .el-tabs__item:hover { color: #3A4E64; } .el-tabs__item { color: #B4B4B4; font-weight: bolder; } .el-tabs__item.is-active { color: #3A4E64; ...
2021-11-16 10:51:12
1059
原创 使用Fiddler修改请求参数
1、下载比较新版的Fiddler2、进入到调试的页面，并填写好参数，以获取短信验证码接口为例3、先清空Fiddler列表中已经存在的请求，以便观察3、打开断点调试 (下面两种方式都可以，F11是快捷键)按F11 键盘快捷键或者如下图勾选 Before requests4、一切准备就绪后，点击你要调用的接口，比如我上图 获取短信验证码的接口在右边界面Inspectors 项目下，就可以对 请求的参数进行修改。根据请求类型 是TextView还是webForms进行修
2021-11-05 18:36:59
8811
转载 浅谈前端路由原理hash和history
众所周知， hash 和 history 在前端面试中是很常考的一道题目。在学习本文内容之前，周一对 hash 和 history 的认知可能就在 hash 的 url 里面多了个 # ，而 history 就不会。然后，我认知里还有一个是只有 history 才能做前后端分离，而 hash 跟前后端分离没有关系。然而，现实是……对于前端路由来说， hash 和 history 都可以用于前后端分离项目，且两者有各自的特点和各自的使用场景，在使用过程中主要要了解当前项目所处的场景，以便于更好地判断使用哪
2021-11-04 18:44:08
916
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人