目录

0x00 创建uni-app

0x01 目录结构

0x02 项目配置

0x03 页面配置

0x04 常用基础组件

0x05 生命周期

0x06 uni-app路由

0x07 uni-app 语法

0x08 uni-app 布局与样式

0x09 uni-app 基础api

0x0A uni-app 自定义组件

0x00 创建uni-app

命令行创建：（CLI)

vue create -p dcloudio/uni-preset-vue 项目名称

0x01 目录结构

|-components 组件目录

|-hybrid 存放本地网页的目录

|-pages 业务页面文件存放的目录

|-platforms 存放各平台专用页面的目录

|-static 存放静态资源

|-wxcomponents 存放微信小程序原生组件

|-App.vue Vue初始化入口文件

|-main.js 应用配置，用来配置App全局样式以及监听

|-mainfest.json 配置应用名称，appid，logo，版本等打包信息

|-pages.json 配置页面路由 导航条 选项卡等页面类信息

0x02 项目配置

0x03 页面配置

所有页面路由都要写在pages.json中，进行统一的页面管理。

tabbar list 最多5个 最少2个

tabbar 显示一次后，就会自动保存到我们的内存中

0x04 常用基础组件

组件：视图层的基本组成单元

0x05 生命周期

app的生命周期：

页面的生命周期：

只要页面没有unload，那么onLoad 和 onReady（渲染） 只会触发一次

也就是说 页面的隐藏和显示 不断触发的只是 onHide  和 onShow

页面从后台切回前台，并不会再次触发onReady渲染。

onLoad使用场景：

  1. 请求API接口
  2. 进行一些页面渲染前的操作

onReady使用场景：

  1. 获取节点信息，只有当页面渲染完成后，才能获取到正确的DOM节点

0x06 uni-app路由

组件式跳转：

<navigator url="/pages/index2/index2">跳转</navigator>
		<navigator url="../index2/index2">相对路径</navigator>

api跳转：
几乎和小程序一样

0x07 uni-app 语法

基本和vue的语法相同

data两种写法的区别

data:{}
data:function(){
    return {}
}

前者当页面关闭时，data 中的数据不会自动销毁，再次打开页面时会再次显示上次的数据。

建议采用后者。

class语法：

通过数组的方式可以绑定多个动态的class

<view :class="[background,font]">§121§2</view>

也可以通过对象的形式 条件渲染

<view :class="{dark:isRender}">123231</view>

style语法：

1.原生静态写法

2.对象写法：

<view :style="{'background':background}">12323</view>

vm层background绑定的值为red

3.数组写法

事件监听：

input 监听input框变化事件

<input type="text" @input="onChange" placeholder="搜索">

函数中可以通过参数接受 附加消息

0x08 uni-app 布局与样式

uni-app 采用 和微信小程序相同的rpx

也就是说 不论多大 的屏幕宽度 都是750rpx

rpx的计算方法：

设计稿宽度750px，100px的宽度 换算 750rpx * 100px/750px =100rpx

设计稿宽度640px，100px的宽度 换算：750rpx * 100px/640px = 117rpx

导入样式：

@import "地址"

0x09 uni-app 基础api

非h5端不支持 window，document等浏览器的js api

所有平台均支持标准js

0x0A uni-app 自定义组件

其实就是vue的自定义组件

第一步，项目根目录创建components 目录

第二步，创建组件 .vue

第三步，import 引入组件

第四步，注册组件

第五步，传参

第六步，事件通信

这里强调几点：

1. import 绝对路径前 需要加@

例如：

import list from '@/components/list.vue'

2.props 接收父组件的传参

可以是字符串数组

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

也可以是对象

props:{
			name:{
				type:String,
				default:''
			}
		},

props接收到的传参可以通过{{}}直接使用

同样这些变量也会被添加到Vue实例中，也就说通过this.变量名也可以拿到对应的值。