- 博客(63)
- 收藏
- 关注
RSS订阅
原创 微信小程序分享到朋友圈
截止到2017年11月18号，微信小程序官方还尚未开放直接分享到朋友圈的能力，但是劳动人民的智慧是伟大的【狗头】 现在普遍的做法是，生成一张带有小程序码的图片，保存到用户相册，用户自行发布图片到朋友圈我的套路：请求后端API生成小程序码（生成小程序码需要access token，后端生成比较方便）canvas绘制文字和图片到画布画布转成图片当用户点击分享到朋友圈时，给用户展示图
2017-11-18 19:01:19
67877
34
原创 redux异步中间件比较
redux很精简，只处理同步数据流, 异步交给中间件处理view -> action -> reducer -> store生猛的就不用中间件使用：在view层中发起api请求，在请求的回调中dispatch(action)缺点：view和modal耦合redux-thunk （模板代码有点多但是场景基本cover得住）使用：redux中action默认返回的...
2020-03-10 21:32:34
463
原创 国际化node工具
功能：将分布在各个模块下的翻译文件，合并生成一个json文件// apodidae/src/utils/CreateJson.js/** * 说明： * 1. 使用这个命令需要将所有需要国际化的文案写在对应目录下的messages文件或者utils下的公共messages中； * 2. 请勿直接操作 例如 zh.json 文件， 因为使用命令时是全量覆盖。会导致丢失； */co...
2020-02-13 19:32:43
336
原创 react项目国际化
文章目录一：国际化的实现原理二：用react-intl实现国际化一：国际化的实现原理准备自己翻译好的语言包例如zh.json、en.json（结构为{ ‘hello’: ‘你好，世界’}），用一个变量存储当前选择的语言locale，根据locale选择应用哪个json, 再根据id ‘hello’，替换为对应的message ‘你好，世界’二：用react-intl实现国际化步骤概要...
2020-02-13 19:20:53
1886
1
原创 图解http
图解http 读后感1. 为什么要读这本书2. 阅读1-6章3. 下一步计划1. 为什么要读这本书http是前端工程师每天工作内容很重要的一部分，说浅薄一点，前端菜鸡的工作大抵分为三部分：写css样式、写js交互逻辑、发HTTP请求。对HTTP的使用很频繁，对他的理解很有限。想必大家面试、或者作为面试官，或多或少都问过http的内容，最烂大街的一个问题就是“当用户在输入框键入一个URL，会发...
2020-01-21 15:30:16
304
原创 埋点SDK原理与实现
文章目录埋点分析一.埋点是什么二.为什么要埋点三.怎么做埋点举例Google Analytics服务提供的主要功能四.埋点的实现原理1.用户使用方式1.全局注册2.手动埋点3.无埋点2.实现原理1.如何将事件上报2.如何收集pv/uv3.如何收集无埋点的事件埋点分析安利背景：作为一名优秀的程序员，仅仅满足于无条件百分百空手接白刃PM提出的需求可还行？一句"这个功能是刚需"就想骗得我们加班成秃...
2019-11-15 16:24:41
14087
1
原创 尝试写个不坑后来人的ReadMe
fe-speed1. 开发语言typescriptlesshtml2. 特性react 组件化开发typescript 强类型语言git submodule 维护公共模块antDesign 规范的后台交互视觉风格3.支持环境chrome 49及以上node 建议最新稳定版本3. 业务简介极速干线是一个后台管理系统，在供应链(TS)生态中承担运输管理系统(T...
2019-08-05 15:04:34
238
原创 ant-design Table组件错位/对不齐
此篇乃小伙伴们在花式踩坑antdesign的table组件后，总结的专治对不齐的十全大补丸，望君趁早服用及时康复，如果你还踩出了更多花样对不齐，欢迎臭jio的你前来补充
2019-06-28 15:30:42
39466
12
原创 当我们使用webpack、babel时，我们是为了什么
对于前端的学习，我们都是从原生的html、js、css写起的，还记得第一次用浏览器打开index.html页面看见hello world时的欣喜吗？可能我们都是从那一刻爱上所见即所得的前端吧~随着基础知识的夯实，我们会投入到较大的项目开发之中去，为了获得更多工具函数、为了代码结构更有组织性等等原因，我们逐渐引入各种工具库，使用甚至开发一个框架。当我选择了一个框架，比如流行的react，（因为我...
2019-05-12 19:13:44
823
原创 npm login无响应
当你想要发布一个npm包的时候，会被要求先login或者adduser，当我按照提示输入username、password、email后，等待很久报错连接超时，从提示看应该是因为我开了vpn。正常情况不开VPN就是可以连接到npmjs.com的。但是我关闭VPN后npm login，连接也无响应。应该是我家WiFi的锅？换了公司的就无障碍。 最后搜到了一个命令可以解决✨npm logi...
2018-09-17 11:05:59
5380
2
原创 setState(…): Can only update a mounted or mounting component. This usually means you called setState
1.遇到的八阿哥：Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the u...
2018-08-15 21:42:51
869
原创 自定义组件实现底部弹出菜单
1.效果图 点击客服按钮，从底部弹出菜单栏 点击微信在线客服，可以唤起微信客服2.为什么要自己写菜单栏？ 微信原生的菜单栏不支持直接唤起微信客服呗，难受== 不想说话了，贴代码3.代码段定义组件<!--components/customerService/customerService.wxml--><view...
2018-06-28 22:05:26
4254
1
原创 微信模版消息发送失败
原因分析： 1.同一个微信用户，登陆iOS系统，获取form组件submit后的formId是这样的格式：472be418fa10c861fea8faadba4caf8b; 在android下，formId格式是：1527130096088 这样的时间戳格式。两种formId都存在一个账号下，不区分平台存储和发送会导致失败 2.第二个就是微信官方的bug了，一个formI...
2018-06-28 21:15:38
3957
原创 小程序滑动菜单栏吸顶
1. 效果图 菜单正常嵌入在页面中 菜单位置滑动到距离可视窗口0px时，脱离文档流固定在页面顶部2.常见实现方案查询菜单栏距离文档顶部的距离menuTop监听页面滚动距离scrollTop当页面滚动距离scrollTop > menuTop菜单栏距离文档顶部的距离时，菜单栏固定定位<view class="menu {{menuFixed...
2018-06-28 20:58:27
26824
5
原创 生鲜商城小程序项目总结
生鲜商城小程序项目总结1.项目需求 实现B2B的生鲜商城小程序，具有商品展示、加入购物车、提交订单、微信支付、推送微信模版消息等基本购物流程，还包括登陆注册、信息审核、个人中心等辅助功能。2.项目排期 因为有类似功能的小程序代码可供参考，且有3个人不同程度的参与开发，实际开发时间为3周，后续维护了3周二期就移交其他人员了3.值得一提的技术点 因为之前有开发过...
2018-06-28 15:16:36
7220
3
原创 Vue.js响应式模拟实现
Vue.js MVVM 框架的三大要素： 1.响应式 2.模板引擎 3.渲染 本篇文章主要模拟实现一下Vue是怎么实现响应式的1.先实现一个最简单的Vue实例<div id="app"> {{name}} {{age}}</div>var vm = new Vue({ el: '#app', data...
2018-04-07 17:21:59
943
原创 反思与前行
全职开发一年半了，夜深人静时，回过头来，想做一点反思与总结，为了更好地前行~1.我做了些什么？参与开发了有复杂权限管理系统的部分模块 因为业务需要，所以入门的第一个框架是angularjs，虽然学习成本比较高，但是正是由于他的强规范性，使得新加入的成员可以快速的按照规范进行开发，且功能强大。由于angularjs和angular的差异性比较大，业务也已经成熟，就没有进...
2018-04-02 23:57:04
380
原创 继承的几种方法
继承的几种实现方式与优化 function Parent(){ this.name = 'parent'; this.arr = [1,2,3] } function Child(){ this.age = '3'; }//1.改变父类构造函数运行时this的指向function Child(){ Parent.c...
2018-03-21 00:23:52
268
原创 new构造函数的实现原理
当我们说new一个对象的时候，实际做了些什么？ 下面通过代码模拟一下var newFunc = function ( func ){ //1.新建一个空对象，并将 构造函数的原型对象赋给这个空对象 var obj = Object.creat(func.prototype); //2.执行构造函数，相应参数被传入，并将this的上下文指向新创建的对象...
2018-03-18 23:53:02
5571
1
原创 instanceof判断构造函数的实现原理
instanceof用法： obj instanceof func//true or false //obj实例对象，Func构造函数 instanceof原理 实例obj的原型对象（严格意义上是原型链上的对象即可）与构造函数func的prototype指向统一对象即返回true //判断原理：obj._proto_ === FuncA.protot...
2018-03-18 23:30:51
1091
原创 数据类型转换
1.数据类型转换分为：显示类型转换、隐式类型转化 显示：主动调用 Number、Boolean、String方法 隐式：系统自动转换 (1)进行四则运算 （2）条件判断 （3）native调用，（eg:console.log /alert时）2.数据类型包括7种 1)原始类型： Boolean String Number Symbol undefined null...
2018-03-15 14:35:51
158
原创 DOM事件-事件委托-自定义事件
1.dom事件的级别（发展史）dom0: element.onclick= function(){}dom1: (没有规定事件相关内容)dom2: element.addEventListener(‘click’,function(){})dom3: element.addEventListener(‘keyup’,function(){}) 除了鼠标点击click事件外，还提供了键...
2018-03-15 00:00:53
830
原创 盒模型和清除浮动原理
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-
2018-03-14 15:05:19
241
原创 三栏布局的5种常见解决方案
三栏布局的5种常见解决方案1.如图效果2.代码实现<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
2018-03-12 23:37:52
320
原创 微信浏览器-复制到剪切板-clipboard.js插件
之前写过一篇博客，介绍一个复制到剪切板的插件，ZeroClipboard，什么都hen好，然而就是不支持微信浏览器，我也没找到什么解决方案，我就严正拒绝了产品经理的需求。 直到今天被产品看到一个其他yin的h5，竟然可以实现复制到剪切板的功能，啪啪打脸~ 看了下用了个叫clipboard.js的插件，用法超简单了引入插件<script type='text/javascript
2017-11-28 23:23:56
10844
5
原创 sass与scss的区别
用了很久css预编译器，但是一直不太清楚到底用的sass还是scss，直到有天被问住了有点尴尬，找了个教程撸了遍==。。。异同：简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号//sass 太费眼了.father width:100px; .son
2017-11-18 19:40:46
39031
1
原创 图片和文字垂直居中-flex布局
因为float和position用的比较熟，所以flex只是了解了一下，基本不用。但是今天发现了flex在处理图片和文字对齐方便真是超爽der~ 1.需求 就是一个盒子里面，图片和文字垂直居中 2.惯用套路 我之前的解决思路都是给图片设margin，给文字设line-height, 为了适配单位一般都不是px,用百分比设置，基本都是靠调试效果调出来的，非常不
2017-11-16 23:41:56
16344
1
原创 获取远程分支失败
同事上传了一个新分支，然而webstrom不知为啥没有检测到新的分支，只好回归git命令行//1.查看所有本地和远程分支，此时还显示不出我想添加的远程新分支git branch -va//2.将远程分支信息获取到本地git fetch//3.此时可以看见新分支了git branch -va//4.这个应该是设置数据流映射git branch --set-upstream-to or
2017-11-14 11:14:08
954
原创 搭建nginx做测试服务器
1.为婶喵 要搭建测试服务器 因为公司目前开发+测试的整体流程不太完善，加之很多小项目的用户量比较小，我很多小项目的开发与测试，都是令人发指的直接在正式服务器上进行的== 没上线之前还好了，随意修改覆盖也没有人知道，但一旦上线后出了任何bug，都是一顿盲改，然后颤抖着双手把不知道究竟是hotfix还是hotbug push上去。。。2.为婶喵 要用Nginx做反向代理 经过了几次
2017-11-13 16:42:29
932
原创 微信小程序踩坑——Android真机调试问题
如果api请求在URL中拼接了字符串/汉字，那么需要对拼接字符串进行encodeURIComponent() 编译。否则Android真机上自动编译字符串可能编译出空格，导致API请求失败。 而ios/微信开发者工具上是不会出现这个问题的，不知道的话简直狗生疑惑、、、 eg: url: ‘http://haha.zhengjingwangzhan.com?query=‘+enc...
2017-10-25 11:02:29
5884
原创 微信小程序踩坑——项目内文件夹删除不掉
想要删publishTask文件夹，在IDE里删没反应，去文件资源管理器删提示需要管理员权限， 太鬼扯了，原来因为要删的文件夹里有嵌套一层文件夹，所以禁止删除。要先删掉里层文件夹，才可以删除外层。换句话说，想要删除的文件夹要保证不包含文件夹。
2017-07-26 00:05:53
12312
原创 微信自定义分享好友/朋友圈信息失败
1.踩坑 最近项目开发微信h5小游戏踩了个坑，自定义分享给好友/朋友圈的信息原来也写过，套路按照官方文档写的就是 1.先调wx.config()配置 2.再调wx.ready(callback),表示配置成功后调用其他jssdk，（如果初始化页面就配置wx.onMenuShareTimeline()等api,最好放wx.ready回调函数callback里执行）。 一切
2017-07-13 00:01:40
2923
原创 webstrom自动编译sass文件为css
操作步骤如果输出的css文件位置没有特殊要求的话，就无需修改6、7了。生成的css和sass同路径。设置完成后，当任意修改sass文件后保存，立即会生成css文件
2017-06-23 12:36:31
520
原创 拷贝到剪切板——一个flash实现、兼容性不错的js插件ZeroClipboard
1.需求2.为什么推荐用插件浏览器对js实现拷贝页面信息做了限制，原因是随意获取客户端页面上的信息，可能会发生用户输入的账号、密码等信息，被不法分子在用户不知情的情况下拷贝发送给服务端，导致用户信息泄露。IE好像还是提供了js拷贝页面信息的接口的，但是Chrome和Firefox就没那么容易实现了。所以推荐一个兼容主流浏览器的js插件，ZeroClipboard。3.简单用法只是为了实现需求，没
2017-04-27 14:08:39
1294
原创 es6 — 基本语法
1.let、const命令1.1暂时性死区 ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。 总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现
2017-02-16 17:10:53
308
原创 移动端适配方案
1.百分比适用场景：height=100% (为视口高度)<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m
2017-01-08 17:49:25
351
原创 zepto部分报错及解决方案
报错1：touch_events.html:27 Uncaught TypeError: $(...).tap is not a function 原因:zepto将部分功能都分散在各自的模块了解决：如果用tap功能，需要去github下载touch.js模块并引入；------------------------------------------------------------------...
2016-12-29 16:48:02
7133
2
原创 webstrom快捷键
ctrl+c 复制ctrl+v 粘贴ctrl+x 剪切一行或删除一行ctrl+d 复制本行到下一行ctrl+z 退回之前操作ctrl+shift+z 已经做好的退回之后的下一步ctrl+a 全选ctrl+/ 注释行ctrl+shift+/ 注释选定区域ctrl+g 查找行号ctrl+shift+up/down 上下移动代码table 补齐代码ctrl
2016-12-25 23:25:08
543
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人