摘要:大家好,我是平头哥联盟的首席填坑官苏南,今天要给大家分享的是最近公司做的一个小程序项目,过程中的一些好的总结和遇到的坑,希望能给其他攻城狮带来些许便利,更希望能做完之后老板给你加薪今天是中秋节的第一天,假日的清晨莫名的醒的特别早,不知道为什
大家好,我是@IT·平头哥联盟的首席填坑官——苏南(South·Su),今天要给大家分享的是最近公司做的一个小程序项目,过程中的一些好的总结和遇到的坑,希望能给其他攻城狮带来些许便利,更希望能做完之后老板给你加薪~
今天是中秋节的第一天,假日的清晨莫名的醒的特别早,不知道为什么,也许是因为,昨晚公司上线的项目回来的路上,发现了个小bug,心里有些忐忑,一会偷偷先改了,让领导发现这个月绩效就没了~~
以上纯为扯淡,现在开始一本正经的装逼,请系好安全带,中间过程有可能会开车,请注意安全!!!!!
最近个项目跟团队小伙伴沟通后用的是wepy框架,没有直接用原生的,小程序原生就……,大家都懂的,用wepy框架,给自己带来了便利,也带来了不少坑,但纵是如此,我还是怀着:“纵你虐我千百遍,我仍待你如初恋”的心态去认真把项目做好
toast1、toast组件,大家都知道,官方的api wx.showToast 是满足不了我们的需求的,因为它只支持 "success", "loading"两种状态,同时“ title 文本最多显示 7 个汉字长度”,这是官方原话,有图有真相哦,样式巨丑~
wx.showToast({ title: "成功", icon: "success", duration: 2000 }) wx.showModal({ title: "提示", content: "这是一个模态弹窗", success: function(res) { if (res.confirm) { console.log("用户点击确定") } else if (res.cancel) { console.log("用户点击取消") } } })
wx.showModal的content的文字是不会居中的(现在不确定有没有扩展,可以设置),依稀记得有一次因为问题差点跟产品经理吵起来,让文字居中,我说最少要两小时,当时产品就炸了,什么鬼???让文字居中一下要两小时??两小时??两小时??呵呵~走了,后来就下决定自己封装了一个属于自己的toast组件,以下为部分核心代码
{{ options.text }}
Storage
2、Storage(存储)在前端我们存储的方式,cookie、localStorage、sessionStorage等这些,特性就不一一说明了,小程序里大家都知道,数据存储只能调用 wx.setStorage、wx.setStorageSync,相当于h5的localStorage,而 localStorage是不会过期的,这个大家都知道,而且在很多的面试中,面试官都会问到这个问题,怎么让localStorage像cookie一样,只存两小时、两天、甚至只存两分钟呢?今天带你解惑,让你在职场面试中又减少一个难题,这也是我们项目中一直在用的方式,小程序中也同样实用:
class storage { constructor(props) { this.props = props || {} this.source = wx||this.props.source; } get(key) { const data = this.source, timeout = (data.getStorageSync(`${key}__expires__`)||0) // 过期失效 if (Date.now() >= timeout) { this.remove(key) return; } const value = data.getStorageSync(key) return value } // 设置缓存 // timeout:过期时间(分钟) set(key, value, timeout) { let data = this.source let _timeout = timeout||120; data.setStorageSync(key,(value)); data.setStorageSync(`${key}__expires__`,(Date.now() + 1000*60*_timeout)); return value; } remove(key) { let data = this.source data.removeStorageSync(key) data.removeStorageSync(`${key}__expires__`) return undefined; } } module.exports = new storage();
是不是觉得很简单,其实大家看了之后就都 “哦,原来还可以这样” 懂了,只是一时没想到而已,就是个小技巧,每次在存储的时候同时也存入一个时效时间戳,而在获取数据前,先与当前时间比较,如果小于当前时间则过期了,直接返回空的数据。
3、接口API的维护,在没有nodejs之前,前端好像一直都在为处理不同环境下调用对应的API而烦恼,做的更多的就是用域名来进行判断,当然也有些高级一点的做法,后端在页面渲染的时候,存一个变量到cookie里或者在页面输出一个全局的api变量(建立在没有前后端分离的基础上),到了小程序同样也是如此,每次都要手动改环境,那么一个项目可能有不同的业务,要调用不同域名api,又有不同的环境区分,怎么维护会比较好呢??
//env/dev.js 其他test、uat、prd结构相同 //本地环境 module.exports = { wabApi:{ host:"https://dev-ali.southsu.com/XX/api/**", }, questionApi:{ host:"https://dev-ali.bin.com/question/api/**/question", }, mockApi:{ host:"https://easy.com/mock/594635**c/miniPrograms" }, inWelApi: { host: "https://dev.**.com/Wab/api/escene/v2" } };
import dev from "./env/dev"; //本地或开发 import uat from "./env/pre"; //体验环境 import prd from "./env/prd"; //线上 var ENV = "prd"; //"dev | uat | prd"; let _base_ = { dev, uat, prd }[ENV]; var config = { ENV, baseAPI:{..._base_, env : ENV }, appID:"wx*****b625e", //公司账号(指数)appid isAuthorization:true, "logId": "gVDSMH****HAas4qSSOTb-gzGzoHsz", "logKey": "pxFOg****Jn3JyjOVr", questionnaireNo:"z**Insu" // 问卷调查编号 }; export const __DEBUG__ = (ENV!="prd"); export default config;
请求调用api处理的示例 import wepy from "wepy" import _login_ from "./login"; import config,{__DEBUG__} from "./config"; import "wepy-async-function"; export const fetchJson = (options)=>{ /* * 请求前的公共数据处理 * @ param {String} url 请求的地址 * @ param {String} Type 请求类型 * @ param {String} sessionId 用户userToken * @ param {Boolean} openLoad 开启加载提示,默认开启,true-开,false-关 * @ param {function} StaticToast 静态提示方法 ,详细说明请参考 components/ui/Toast * @ param {Object} header 重置请求头 * @ param {Boolean} isMandatory 是否强制用户授权,获取用户信息 */ StaticToast = getCurrentPages()[getCurrentPages().length - 1]; let { url,openLoad=true, type, data={},header={}, ...others } = options||{}; let sessionId = (Storage.get(__login__.server+"_userToken")||""); /*Start */ var regExp = //(.*?)//, hostkey = url.match(regExp)[1]; let baseUrl = config.baseAPI[hostkey].host; url = url.replace(regExp, "/"); /*End */ __DEBUG__&&console.log("#--baseUrl:", baseUrl); __DEBUG__&&console.log("#--请求地址:", `${baseUrl}${url}`); __DEBUG__&&console.log("----------分割线---------------"); openLoad&&StaticToast.__showLoading__(); return new Promise((resolve, reject) => { return wepy.request({ url:`${baseUrl}${url}`, method:(type || "POST"), data, header:{ "t9oken":sessionId, "content-type": "application/json", // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", ...header }, success:(res)=>{ StaticToast.__hideLoading__(); return resolve(resHandler(res,options)); }, error:(err,status)=>{ StaticToast.__hideLoading__(); return reject(errorHandler(err,options,err.statusCode)); } }); })
业务调用示例:
//最后请求得到的地址是 https://easy.com/mock/594635**c/miniPrograms/service/XXX (域名不同环境不一样,在config里的 ENV baseAPI控制) fetchJson({ type:"post", // url:"/mockApi/service/XXX", data:{ name:"苏南" }, success:res=>{ console.log(`大家好,我是苏南`,res) } });填坑时间了
4、填坑时间了,wepy框架中每个组件内的生命周期回调 onload,只要是引入了组件,不管你视图有没有渲染,他都会执行,导致某些业务逻辑用不上它的时候也执行了产生异常(当然为个锅< 小程序 >肯定说我不背~^~ ),详细看链接:https://github.com/Tencent/we... , https://github.com/Tencent/we... ,不知道后面有没有人解决rich-text
5、rich-text,小程序的一个组件,虽然有那么一点点用处,但又不得不说到底要它何用啊?其它的我就忍了,a标签,a标签啊,属性没有,那还要它何用啊,你都不要我跳转,我还要用你吗?b、i、span、em……哪个我不能用?不知道设计这个组件的人是不是脑被驴踢了(愿老天保佑,我在这骂他,可千万别被看到了,哈哈~),又是业务需求后台配置的内容有链接,没办法,来吧,搞吧,往死里搞吧,一切的推脱都是你技术low的借口(你看,你看,别人的怎么可以跳转啊,别人怎么做到的?给我一刀,我能把产品砍成渣),所以有了后面的填坑:
{{child.value}} {{child.value}} {{items.value}}
PS:完整示例源码 来啦~,觉得不错记得 Star、Star、Watch 哦,感谢!
今天的分享就到这里,写了蛮久,最近才在开始尝试写博客,新手上路中,如果文章中有不对之处,烦请各位大神斧正。如果你觉得这篇文章对你有所帮助,请记得点赞哦~,如觉得不错,记得关注我们的公众号哦!
猜您还喜欢:面试踩过的坑,都在这里了~
你应该做的前端性能优化之总结大全!
如何给localStorage设置一个过期时间?
手把手教你如何绘制一辆会跑车
如何用CSS3画出懂你的3D魔方?
SVG Sprites Icon的使用技巧
immutability因React官方出镜之使用总结分享!
作者:苏南 - 首席填坑官
交流群:912594095,公众号:honeyBadger8
本文原创,著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权,非商业转载请注明原链接及出处。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108529.html
摘要:它是基于,由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道,那么元素是什么呢单纯翻译的话,是符号的意思,然我的理解是元素用来定义一个图形模板对象,它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 大家好,这里是@IT·平头哥联盟,我是首席填坑官——苏南(South·Su),...
摘要:去做想做的事,去爱值得的人去成为自己喜欢的模样,去让自己发光浑身充满力量,充实的日子最美好各位早安,这里是平头哥联盟,我是首席填坑官苏南,用心分享一起成长做有温度的攻城狮。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言 继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件、也...
摘要:前言前段时间面试包括阿里巴巴的电话面试,遇到过一些面试题,且面试中出现机率较高的提问笔试,有些答的不是很好挂掉了,今天终于有时间整理出来分享给大家,希望对大家面试有所帮助,都能轻松拿。 showImg(https://segmentfault.com/img/bVbhSwP?w=1008&h=452); 前言 前段时间面试(包括阿里巴巴的电话面试),遇到过一些面试题,且面试中出现机...
摘要:前言前段时间面试包括阿里巴巴的电话面试,遇到过一些面试题,且面试中出现机率较高的提问笔试,有些答的不是很好挂掉了,今天终于有时间整理出来分享给大家,希望对大家面试有所帮助,都能轻松拿。 showImg(https://segmentfault.com/img/bVbhSwP?w=1008&h=452); 前言 前段时间面试(包括阿里巴巴的电话面试),遇到过一些面试题,且面试中出现机...
阅读 3608·2021-11-16 11:41
阅读 2818·2021-09-23 11:45
阅读 644·2019-08-30 15:44
阅读 505·2019-08-30 13:10
阅读 1936·2019-08-30 12:49
阅读 3482·2019-08-28 17:51
阅读 1444·2019-08-26 12:20
阅读 672·2019-08-23 17:56