【小程序】实现一个transition组件
在小程序实现一个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】git本地代码管理
之前使用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组件不满足需求，自己实现功能后，对其中公共部分抽出一个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方法，可以将在子组件中获取父组件，直接在父组件写入子组件的传值。然后所有数据放在父组件计算，这样是最好的。但是小程序不支持。 支付宝小程序...
【小程序】小程序CMS页面拼装的实现
现在页面组件化和配置化是一个比较流行的产品设计。我们的小程序最近也有这方面的需求。 CMS原理一般的拼装页面常见于一些第三方服务平台，类似有赞等，这些平台面向的客户是商家，实际上是商家用户在商家后台拼装好页面后，保存配置，然后重新生成代码发版。客户接收到更新后，看到新的小程序页面。 而我们做为自身的小程序开发，需要的是运营修改页面配置后，在前端实时渲染展示。 这种方式的优点是运营可以实时修改页面（当然如果更新组件，依然需要发版）。缺点是所有组件都在前端，代码体积较大；同时所有配置都是通过请求获取，再进行一层层的渲染，性能要差一些。这就对代码的性能优化和接口的响应速度提出了更高的要求。 结构设计目前后端提供的数据是分为以下几层。 这一期新增了秒杀页面，是一个tab页面，上面tab进行切换，下面每个tab又对应一个子页面。 页面暂定的字段，除了组件外，还有页面的标题、背景图、背景色、页面上下边距、页面通用组件间距等，本期新增了一个字段判断是否tab页。 组件首先有一个类型字段，根据这个字段对应不同的组件类型，然后渲染组件内容。有些类型的组件内容是异步再次请求的。组件中又有一个...
【小程序】小程序mixin的实现和全局组件
mixin有时候我们需要在页面注入一些公用的数据和方法，这就需要mixin的实现。在小程序中，组件支持mixins；对页面的mixin注入，可以通过重写Page方法来实现。 如果需要按需引入mixins，我们可以在页面增加mixins属性，再在mixin中按需引入，这里我就简单的对所有页面统一引入一个公用的pageMixin了。 新建一个mixins目录用于存放mixin代码，里面新建一个page.js写要注入的代码。 在util目录实现一个pageMixin.js： 12345678910111213141516171819202122232425262728293031323334353637383940import pageMixin from '../mixins/page'// 合并mixins属性到Page的options中function merge (mixin, options, properties = []) { if (Object.prototype.toString.call(mixin).slice(8, -1) ==...
【小程序】小程序ajax工具类的封装
之前在小程序中封装了ajax工具，并对消息队列做了处理。但是其中很多业务代码混杂再其中，故对其进一步抽象化，将业务代码分离出来。 业务代码主要存在于request的请求和响应阶段，仿照axios做一个拦截器，将其中的业务代码通过拦截器传递进来执行。 改写为类首先对Alipay工具类进行改造，将公用方法放到原型上，使用时新建一个实例。类的create方法接收一些全局参数，返回一个实例。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546class Alipay { constructor (option = {}) { // 入参 this.baseURL = option.baseURL || '' this.timeout = option.timeout || 30000 this.concurrency = option.concurrency || 6 // 并发请求数 ...
【小程序】小程序消息队列的封装
消息队列在支付宝小程序中，由于并发数量的限制，同时发送多个请求的话，有可能会造成请求的丢失，因此封装一个消息队列，对超过5条的进行中请求做排队处理。 代码实现如下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374const MAX_COUNT = 5class Alipay { static queue = [] static count = 0 // 收到请求，放到队列 static http (options = {}) { return new Promise((resolve, reject) => { // console.log('入队') this.queue.push({ options, ...
【工具】支付宝小程序anymock的使用
在前后端分离开发的过程中，经常使用mock来进行开发，这方面的工具有在项目代码中开发环境下引入mockjs来做mock服务，或是使用线上mock服务平台如rap、apizza等。这些服务最大的一个问题是，要么全部接口启用mock，要么全部接口不使用mock。如果是在新项目比较方便，但是对于半路接手的项目，显然全部设置一遍mock是不现实的。 在web项目中，可以在开发环境引入mockjs，对某些接口做拦截，而非单独起一个mock服务域名。在支付宝小程序中，可以使用anymock服务。 新版本的开发工具中，新增了一个anymock的按钮，点击可以看到一个配置界面。点击前往anymock平台并登陆，可以配置项目mock代码。anymock不需要设置全部接口mock，而是对设置了mock的接口返回mock数据，对找不到mock数据的接口正常请求，这样，更方便我们在新迭代中开发。 anymock登录后，可以创建一个项目，复制token填入开发工具。 进入项目，可以创建接口，类型选择http，填入接口path，选择接口类型并保存。 可以看到，一个接口可以创建多个mock数据来选择。 ...
【规范】前端团队代码规范及git提交检测
在团队开发中，需要对代码风格进行统一；同时，好的代码风格也有利于阅读和维护。下面从ide和eslint的配置，以及git-commit预检测来介绍。 VSCODE配置现在vscode使用最多，其他编辑器也可类似配置。 editorconfigvscode本身可以设置tab转换为空格。使用editorconfig可以更方便的对项目和文件做不同的配置。VSCODE可以安装editorconfig插件，然后在项目根目录新建一个.editorconfig文件。 123456789root = true[*]indent_style = spaceindent_size = 2charset = utf-8trim_trailing_whitespace = falseinsert_final_newline = true 这里可以在下面最近文件类型，比如设置java和python的tab为4个空格，而js的tab为2个空格。 eslinteslint是一个代码的强约束，通过一系列规则来严格控制团队代码风格。在官网可以看到详细的规则列表。 在项目中安装eslint，可以通过命令行进行校验...