- 博客(109)
- 收藏
- 关注
RSS订阅原创 微信小程序压缩wxml
背景：微信小程序添加webpack压缩之后，支持js,css等压缩，但是wxml没有找到对应的api，后来看到小程序可以启动自定义编译命令，兜兜转转找到了一些命令来实现wxml的压缩，记录如下，需要的伙伴自取。命令输入位置如下图：命令如下，可直接复制：以上可以实现wxml的代码压缩，感兴趣的小伙伴可以试试看效果！...
2022-06-27 10:09:35
1142
原创 微信小程序文件下载并保存
背景：某次需求有文件下载功能，查阅文档使用wx.saveFile下载之后使用者找不到路径，再查阅文档采取曲线解决问题，得wx.openDocument，然打开仍无法保存，关闭找不到，再查得，需要手动设置可分享，这样右上角就可出现分享功能，曲线解决了需求，资料和code记录如下：wx.downloadFile({ url: 'https://*******',//文件路径 success: function (res) { const filePath
2022-01-20 15:34:45
7469
原创 微信小程序新规，规范用户隐私保护指引
背景：新功能发版突然遇到弹窗提示，需要更新用户隐私保护指引的设置，否则无法发布新版本，这里吐槽一下，在此之前微信小程序后台消息并未收到相关通知。解决路径如下：入口有两处，第一处如图：第二处入口，发布版本时会有提示，直接拦截，让完善协议，如图：按照指示操作可见协议具体内容，按照要求完善信息，然后点击确定并生成协议就行了，但是审核应该需要一段时间，我们大概等了一个小时，再次提交代码就可以了，但是这时候才给出了关于这次协议的提示，有那么一丝丝感觉不太友好。详情如下图：以上是本次遇.
2021-11-08 11:43:51
8185
7
原创 养成好习惯，与君共勉！
前言：听听古人言，受益在眼前！凡事预则立，不预则废。——礼记·中庸 业精于勤，荒于嬉；行成于思，毁于随。——韩愈 世界会给知道自己要去哪里的人让路。——拉尔夫·瓦尔多·爱默生目标的重要性 一个人如果能制定合理的目标，那他就能事半功倍，大家都知道两点之间直线最短，目标就像大海中的一座灯塔，它也能时刻给你指引正确的方向，让你走“直线”。并且如果有了目标，你就会心所有念，会集中精力去实现它。诚如斯大林所说：“伟大的精力只是为了伟大的目的产生的"，有了明确可行的目标之后，人们也可以避免不...
2021-03-11 18:04:34
502
2
原创 剖析vue常见问题（四）之vue中的diff算法
背景：首先diff算法不是vue的专属，只要采用虚拟dom的框架基本都会采用diff算法，那么为什么要采用diff算法呢以及diff算法的好处是什么呢？我们还以vue为例，从源码层面做下分析，分别说明一下diff算法的必要性(/src/core/instance/lifecycle.js中的mountComponent（）方法)、执行方式（/src/core/vdom/patch.js中的patchVnode（）方法）以及带来的高效性（/src/core/vdom/patch.js中的updateChild
2020-11-11 18:10:58
817
原创 剖析vue常见问题（三）之vue中key的作用和原理
背景：说到vue中key的作用，大家都知道它可以唯一的确定一个dom元素，从而执行diff算法时更加高效，但是想更加详细的知道具体原因，我们还是需要从源码入手，详见源码：src/core/vdom/patch.js中的updateChildren()方法，当然我们也用demo来说明，demo如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title
2020-11-10 18:09:45
1089
原创 剖析vue常见问题（二）之组件的data为什么要定义为函数，而根实例的data则没有限制？
背景：vue组件话是它的特点，经常定义组件的我们会知道把组件的data定义为函数，也知道是为了避免数据污染，而跟实例则没有强制要求(因为根实例是单例，不用担心数据污染)，具体原因是什么呢？我们也从源码来做分析吧，详见源码：src/core/instance/state.js中的initData()方法，当然我们也用demo来说明，demo如下：<!DOCTYPE html><html lang="en"><head> <meta charset="
2020-11-10 18:08:46
667
原创 剖析vue常见问题（一）之v-for与v-if的优先级
背景：vue中经常使用到v-for和v-if，那么它们的优先级是怎么样的呢？怎么才能实现性能优化呢？下面来简单分析一下，如何分析，请参考以下测试demo，以及源码中参考src/compiler/codegen/index.js。demo代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue v-if v-for</t
2020-11-10 18:08:07
1916
原创 Mac安装brew（极简模式）
背景：brew是Mac下的软件管理包工具，重要性和方便性就不用说了，找了很多教程都报错，后来找到一种极简的傻瓜模式，分享给大家。执行下面命令，按照提示去做一路到底即可。/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"以上步骤即可完成brew的安装，希望能帮助大家少走弯路。...
2020-09-09 10:45:58
451
原创 2020web前端面试整理
背景：2020年是比较特殊的一年，由于新冠影响导致很多事情发生了变化，同时也改变了人们的一些常规习惯，就拿换工作来说，为了减少大家的出行和接触，线上视频、电话面试成了趋势，但是万变不离其宗，技术才是王道，下面是个人近期的一些面试经验和需要大家知道的问题整理给大家，希望大家都能够有所提高，面试就像相亲，希望大家都能够顺利找到彼此满意的那个，哈哈。Html、Css篇1.谈谈你对h5标签语义化的理解以及语义化的优点2.html5新增的标签有哪些？(结构标签：article、aside等、表单标签：vi
2020-09-04 17:22:57
777
4
翻译 http缓存整理
背景：无论是前端还是后端对http都是比较熟悉的，今天来简单整理一下关于前端缓存的http缓存部分，详细介绍如下：前端缓存：前端缓存可分为两大类：http缓存和浏览器缓存。我们今天重点讲的是http缓存，所以关于浏览器缓存大家自行去查阅。下面这张图是前端缓存的一个大致知识点：HTTP缓存一.什么是http缓存http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。常见的h
2020-07-21 14:40:33
481
原创 防抖和节流简介
背景：近期经常被问到防抖和节流，之前项目中也有遇到并且解决过，猛地一问这么专业的术语如果之前没有听过还真容易发蒙，因此简单整理一下，希望对需要的小伙伴们有所帮助。可能需要做防抖和节流的场景简单整理如下：1.判断回到顶部按钮的显示时机，一般需求是当页面滑动距离顶部一定距离之后才需要显示，此时我们一般只需要监听浏览器滚动事件，返回当前滚动条与顶部的距离。代码如下：function showTop () { var scrollTop = document.body.scrollTop |
2020-07-01 15:21:39
1478
2
转载 vue插件开发(时间播放器)，发布到npm
起因：因项目需要一个时间轴播放插件，根据时间渲染一些数据。从网上也查找了许多，但大多不太合适。所以想自己开发一个并发布到npm。 本篇文章主要介绍过将组件发布到npm的过程，如看组件源码项目源码&文档1、项目初始化首先，要创建项目，封装vue的插件要写的是一个简单的vue组件不需要依赖那么多而庞大的配置，所以，这里用简单版本的webapck配置模板：vue init webpack-simple my-project然后在在src下创建一个lib文件夹包含index.js和vue-t.
2020-06-23 15:26:51
1797
原创 js深拷贝
背景：深拷贝和浅拷贝的理解对处理一些数据很有帮助，为了更好地区分它们的区别，对于深拷贝的方法整理如下：关于深拷贝和浅拷贝的更多细节，请参考js深拷贝和浅拷贝小结一、赋值、浅拷贝与深拷贝的区别二、深拷贝的方法1.JSON转换var targetObj = JSON.parse(JSON.stringify(copyObj))let arr4 = JSON.parse(JSON.stringify(arr))缺点：（1）如果对象里有函数,函数无法被拷贝下来（2）无法拷贝c
2020-06-23 15:11:19
468
转载 JavaScript 执行机制（宏任务和微任务）
本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是...
2020-03-19 14:21:13
800
原创 微信小程序（十一）在wxml中使用自定义函数
背景：我们有时候需要在wxml中使用一些运算，包括但不限于四则运算、三目运算等，我们如果想要使用自定义的一些方法，就需要使用wxs来实现了，下面代码简单介绍了列表中倒计时的实现方法，以及使用wxs把时间戳转换为年月日时分秒的方法。详见代码：目前小程序增加了直播功能，为了在直播列表中加上开播倒计时提醒，我在wxml中简单使用了wxs实现，具体代码如下：wxml代码如下：<wxs ...
2020-02-26 16:35:59
2633
2
原创 H5清理微信缓存的方案
背景：H5移动端开发，尤其是基于微信的公号开发，往往伴随着很严重的缓存问题，影响测试和开发人员的感情，为了解决这个问题，找到以下清除缓存的方式，希望对增进开发和测试人员的感情有所作用。方案：安卓端清除缓存的方法如下：http://debugx5.qq.com IOS清除缓存方法如下：1.打开微信，找到“我-设置-通用-存储空间-清理微信缓存” ...
2019-11-12 11:03:16
3612
原创 完美解决移动端滚屏问题
背景：移动端开发又弹出框时，下面页面还是可以滚动，本身也不是问题，但是有时候需要弹框出现，底部禁止滚动，如果需要，以下代码可以帮你实现效果：// 在需要弹窗的代码里 调用stopBodyScroll ("true");// 在关闭弹窗代码里 调用stopBodyScroll (); var bodyEl = document.body; var scrollTop = ...
2019-10-11 15:54:37
903
原创 微信小程序（十）之消息推送配置（token验证失败的解决方案）
背景：微信小程序开发，准备使用模板消息做些事情，但是发现需要先在微信公众平台的开发——开发设置——消息推送做配置，然后我们后台人员就开始各种配置，但是一到验证token就报错，很是郁闷，然后各种排查，发现了最终原因，过程和代码如下：很多网站给出的服务器代码如下：//检查签名 public function checkSignature(Request $request) { ...
2019-08-21 14:01:37
2999
原创 监听屏幕滚动开始和结束事件(scroll start 和scroll stop)
背景：最近在写一个专题页，产品要求右边导航栏在滑动的时候收起，滑动停止时显示，这样就需要监听到屏幕滚动（scroll start）事件和滚动结束(scroll end)事件，但是又不能为了这个功能专门引入jQuery mobile这个库，所以找到以下方法进行实现，基于jQuery 封装的插件。解决方案：（jQuery1.9版本及以后）插件代码如下/** * 函数：scrollstart...
2019-07-16 09:01:42
5033
2
原创 微信小程序开发（九）之开发版和测试版小程序打不开的问题
背景：小程序开发中会遇到手机打开开发版或者体验版进不去的情况，刚开始以为是网速等原因，一番测试操作之后发现是别的问题。原因：小程序开发版或者测试版，通过手机登录的时候，由于某些原因（具体不清楚，目测跟微信的调试功能有关）导致接口不调用，小程序无法进入。解决方案：可以在手机上打开调试功能，再次进入就可以了，一个简单又不简单的坑，希望对遇到同样问题的开发者有所帮助。...
2019-05-28 09:58:48
5726
2
原创 Vue出现弹出层时，禁止底部页面跟随滑动
背景：最近在写一个vue项目，当出现弹出层时，发现底部页面跟随滚动，但是产品不想要这种效果，于是找各种资料，发现很多说法，但是试了试，发现有的根本就不行，比如说有人提出用vue中提供的@touchmove.prevent方法来解决，但是我试了没起作用，或者@touchmove.prevent.stop也不起作用。下面是几种可以解决问题的方式，仅供参考：1.在有弹出框的页面中，加上以下方法，弹出......
2019-04-24 14:57:13
8000
13
原创 vue路由跳转时定位到页面顶部的方法汇总
背景：在做vue项目时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法：方式一：在main.js中添加以下代码即可：router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0...
2019-04-16 14:21:55
6866
2
原创 瞎写
有人说人生有两大禁忌，一忌踌躇满志，一忌心灰意冷，别人我不知道，但是对我来说，似乎一直都在这两种情绪之间跳转，说实话写这篇文章的此时我应该是处于心灰意冷这个点的。下面就随便说说当处于这个点时，自己产生的一些想法。 首先，处于这个状态时整个人肯定是十分悲观的，此时的我思绪飞散，配合一些悲伤的音乐，不由自主会杜撰出很多悲伤的故事。如果自己仔细想想以前的经过，就感觉自己一...
2019-04-15 17:14:10
496
2
原创 微信公众号实现“一键关注”功能
背景：之前用的一键关注要么通过图文，要么通过二维码，这样甚是麻烦，而且引导不到位，而看到朋友圈打广告的一些公众号可以直接关注，于是一直研究这个功能，今天终于实现了，分享给所有朋友，希望能帮助到所有朋友，这个引导关注的页面包含了公众号的logo、介绍和历史消息，能够更大层度的吸引用户关注。具体实现步骤：1.随便进入一个公众号，点击右上角的小人头，进入查看公众号信息页面；2.在页面下方...
2019-02-26 10:25:41
14722
6
原创 Vue之Axios跨域问题解决方案
背景：因为axios中只能使用get和post方法来进行请求数据，没有提供jsonp等方法进行跨域访问数据 axios中文网址：https://www.kancloud.cn/yunye/axios/234845// axios 中的GET请求axios.get('/user', { params: { ID: ‘001’ } }) ...
2019-02-19 14:32:31
259337
114
原创 微信小程序开发（八）button按钮去除圆角
背景：小程序使用button，会有一个默认圆角，如果修改数值比较容易，想要去掉就可能遇到坑。原因：小程序的设计风格是button的border和圆角等都是通过after写的，如果需要去掉圆角效果，最好是使用如下代码：button{ border-radius:0;}button::after{ border-radius:0;}通过以上代码可以去掉小程序的bu...
2019-01-14 15:26:06
3841
原创 微信小程序开发记录（七）新版授权登录的实现
背景：由于微信官方修改了 getUserInfo、authorize 接口，无法弹出授权窗口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发，这样就需要我们加一个授权页面去搞定了。前提：微信授权登录仅适用于使用微信用户信息的用户，如果自己的项目有完善的用户信息（一套式开发项目），可不使用微信用户信息；如果仅为微信小程序，则要授权、获取用户信息。实现思路：自己...
2019-01-14 13:46:32
19233
9
原创 在安卓上解决input调起软键盘之后容器高度被挤压的问题
问题描述：一个简单的带有背景图片的登录页面，结果调起软键盘之后在安卓手机上出现了背景图片无法充满整个页面的问题，即使容器高度设置100%也不好使，后来只能使用监测window的size变化，从而重新给背景图容器赋值的方法，代码如下：//安卓弹出框图片压缩解决方案 var clientHeight = $(document.body).height(); $(window).resiz...
2019-01-14 11:43:15
1738
原创 H5微信开发iOS真机上input调起软键盘后不回弹的解决方案
问题描述：input输入在iOS的微信中调起软键盘之后，输入完成收起软键盘的时候页面下方（原来软键盘的位置）有空白，这将导致下方fixed定位按钮失效等问题，解决方案：通过给input添加失去焦点事件，触发该事件的时候使页面自动滑动到顶部，亲测有效，代码如下：$("input").blur(function(){ setTimeout(function() { ...
2019-01-14 11:08:20
5033
原创 rem解决不同宽度手机的适配问题
简单记录如下，不同手机按照宽度不同计算不同的html的font-size，即可实现，代码如下，直接放入即可。 var fun = function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ?...
2018-12-11 09:40:03
1443
原创 微信小程序开发记录（六）页面跳转的几种方法和区别
微信小程序页面跳转的方式有两种，1.wxml中使用标签跳转；2.js中使用微信提供API实现跳转；具体介绍如下：1.在wxml中使用标签跳转<navigator url="../index/index" open-type="navigate">跳转到新页面</navigator> <navigator url="../index/index" open...
2018-11-30 17:17:39
1480
原创 微信小程序开发记录（五）小程序提供下拉刷新以及注意事项
小程序提供原生下拉刷新方法的使用以及注意事项如下：1.首先要在需要下拉刷新功能的页面的json文件中，添加以下代码：{ "navigationBarTitleText": "订单列表", "enablePullDownRefresh": true //此处为需要添加的下拉刷新启用字段}2.在对应页面的js文件的onPullDownRefresh方法中实现数据请求等处理，此...
2018-11-28 09:22:35
576
原创 微信小程序开发记录（四）地址栏传参之true和false的坑
先看看小程序地址栏传参的方法，如下wxml: <view class="weui-cells weui-cells_after-title" wx:if="{{isNewUser}}"> <navigator url="../address/address?isNewUser=true" class="weui-cell weui-cell_access n...
2018-10-31 15:27:51
4746
3
原创 微信小程序开发记录（三）顶部导航栏切换实现
微信小程序实现顶部导航切换效果可用swiper来实现，效果如下：代码如下：WXML:<view class="page"><!--顶部导航栏--><view class="swiper-tab"><view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-curre
2018-10-10 08:49:02
9557
17
原创 微信小程序开发记录（二）菜单栏或者某个元素吸顶功能实现
直接上代码：wxml：<view class=" {{menuFixed ? 'fixed': ''}}" id="fix">某元素</view>wxss:.fixed{ position: fixed; top: 0; left:0; right:0; }js:data:{ menuTop...
2018-09-21 16:01:16
2143
原创 微信小程序开发记录（一）弹出框和模态框介绍
弹出框和模态框的简介和使用方法如下：<view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap=&
2018-09-14 11:04:34
15151
2
转载 什么是MVVM，MVVM和MVC的区别？
1. Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现...
2018-08-30 15:59:14
16952
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人