ahao430 的博客

最近搭建了一套基于vue-cli的后台项目。 vue-cli3，安装vue全家桶 UI采用的是ant-design-vue 考虑到主题切换需求，css采用了vue-styled-components npm scripts配置多环境 引入immer.js操作对象 安装mockjs方便开发 引入了storybook管理组件 使用webpack-dll-plugin优化打包 1. 目录结构12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455.├── .ci├── .git├── .storybook ........................................storybook配置文件│ ├── main.js│ ├── manager.js│ └── preview.js├── dist├── node_modules├── public│ ├── vendor ...................

移动端的列表页加载，一般是下拉加载更多，当翻页较多时，页面渲染节点太多，就会造成页面卡顿。需要对长列表进行优化，达到无限下拉。在微信小程序的扩展组件有一个recycle-view实现的长列表，支付宝没有长列表组件，需要我们自己开发。 实现原理长列表渲染节点过多造成卡顿。 实际上我们只需要渲染可视区域即可，对视口以外的部分，可以用padding或者一个指定高度的view来合并代替。监听页面滚动，修改渲染部分。这样不管我们怎么滚动，页面中渲染的节点数量是固定的。实际上考虑到用户感受，前后页面也进行渲染。 此时的问题就是计算了。列表还是那个列表，我们要根据scrollTop计算从哪个到哪个元素显示，计算顶部和底部高度。另外，列表的元素高度可能不固定，要传入函数动态计算。 组件设计模板我们设计成这样，通过具名slot传入元素。外部传入list用于计算，同时通过recycle-item-{{index}}的slot来传入列表元素渲染。通过控制渲染的index，来控制渲染部分，同时通过pt和pb的值控制上下空间。 微信的recycle-view还有一个recycle-item组件，这就造成了...

1. 相关说明SSL证书分为个人DV、企业OV、企业EV三类。免费SSL证书都是DV。 个人的一般三个月就要续期，且安全性较差。EV最安全，适合银行等客户使用。 证书的域名又有单域名和通配。 购买证书网站：https://www.getssl.cn/ 2. 购买证书这里以阿里云为例。 登录阿里云，菜单选择安全（云盾）->SSL证书（应用安全），点击购买免费证书。 选择免费证书，购买。 到证书控制台，找到未签发的证书。点击证书申请，填写资料。 这里域名验证方式要选手工，因为我们的域名解析不在阿里云上。提交审核得到验证信息，去域名管理添加记录。 等待解析生效，点击验证。验证成功，提交审核。可以看到现在状态是申请审核中。 审核通过，下载nginx证书，点击帮助可以看到nginx相关SSL配置。 3. 配置nginx服务器下载后，登录服务器，在nginx目录新建cert文件夹，放入解压后的两个文件。 再找到nginx配置文件，对应的server建立443端口server，加入ssl配置。ssl证书的路径对应刚刚的cert路径。 之前的80端口加入重定向。 最后，重启n...

1. 相关说明SSL证书分为个人DV、企业OV、企业EV三类。免费SSL证书都是DV。 个人的一般三个月就要续期，且安全性较差。EV最安全，适合银行等客户使用。 证书的域名又有单域名和通配。 购买证书网站：https://www.getssl.cn/ 2. 购买证书这里以阿里云为例。 登录阿里云，菜单选择安全（云盾）->SSL证书（应用安全），点击购买免费证书。 选择免费证书，购买。 到证书控制台，找到未签发的证书。点击证书申请，填写资料。 这里域名验证方式要选手工，因为我们的域名解析不在阿里云上。提交审核得到验证信息，去域名管理添加记录。 等待解析生效，点击验证。验证成功，提交审核。可以看到现在状态是申请审核中。 审核通过，下载nginx证书，点击帮助可以看到nginx相关SSL配置。 3. 配置nginx服务器下载后，登录服务器，在nginx目录新建cert文件夹，放入解压后的两个文件。 再找到nginx配置文件，对应的server建立443端口server，加入ssl配置。ssl证书的路径对应刚刚的cert路径。 之前的80端口加入重定向。 最后，重启n...

1. 环境变量vue-cli支持环境变量，vur-cli-service命令可以通过–mode读取不同的配置文件，从而读取不同的变量。 在项目根目录新建.env.开头的配置文件： .env.build-prod文件： 12NODE_ENV=productionVUE_APP_ENV=prod 在package.json中通过–mode传入配置文件的名字： 12345678910111213141516{ "scripts": { "start": "vue-cli-service serve --mode dev-test", "serve": "vue-cli-service serve --mode dev-test", "dev": "vue-cli-service serve --mode dev-test", "dev:test": "vue-cli-s...

1. 框架问题组件中使用setData等api报错在多层组件嵌套中，有些异步操作时页面已经销毁，此时组件执行相关代码就会报错。因此，在深层组件中，最好对一些操作尤其是异步操作，先判断this.$page是否存在。 修改导航栏文字颜色导航栏文字颜色不可直接设置，但是可以通过my.setNavigationBar设置背景色，颜色会根据背景色是深色还是浅色自动控制。即使导航栏设置为透明，依然可以设置背景色来控制右侧收藏和退出按钮的颜色。 隐藏页面标题可以通过my.setNavigationBar将页面标题设置为空来隐藏，同时设置页面背景色可改变文字和右侧组件颜色（反色黑或白）。但是实际发现标题为空在ios不生效，会显示小程序标题。 解决办法：设置为’ ‘。有个空格就不会判空了。 12345 my.setNavigationBar({ title: ' ', backgroundColor: '#000', borderBottomColor: '#000',}) 组件createSelectorQu...

在小程序实现一个transition组件，实现类似vue和react的transition的过渡效果。 分析vue的transition是接收一个name，以这个name在过渡的几个阶段生成不同的class。然后对这几个class设置相应的css3的transition或animation动画，来实现显示和隐藏的过渡动画。 这样，我们就可以先设置初始状态（enter, leave），再在下一次渲染阶段执行相应的active来触发开始的动画。再在transitionEnd或者animationEnd时执行enter-to和leave-to来触发结束动画，达成最终状态。 另外，小程序中无法获取this.props.slots或者this.props.children，所以我们可以直接将组件的显示和隐藏状态做为参数传递进来。但是为了显示动画，不能立刻改变状态，要等待动画完成。 实现12345<view class="my-transition {{name}} {{name}}-{{step}}" onTransitionEnd="onTransi...

之前使用git都是pull和push，对commit没有整理，合并提交到线上后，commit记录比较杂乱。对commit进行整理后再提交，可以更清晰的查看代码。 前期准备 一个在线关卡式的学习网址：链接，可以学习git的各项命令。 一个git commit的包：git cz。使用它代替git commit命令，可以规范commit。 使用vscode查看git分支历史 分支管理 本地分支留一个个人的dev分支，其他的删掉 每次新的需求创建临时的feature分支或fix分支 开发完成后，将所有feature分支合并到个人dev分支，再合并项目dev分支去推送远程，管理员拉取后再合并到master分支更新。 commit管理 对当前未推送的commit记录，可以通过git rebase -i进行编辑（调整顺序，合并等） 可以通过git cherry-pick挑选指定commit复制到当前分支 可以通过git commit –amend来修改之前的提交 对于同一个分支合作时别人提交了代码，可以通过git fetch先拉取，然后git rebase -i调整顺序，再通过git co...

如图，项目迭代中需求开发一个tab页，可以左右滑动切换，全屏，上面tab可点击切换，横向超过一屏时，选中项要自动居中；内部嵌套一个分组商品组件，同样滑动切换，高度自适应（异步），下拉时要吸顶，小球要有动画效果。 支付宝小程序提供的tab组件不满足需求，自己实现功能后，对其中公共部分抽出一个tab组件来重构。 结构分析 组件包含navs和contents两部分。 navs使用view即可。但是要实现点击时自动定位，改为使用scroll-view实现，配合其scroll-into-view属性来定位。 contents部分要实现左右滑动切换，可以用swiper包裹。内部用scroll-view包裹，控制高度。 组件嵌套我们可以看到支付宝自带的tab组件使用时，tab组件内部可传入tab-content组件。这里由于上方tab导航项可定制，实际需要传入tab-nav和tab-content两部分。 vue有provide/inject方法，可以将在子组件中获取父组件，直接在父组件写入子组件的传值。然后所有数据放在父组件计算，这样是最好的。但是小程序不支持。 支付宝小程序...

之前在小程序中封装了ajax工具，并对消息队列做了处理。但是其中很多业务代码混杂再其中，故对其进一步抽象化，将业务代码分离出来。 业务代码主要存在于request的请求和响应阶段，仿照axios做一个拦截器，将其中的业务代码通过拦截器传递进来执行。 改写为类首先对Alipay工具类进行改造，将公用方法放到原型上，使用时新建一个实例。类的create方法接收一些全局参数，返回一个实例。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546class Alipay { constructor (option = {}) { // 入参 this.baseURL = option.baseURL || '' this.timeout = option.timeout || 30000 this.concurrency = option.concurrency || 6 // 并发请求数 ...