uni-app学习笔记

最新推荐文章于 2024-08-13 15:21:49 发布

辰∴

最新推荐文章于 2024-08-13 15:21:49 发布

阅读量179

点赞数

分类专栏：学习文档文章标签： uni-app

本文链接：https://blog.csdn.net/a8590455/article/details/110442576

版权

学习文档专栏收录该内容

13 篇文章 0 订阅

订阅专栏

详细请查看官方文档或者b站视频

介绍

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

规范

页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

上手

全局样式（globalStyle）

在pages.json里面进行设置，修改全局的样式。具体内容见文档。

创建和配置新页面

新建页面
同时在pages.json进行注册

TabBar组件

uni-app提供了现成的框架。只需根据配置项必填的内容在pages.json里面配置即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-80RdWSPO-1606816876506)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130101459621.png)]

condition

用于配置启动项的入口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOKkuTPX-1606816876508)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130101638263.png)]

text

内部只能嵌套text，不支持其他组件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jbk6Jo4D-1606816876511)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130101832592.png)]

view

类似于js中的div组件。独占一行，提供了原生的一些class。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TA0cKKlP-1606816876513)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130102005157.png)]

button

提供了丰富的属性，通过size来控制大小，通过type来控制样式背景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4tdrNrc9-1606816876515)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130102128276.png)]

image

显示组件，注意名称只能是image，不能是img。提供懒加载选项。而且图片有默认尺寸，如果需要修改，可以设置mode的属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UznvCKkB-1606816876517)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130102312046.png)]

使用css预处理

使用css预处理，要先安装插件。步骤：工具-插件安装-安装新插件-你想要的插件。之后就能正常使用了

基本数据绑定

类似于vue，使用{{}}语法，js里面写变量，并且支持简单的语法。v-bind,v-for,事件都是继承于vue.js。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yEvMcEa7-1606816876518)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130104644654.png)]

生命周期和页面周期

生命周期指app创建到销毁的钩子函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGwApAe4-1606816876520)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130104900227.png)]

数据请求

数据请求继承与小程序。提供了直接API，不用再额外下载插件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3yZ2csQ-1606816876521)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130105024297.png)]

注意，头部变成了uni为前缀！

图片的上传

提供了官方的API进行图片的上传与预览。小程序有数量的限制！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7MhgX0j-1606816876522)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130105121998.png)]