# uni-app

**Repository Path**: jsland/uni-app

## Basic Information

- **Project Name**: uni-app
- **Description**: uni-app demo演示
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-04-07
- **Last Updated**: 2024-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 基本介绍
uni-app 基于`Vue.js`语法和微信小程序的api。
跨平台框架。可发布到iOS、Android、web、以及各种小程序平台

## 为什么选择uni-app
* 开发者、案例数量最多
* 平台能力不受限
* 性能体验优秀
* 周边生态丰富，插件丰富
* 学习成本低
* 开发成本低

## uni-app解决了什么问题
* 多平台统一的开发方式
* 过去跨端框架性能不够优秀
* 生态不丰富

## uni-app项目搭建
使用HBuilderX编辑器

## uni-app目录结构说明
![输入图片说明](https://images.gitee.com/uploads/images/2021/0809/111554_d7cff582_4952288.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0809/111610_62d64845_4952288.png "屏幕截图.png")

## 项目配置
`manifest.json`


## 页面配置
`pages.json`

## uni-app语法
常用组件
view -> div 容器组件
text -> span 文字组件
iamge -> img 图片组件

## 应用生命周期
![输入图片说明](https://images.gitee.com/uploads/images/2021/0809/111639_6fd51141_4952288.png "屏幕截图.png")

在app.vue写生命周期

onLaunch：登陆 用户信息 存储用户信息
onShow:时间戳，用户停留时长
onHide:应用进入后台做的事情
onError：监听全局错误

## 页面生命周期
![输入图片说明](https://images.gitee.com/uploads/images/2021/0809/111652_ba6d54d6_4952288.png "屏幕截图.png")

``` javascript
//页面加载
onLoad() {
	console.log('页面 onLoad')
	//用于页面跳转传参
	//请求接口
},
//页面显示
onShow() {
	console.log('页面 onShow')
	//获取节点信息，dom操作
},
//页面渲染完成
onReady(){
	console.log('页面 onReady')
},
//页面隐藏
onHide() {
	console.log('页面 onHide')
},
//页面卸载
onUnload(){
	console.log('页面 onUnload')
},
```

## 路由
* 通过组件跳转
`<navigator url="..">组件跳转</navigator>`

* 使用api跳转

## 样式布局
尺寸单位
* px 
* rpx：根据屏幕宽度自适应的动态单位。
`750 * 元素在设计稿中的宽度 / 设计稿基准宽度`

在HBuilderX 进行配置进行rpx
![输入图片说明](https://images.gitee.com/uploads/images/2021/0809/111736_e0957dec_4952288.png "屏幕截图.png")

## uni-app配合的ui组件库是什么？？


ThorUI

| 名称  | github  |
| ------------ | ------------ |
| uni-ui  | 2.5k  |
| uView  |   |
| ThorUI  |   |

使用可视化uCharts



## 组件库
1. 表单/表单校验
2. 表格
3. 类似echarts



## 如何一键登陆？

## 如何发布？？？
根目录的mainfest.json进行配置
点击hbuilderX的`发行`

## 实践问题汇总
* 如何实现自定义导航栏？？

* 如何使用可视化组件？？
uCharts

## 相关地址
* uni-app官网 https://uniapp.dcloud.io/
* DCloud https://ext.dcloud.net.cn/
* 腾讯课堂uni-app https://ke.qq.com/course/list/uni-app