近期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 ...
随机推荐
- MySQL匿名空用户名处理
问题描述:公司漏扫发现数据库内出现空用户名及密码,需要对这些用户进行整改 1.首先出现了疑问,这些空的用户名是怎么出现的,而且不附带密码. 2.可以手动这样创建这样的用户名和密码形式么. 3.如果能这 ...
- MySQL(七)索引
索引的数据结构 1 为什么使用索引 索引概述 索引(Index)是帮助MySQL高效获取数据的数据结构.是"排好序的快速查找结构",满足特定的查找算法 索引是在存储引擎中实现的,每 ...
- 探索FSM (有限状态机)应用
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值.. 本文作者:木杪 有限状态机(FSM) 是计算机科学中的一种数学模型 ...
- vue刷新当前组件的方法
一:v-if控制组件,先设false,再true强制刷新组件(有时会产生一种奇怪的效果) 1 <medical-record v-if="fresh" /> 2 3 t ...
- 【Vue2】编程式路由导航
在Vue Router中,除了使用 创建 a 标签来定义导航链接之外,还可以使用Vue Router通过编写代码来实现导航. 他提供的三个实例方法:router.push.router.replace ...
- 基于python爬虫技术对于淘宝的数据分析的设计与实现
本篇仅在于交流学习 本文主要介绍通过 selenium 模块和 requests 模块,同时让机器模拟人在浏览器上的行为,登录指定的网站,通过网站内部的搜索引擎来搜索自己相应的信息,从而获取相应关键字 ...
- openpyxl读写文件demo
开头 python处理Excel一直是自己头痛的问题,因为选择太多,有panda, 有csv, 有今天使用openpyxl.特别记录一下openpyxl的使用 安装 pip install openp ...
- 2020-10-15:mysql的双1设置是什么?
福哥答案2020-10-15:#福大大架构师每日一题# [答案来自知乎:](https://www.zhihu.com/question/425704691) 其实就是innodb_flush_log ...
- 2022-02-15:扫地机器人。 房间(用格栅表示)中有一个扫地机器人。 格栅中的每一个格子有空和障碍物两种可能。 扫地机器人提供4个API,可以向前进,向左转或者向右转。每次转弯90度。 当扫地机
2022-02-15:扫地机器人. 房间(用格栅表示)中有一个扫地机器人. 格栅中的每一个格子有空和障碍物两种可能. 扫地机器人提供4个API,可以向前进,向左转或者向右转.每次转弯90度. 当扫地机 ...
- 2021-06-12:已知一棵搜索二叉树上没有重复值的节点,现在有一个数组arr,是这棵搜索二叉树先序遍历的结果。请根据arr生成整棵树并返回头节点。
2021-06-12:已知一棵搜索二叉树上没有重复值的节点,现在有一个数组arr,是这棵搜索二叉树先序遍历的结果.请根据arr生成整棵树并返回头节点. 福大大 答案2021-06-12: 先序遍历+中 ...