uni-app学习心得

简介

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

开发工具

Hbuilder X 微信开发者工具 vscode

学习内容

1. 项目结构

   • pages文件夹存放页面

   • static文件夹内文件不会进行编译，所以不要放js文件，可放到common中

   • unpackage文件夹存放打包的文件

   • components文件夹存放各种组件

   • App.vue代表应用，包括应用层的生命周期方法，全局样式等

   • pages.json整个应用的页面集合，第一项为启动页，可配置页面路由及样式和标题

   • manifest.json应用配置，包括图标配置、启动界面配置、权限配置及其他开发配置

   • main.js应用入口文件

一、应用生命周期

函数名	说明
onLaunch	当uni-app 初始化完成时触发(全局只触发一次)
onShow	当 uni-app 启动，或从后台进入前台显示(多次触发)
onHide	当 uni-app 从前台进入后台(多次触发)
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

二、页面生命周期

函数名	说明
onLoad	监听页面加载，参数为上个页面传递的参数，参数类型为对象（触发一次）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面(多次触发)
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏(多次触发)
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据

三、全局网络请求步骤：

1、建立一个request.js文件  
2、写出网络请求的方法  
3、开放导出  
4、在main.js引入  
5、在main.js中添加实例
6、用this使用方法
 

      四、iconfont字体图标使用：

优点：1、减小打包体积   2、缩放不失真、模糊   3、减少了网络请求次数

1、在iconfont官网中复制项目的css文件
2、新建目录common
3、新建文件iconfont.css
4、把复制的代码粘贴到iconfont.css中
5、补全https:协议
6、在App.vue中引入iconfont.css作为公共css
7、使用text元素的class属性添加iconfont和图标样式代码
8、对图标样式进行设置，与文字一致

五、使用缓存保存数据：

应用场景：
1、对时效要求不高的应用，初次加载页面，可使用缓存减少等待时间
2、无网络或服务器无法访问时，使用缓存提供本地数据查阅或离线阅读
3、相对固定不变的数据，无需每次从服务器获取

同步与异步
同步:指发送一个请求，需要等待返回，然后才能够发送下一个请求，有等待过程。
异步:指发送一个请求，不需要等待返回，随时可以再发发下一个请求。
最大的区别就是:同步需要等待，异步不需要等待。

使用步骤：
设置缓存值，获取缓存值，从服务器获取最新数据保存到本地

a.因缓存在本地，基本可不考虑耗时和失败的情况，所以使用同步异步均可（无所谓）
b.若需要即刻使缓存生效以进行下一步操作则必须使用同步方法（就是写上来）

缓存有效期：（看他问不问）
1、H5端有大小限制（5M），可能会被用户自行清理
2、app端无大小限制，属于持久化数据
3、微信小程序大小单条1M，最大10M，缓存与小程序生命周期一致
 

以上写的就是我学到的，希望对你有帮助。详细内容请参考uniapp官方文档。