记一次 uniapp 的经历
前言
这几天在做一个 app,打比赛用,使用的是 uni+uView 的组件库。这个组件库是半道加进来的,学弟推荐的,我看有组件的话确实会方便很多,而且他都是按需引入,不占用额外空间,挺好的,我也就直接拿来用了。
使用感想:感觉这套技术栈跟 vue+element 差不多了 emm,就是某些官方 api 还不太一样,还是比较顺手的。
组件库传送门: uView - 多平台快速开发的UI框架
但是,不熟悉组件的 api 以及参数,让我踩了坑,非常难受 emm,还是写个记录,长长记性。
本次内容:分享一次因粗心踩的坑,一个自己进行封装的经历
坑:uView 组件库,uToast 组件
传送门:Toast 消息提示
使用方法:
参数:
title
:消息提示显示的文本type
:主题类型,不填默认为default
(一共有 6 中主题色)url
:toast 结束跳转的 url,不填不跳转
更多详细 api 请点击上方 toast 传送门去到该组件库官网看
我遇到的坑,便是填写了 url,他执行结束后不跳转。
说一下我的大致使用情况:
登录成功后弹出消息提示登录成功,完后跳转到一个 tab 页面上去。但是他只给弹出登录成功,不报错也不跳转。当时真的人傻了,找了好多地方,也打了断点,所有的事情都告诉我一切正常。于是我开始怀疑起我的电脑 emm,我将整个程序打包,发给了我的学弟,让他在他电脑上帮我调试一下,结果与我电脑一致(nice!那就是电脑没坏,还能用),在我吃完饭回到电脑前准备跟这个问题决一死战的时候,学弟发来的一张截图让我人呆滞了。
没错,就是这个表格。我才知道这个组件要是跳转到 tab 页面的话还需要额外配置一个参数,赶忙加上,于是我又从坑中站了起来。
关于 toast 结束跳转 URL
如果配置了
url
参数,在 toast 结束的时候,就会用uni.navigateTo
(默认)或者uni.switchTab
(需另外设置isTab
为true
)如果配置了
params
参数,就会在跳转时自动在 URL 后面拼接上这些参数,具体用法如下:
这个故事告诉我们,大家使用之前一定要摸清楚 api,不要学习泽泽!!!
封装 uni.getStorage 函数
这个应该不算坑,我只是觉得他这个使用起来不是很方便(好像是相当不方便)
传送门:uni.getStorage
它的作用就是从本地缓存中异步获取指定 key 对应的内容。
我的需求就是要从缓存中获取一些我之前存入进去的东西,但是我取一个还好,某一处需要取两个的话要把这个函数写两次,反正我本人是觉得很麻烦的(即使 CV 不麻烦,但在程序员眼中,代码相似程度有点高),那为什么不尝试着封装一下呢?
函数本来的样子:
他是根据key
,去取缓存中的数据,完后返回值res.data
中就是我们需要的数据了。
思路就是:传一个key
给他,同时接好res.data
的值
改造前:
改造后:
需要调用的时候这样:
是不是非常的方便呢?
封装,yyds
最后
踩坑可以迟到,但永远不会缺席,我们能做的就是每次细心一点,并且把犯过的错,背过的锅记录在小本本上,再也不去犯第二次。
毕竟,神也会犯错呀!
祝愿天下的程序员都少一点 bug 吧。
改进上面的封装函数
自己今天使用的时候发现,这样封装只能单页面内使用,可是一个项目中,我有好几处都要使用,就只能复制粘贴。
那我不又成了 cv 程序员???
于是我继续开始封装,想把它以组件的方法进行封装。
cache.js
,我给他放在了 common 文件夹内
使用方法:
在需要使用这个函数的页面进行引入就好,方法类似于我们按需引入组件。
使用的时候直接进行调用就好。
版权声明: 本文为 InfoQ 作者【是乃德也是Ned】的原创文章。
原文链接:【http://xie.infoq.cn/article/a2357ad182cd8a7bcdd88de3f】。文章转载请联系作者。
评论