近期uniapp使用与总结
弟弟是个uniapp小白,有什么问题欢迎指正.
吃什么饭对于有选择困难的我来说是个大问题,所以想做个根据自己输入的食物随机分配每餐吃的东西,然后就准备用uniapp做这样一个软件,主要是uniapp打包生成移动端app比较方便.然后就去看了一下uniapp,就像把这两天敲代码遇到的问题及心得总结一下.
总的来书uniapp的开发和vue的开发差不多,所以用起来也就很快的熟练了起来,但是有些组件以及api的调用还是不同
首先从uniapp新建项目开始吧,因为我要做的是uni-app所以就选择了默认的模板.然后来看一下
uniapp基本目录结构
│ App.vue
│ index.html
│ main.js
│ manifest.json
│ pages.json
│ uni.scss
├─commons
│ ├─css
│ ├─imgs
│ └─js
├─components
│ └─eatWhat
├─pages
│ └─index
├─static
└─util
App.vue 是uni-app的主组件,所有页面都是在 App.vue 下进行切换的,是页面入口文件,和vue中的.App.vue类似,也有些不同,uniapp的App.vue页面中没有tempate模板,而是只有script和style这两个标签,uniapp页面中公共的样式可以放在Vue.app这个页面的style中.index.html是运行之后生成的,所有的东西都会渲染到这上面,manifest.json进行一些基础的配置,pages.json中是配置一些页面信息,导航栏信息等uni.scss是一些公共样式的配置.在使用scss是可以方便的引用
文件夹中commons和components,util这三个文件夹是我自己创建的commons是放置一些公共的东西,css,js之类的文件,components主要放置一些组件,有vue开发经验的小伙伴应该对这个很熟悉.而util放一些封装的一些工具方法,pages中放的是所有的页面,static中放置静态资源.
说完了基本的目录结构就来说一下最近遇到的问题
储存
吃点啥这个块用到最多的就是信息的存储与读取,我一开始想到的就是用storage来进行数据的存储,然后再给当日获取到的食物设置过期时间,超过12小时后清空然后就去查了下官方文档,发现只能简单的设置值,没法直接这设置过期时间,所以只能自己来设置.
下面就把代码贴出来:
function cache(key, value, time = 3600 * 12) {
let nowTime = Date.parse(new Date()) / 1000;
if (key && value) {
// 设置到期时间
let expire = nowTime + Number(time);
uni.setStorageSync(key, JSON.stringify(value) + '|' + expire);
} else if (key && !value) {
let val = uni.getStorageSync(key);
if (val) {
// 判断缓存是否过期
let temp = val.split('|');
if (!temp[1] || temp[1] <= nowTime) {
uni.removeStorageSync(key);
console.log(key + '缓存已失效');
return '';
} else {
return JSON.parse(temp[0]);
}
}
}
}
uni.getStorageSync(key)
和uni.setStorageSync(key,value)
是uniapp中同步设置和获取缓存的两个api,我们可以通过在设置值是添加一个设置值的时间,然后在获取值时进行判断,当设置时间-获取时间>过期时间时,缓存无效,通过uni.removeStorageSync
移除缓存,以此方法来设置过期时间
字体导入与使用
另一个问题是字体的导入,因为第一次在uniapp中设置字体,遇到了点困难,所以这个也需要记录下来.
字体导入首先是引入字体,到网上下载了心仪字体的ttf文件.放在了static的font文件夹里
然后又去公共的样式文件中设置了global.css
如下:
// global.css
@font-face {
font-family:YangRenDongZhuShiTi;
src: url('~@/static/font/xxxxxx.ttf');
}
因为我的字体需要全局引用,所以又到App.vue中设置了一下公共页面的css最后完成字体的设置.
其他的都是一些js逻辑之类,相对较简单,以后遇到问题继续补充…
了解更多,请移步我的个人博客 Plumli
近期uniapp使用与总结的更多相关文章
- uni-app,wex5,APPcan,ApiCloud几款国内webapp开发框架的选型对比
框架列表. https://www.cnblogs.com/xiaxiaxia/articles/5705557.html 前言 近期,要开一个新的项目,APP类型.最重要的需求就是能够随时调整APP ...
- uni-app支付功能
扫码查看原文 前言 近期一直在使用APP开发多端应用,IOS的APP.安卓的APP和H5网页,其中开发的APP使用到了微信和支付宝的支付,在此给大家分享出来,一起使用 前置条件: 开发环境:windo ...
- uni-app使用阿里巴巴图标库icon详细步骤--避免踩坑
踩了很多坑~~ 最终终于找到可以使用阿里图标库的方法 简单方便 阿里巴巴图标库:https://www.iconfont.cn/home/index?spm=a313x.7781069.19989 ...
- 使用Sqoop从MySQL导入数据到Hive和HBase 及近期感悟
使用Sqoop从MySQL导入数据到Hive和HBase 及近期感悟 Sqoop 大数据 Hive HBase ETL 使用Sqoop从MySQL导入数据到Hive和HBase 及近期感悟 基础环境 ...
- 关于近期项目代码整理(iOS)
近期对项目中所经常使用到的封装代码进行整理,并将其上传至网络保存,本人会在后期不间断的更新其内容.具体链接地址为代码封装 关于代码 这些代码为从学习iOS来到现在实际项目开发中,精炼出来的封装代码,使 ...
- Windows Store App 近期访问列表
Windows 8系统在管理用户的文件时,会将用户近期访问的文件添加到对应应用的近期访问列表中,所有的Windows应用商店应用都有各自的近期访问列表,根据文件的上一次访问时间,可以在列表中对文件进行 ...
- 近期Windows 10 RedStone 2 Insider版本安装进度停留在百分之23、24解决方案
近期安装Windows 10 RedStone 2的14965.14971会出现停留在23%或者24%的现象,解决办法是拔掉扩展的SD卡再重新安装.
- paper 91:边缘检测近期最新进展的讨论
VALSE QQ群对边缘检测近期最新进展的讨论,内容整理如下: 1)推荐一篇deep learning的文章,该文章大幅度提高了edge detection的精度,在bsds上,将edge detec ...
- 吐槽下近期的4G手机:
吐槽下近期的4G手机: 1.iphone6和6p,分别是4.7和5.5吋屏,1810和2915毫安时不可拆卸电池,双核64位苹果A8处理器.电池容量太小,不经用,中度使用一天一充,而且不支持VOOC闪 ...
- 近期十大优秀jQuery插件推荐
当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时,jQuery可以扩展你的视野.本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件. 1.jQuery U ...
随机推荐
- 【SpringBoot2】 SpringBoot2核心技术 基础
写在前面 1 SpringBoot2核心技术 基础 1.1 Spring与SpringBoot SpringBoot是一个高层框架 1.2 项目创建 1.2.1 创建POM ①导入spring-boo ...
- 【Vue】前端解决跨域问题
Vue解决跨域问题 什么是跨域:违背了同源策略,即协议名.主机名.端口号必须一致.浏览器与服务器之间存在跨域问题,而服务器与服务器之间由于通过Http通信是不存在跨域问题的. 如图所示,浏览器 ...
- C++11强制类型转换
C++ 强制类型转换有四种关键字:static_cast.const_cast.reinterpret_cast和dynamic_cast.它们用于不同的情况和目的,比C语言的强制类型转换更清晰和安全 ...
- 什么是BFC,BFC的作用,以及怎么触发BFC
什么是BFC: 块级格式化上下文 BFC的作用: BFC其实就是规定了网页布局的规范 1.BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素 解释:BFC的基本改变,最 ...
- openwrt开发使用-arping
前言 IP冲突引起的网络异常,可以通过检查IP是否冲突,排除故障.我们可以用一些工具进行检查,例如arp-scan.arping软件进行查看. 这里使用arping进行检查设备的MAC地址,通过查查看 ...
- C盘爆满的解决方法,不用删除文件,使用分区助手无损增加内存
一.分区助手傲梅科技 对于我们C盘内存不足的来说,老师推荐的yyds. 我的内存C盘历史最低是900多M,1.5G还是多的,经过我不断的删除文件,发现没什么用,电脑用久了C盘文件占内存自然就多了!!改 ...
- 【Python毕业设计】基于Python+Flask+MySQL的学生信息管理系统(附完整源码)
1.项目说明基于python+Flask+mysql的学生信息管理系统项目实战 项目需要安装pycharm专业版,mysql数据库以及项目所需的所有模块创建数据库名称db_online_notes,然 ...
- java获取到heapdump文件后,如何快速分析?
原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明. 简介 在之前的OOM问题复盘之后,本周,又一Java服务出现了内存问题,这次问题不严重,只会触发堆内存占用高报警 ...
- 「学习笔记」tarjan求最近公共祖先
Tarjan 算法是一种 离线算法,需要使用并查集记录某个结点的祖先结点. 并没有传说中的那么快. 过程 将询问都记录下来,将它们建成正向边和反向边. 在 dfs 的过程中,给走过的节点打上标记,同时 ...
- Vue3项目的打包运行
一.项目打包(vite创建的项目) 执行以下这条命令对项目进行打包 npm run build 生成dist文件夹,进入dist文件夹下的index.html文件,然后右键选择Open with Li ...