今天是来杭州的第三个月后的十几天，正是的现在这份工作转正的日子。几天前转正面谈时CTO对于前几个月的工作给予了肯定，同时也提了几点建议。这也是这篇文章存在原因之一。

要养成一些好的习惯、好的方法、并学会分享。这些好的习惯以后会跟着你走。

来杭州三个月，也习惯了这里的生活。在新的公司做了两三个小项目，也研究了几个以前没有仔细研究的技术。小有收获。最近一周一直在忙两个项目，一是智能柜，二是景区。以下是我最近开发的一些心得和技巧：

在开发微信小程序时，我们可以将小程序中常用的基本配置统一抽离出来放在一个config.js中如下：

constSERVER_URL'http://www.xxx.com/api';constTEST_SERVER_URL'http://test.xxx.com/api';constCDN_URL'http://cdn,xxx.com';constTEST_CDN_URL'http://tcdn.xxx.com';exportCONFIG_PRODUCT{SERVER_URL,CDN_URL,DEBUG_FLAG:false,TEST_FLAG:false,}exportCONFIG_TEST{SERVER_URL:TEST_SERVER_URL,CDN_URL:TEST_CDN_URL,DEBUG_FLAG:true,TEST_FLAG:false,}然后按照开发需求引入这些配置信息（如控制console.log），在后期方便配置的统一管理和维护。

对网络请求（wx.request）进行二次封装如下例：

import{CONFIG}from'./config';importMD5from'./md5'/***定制功能的网络请求方法*@paramoptionsobject*@propertyurlstring请求的资源地址，在请求时会自动添加服务器地址。*@propertydataobject请求所携带的参数*@propertyheaderobject请求头*@propertysuccessfunction请求成功的回调*@propertyfailfunction请求失败的回调*@propertycompletefunction请求完成的回调**功能简介：*传入与wx.request相同的参数，方法内部会对几个重要部分进行功能根据项目需求强化，如在header*中添加验证字段，对POST方法时将header的content-type改为对应参数。对特定的状态码（400）*，进行处理。**/exportdefault(options){const{APP_CONFIG:{SERVER_URL,DEBUG_FLAG,SPEACAL_SERVER_URL}}CONFIG;if(DEBUG_FLAG){console.group('网络请求');console.log(options);}if(!options.anotherFlag){wx.showLoading({title:'正在加载'})}if(options.anotherFlag){letString1''const{data:{query,mainData}}optionsquery.timeMath.ceil(Date.now()/1000);constdataKeyArrayObject.keys(query).sort();dataKeyArray.forEach((e,i){if(i0){String1+`${e}${query[e]}`;}else{String1+`${e}${query[e]}`;}})constString2`${String1}secretyoursalt`;consttokenMD5(String2);options.url`${SPEACAL_SERVER_URL}token${token}`;options.headermodifyHeader(options.header);options.header['Content-Type']'application/json';options.method'POST';options.datamainData;}else{options.url`${SERVER_URL}${(options.url)?'/'+options.url:''}`;options.headermodifyHeader(options.header);options.method'POST';}if(typeofoptions'object'){constsuccessoptions.success;constfailoptions.fail;constcompleteoptions.complete;options.successsuccess?res{if(DEBUG_FLAG){console.log(res);console.groupEnd();}if(res.flag!0!options.anotherFlag){fail?fail(res):'';}else{success(res);}}:null;options.failfail?res{if(DEBUG_FLAG){console.log(res);console.groupEnd();}fail(res);}:null;options.completecomplete?res{if(DEBUG_FLAG){console.groupEnd();}if(!options.anotherFlag){wx.hideLoading();}complete(res);}:(){if(!options.anotherFlag){wx.hideLoading();}};}wx.request(options);}constmodifyHeaderheader{consttokenwx.getStorageSync('token');if(token){return{...header,token:`${token}`};}else{return(header)?header:{};}};当然也可以根据个人的开发习惯进行promise封装。这样封装的好处也显而易见，方便对所有的request进行监控，通用逻辑的修改，方便调试和开发。

在写些小程序的条件动画时，也可以十分方便如下：

//page.wxss.css-a{transform:translate3d(-100%,0,0);//将css-a元素上移全部高度transition:all.5s;}.css-a.show{transform:translage3d(0,0,0);//将css-a元素动画回原位}//page.wxmlviewclass'css-a{{showFlag?"show":""}}'动画DEMO/view//page.js//触发的动画事件onTrigger(){this.setData({showFlag:true});}通过绑定点击、触摸事件，就能够实现很多简单的动画，提升人机交互的乐趣。

作者：LERIDY'S链接：小程序开发心得-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。编辑于11:21