推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：502
小程序开发心得
发布时间:2020-10-17今天是来杭州的第三个月后的十几天，正是的现在这份工作转正的日子。几天前转正面谈时 CTO 对于前几个月的工作给予了肯定，同时也提了几点建议。这也是这篇文章存在原因之一。
要养成一些好的习惯、好的方法、并学会分享。这些好的习惯以后会跟着你走。
来杭州三个月，也习惯了这里的生活。在新的公司做了两三个小项目，也研究了几个以前没有仔细研究的技术。小有收获。最近一周一直在忙两个项目，一是智能柜，二是景区。以下是我最近开发的一些心得和技巧：
在开发微信小程序时，我们可以将小程序中常用的基本配置统一抽离出来放在一个config.js中如下：
const SERVER_URL = ''; const TEST_SERVER_URL = ''; const CDN_URL = ',xxx.com'; const TEST_CDN_URL = ''; export CONFIG_PRODUCT = { SERVER_URL, CDN_URL, DEBUG_FLAG:false, TEST_FLAG:false, } export CONFIG_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'; import MD5 from './md5'/** * 定制功能的网络请求方法 * @param options object * @property url string 请求的资源地址，在请求时会自动添加服务器地址。 * @property data object 请求所携带的参数 * @property header object 请求头 * @property success function 请求成功的回调 * @property fail function 请求失败的回调 * @property complete function 请求完成的回调 * * 功能简介： * 传入与 wx.request 相同的参数，方法内部会对几个重要部分进行功能根据项目需求强化，如在 header * 中添加验证字段，对 POST 方法时将 header 的 content-type 改为对应参数。对特定的 状态码（400） * ，进行处理。 * */ export default (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) { let String1 = '' const { data:{query,mainData} } = options query.time = Math.ceil(Date.now() / 1000); const dataKeyArray = Object.keys(query).sort(); dataKeyArray.forEach((e, i) => { if (i === 0) { String1 += `${e}=${query[e]}`; } else { String1 += `&${e}=${query[e]}`; } }) const String2 = `${String1}&secret=yoursalt`; const token = MD5(String2); options.url = `${SPEACAL_SERVER_URL}token=${token}`; options.header = modifyHeader(options.header); options.header['Content-Type'] = 'application/json'; options.method = 'POST'; options.data = mainData; } else { options.url = `${SERVER_URL}${(options.url) ? '/' + options.url : ''}`; options.header = modifyHeader(options.header); options.method = 'POST'; } if (typeof options === 'object') { const success = options.success; const fail = options.fail; const complete = options.complete; options.success = success ? res => { if (DEBUG_FLAG) { console.log(res); console.groupEnd(); } if (res.flag !== 0 && !options.anotherFlag) { fail ? fail(res) : ''; } else { success(res); } } : null; options.fail = fail ? res => { if (DEBUG_FLAG) { console.log(res); console.groupEnd(); } fail(res); } : null; options.complete = complete ? res => { if (DEBUG_FLAG) { console.groupEnd(); } if (!options.anotherFlag) { wx.hideLoading(); } complete(res); } : () => { if(!options.anotherFlag){ wx.hideLoading(); } }; } wx.request(options); } const modifyHeader = header => { const token = wx.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.wxml <view class='css-a {{showFlag ? "show":""}}'>动画DEMO</view> // page.js // 触发的动画事件 onTrigger(){ this.setData({showFlag:true}); }通过绑定点击、触摸事件，就能够实现很多简单的动画，提升人机交互的乐趣。
