【小程序】小程序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数据来选择。 ...
【小程序】小程序CMS页面拼装的实现
现在页面组件化和配置化是一个比较流行的产品设计。我们的小程序最近也有这方面的需求。 CMS原理一般的拼装页面常见于一些第三方服务平台，类似有赞等，这些平台面向的客户是商家，实际上是商家用户在商家后台拼装好页面后，保存配置，然后重新生成代码发版。客户接收到更新后，看到新的小程序页面。 而我们做为自身的小程序开发，需要的是运营修改页面配置后，在前端实时渲染展示。 这种方式的优点是运营可以实时修改页面（当然如果更新组件，依然需要发版）。缺点是所有组件都在前端，代码体积较大；同时所有配置都是通过请求获取，再进行一层层的渲染，性能要差一些。这就对代码的性能优化和接口的响应速度提出了更高的要求。 结构设计目前后端提供的数据是分为以下几层。 这一期新增了秒杀页面，是一个tab页面，上面tab进行切换，下面每个tab又对应一个子页面。 页面暂定的字段，除了组件外，还有页面的标题、背景图、背景色、页面上下边距、页面通用组件间距等，本期新增了一个字段判断是否tab页。 组件首先有一个类型字段，根据这个字段对应不同的组件类型，然后渲染组件内容。有些类型的组件内容是异步再次请求的。组件中又有一个...
【规范】前端团队代码规范及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，可以通过命令行进行校验...