1.uni-app介绍

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架 开发者通过编写 Vue.js 代码，uni-app 将其编译到 iOS、Android、微信小程序、支付宝小程序、百度小程序、H5等多个平台，保证其正确运行并达到优秀体验。

2.为什么要学习uni-app?

相对开发者来说，减少学习成本，因为只学会uni-app之后，即可开发出 iQs,Android,H5,以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本

3.环境搭建

安装编辑器HbuilderX HbuilderX是通用的前端开发工具，但为uni-app做了特别优化

打开HbuilderX之后会有这个页面打开我点的箭头

打开之后点击下载即可 下载完以后是一个压缩包 这时我们需要把他解压

这就是加压以后打开的文件夹啦

4.初始化项目

利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建
• 选择uni-app,填写项目名称，项目创建的目录
  

5.运行项目

在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

以上三个都有我们只需要跟着一起操作即可
注意：

• 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
• 微信开发者工具在设置中安全设置，服务端口开启

6.介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage就是打包目录，在这里有各个平台的打包文件
pages所有的页面存放目录
static静态资源目录，例如图片等
components组件存放目录

7.全局配置和页面配置

通过globalStyle进行全局配置
用于设置应用的状态栏、导航条、标题、窗口背景色等详细文档

创建新的message页面
右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板

<template><view>这是信息页面</view>
</template><script>
</script><style>
</style>

通过pages来配置页面

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考 pageStyle

pages数组数组中第一项表示应用启动页

"pages": [ 、{"path":"pages/message/message"},{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}]```
通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式```javascript
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path":"pages/message/message","style": {"navigationBarBackgroundColor": "#007AFF","navigationBarTextStyle": "white","enablePullDownRefresh": true,"disableScroll": true,"h5": {"pullToRefresh": {"color": "#007AFF"}}}}]

配置tabbar 如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
Tips

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
  属性说明：
  
  其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
  
  案例代码：

"tabBar": {"list": [{"text": "首页","pagePath":"pages/index/index","iconPath":"static/tabs/home.png","selectedIconPath":"static/tabs/home-active.png"},{"text": "信息","pagePath":"pages/message/message","iconPath":"static/tabs/message.png","selectedIconPath":"static/tabs/message-active.png"},{"text": "我们","pagePath":"pages/contact/contact","iconPath":"static/tabs/contact.png","selectedIconPath":"static/tabs/contact-active.png"}]}

condition启动模式配置
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面
属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

8.text组件的用法

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用
uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：ensp、emsp、nbsp
decode	boolean	false	否	是否解码

• text 组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中
  代码案例

<view><!-- 长按文本是否可选 --><text selectable='true'>来了老弟</text>
</view><view><!-- 显示连续空格的方式 --><view><text space='ensp'>来了  老弟</text></view><view><text space='emsp'>来了  老弟</text></view><view><text space='nbsp'>来了  老弟</text></view>
</view><view><text>skyblue</text>
</view><view><!-- 是否解码 --><text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

9.view视图容器组件的用法

View 视图容器， 类似于 HTML 中的 div
代码案例

<view class="box2" hover-class="box2_active"><view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'></view>
</view>

10.button按钮组件的用法

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

• button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个
  案例代码

<button size='mini' type='primary'>前端</button>
<button size='mini' type='default' disabled='true'>前端</button>
<button size='mini' type='warn' loading='true'>前端</button>

11.image组件的使用

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式

Tips

• <image> 组件默认宽度 300px、高度 225px；
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

12.uni-app中的样式

• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
• 支持基本常用的选择器class、id、element等
• 在 uni-app 中不能使用 * 选择器。
• page 相当于 body 节点
• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
• uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
• 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
• 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
• 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

 @font-face {font-family: test1-icon;src: url('~@/static/iconfont.ttf');}

13.uni-app中的数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default {data () {return {msg: 'hello-uni'}}
}

14. 插值表达式的使用

• 利用插值表达式渲染基本数据

  <view>{{msg}}</view>
  

• 在插值表达式中使用三元运算

  <view>{{ flag ? '我是真的':'我是假的' }}</view>
  

• 基本运算

  <view>{{1+1}}</view>
  

15.v-bind动态绑定属性

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default {data () {return {img: 'http://destiny001.gitee.io/image/monkey_02.jpg'}}
}

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成:

<image :src="img"></image>

16.v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data () {return {arr: [{ name: '刘能', age: 29 },{ name: '赵四', age: 39 },{ name: '宋小宝', age: 49 },{ name: '小沈阳', age: 59 }]}
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>

17.uni中的事件

事件绑定
在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {tapHandle () {console.log('真的点我了')}
}

事件传参

• 默认如果没有传递参数，事件函数第一个形参为事件对象

// template
<button @click="tapHandle">点我啊</button>
// script
methods: {tapHandle (e) {console.log(e)}
}

• 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {tapHandle (num) {console.log(num)}
}

• 如果获取事件对象也想传递参数

// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {tapHandle (num,e) {console.log(num,e)}
}

18.uni的生命周期

应用的生命周期
生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

页面的生命周期
uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。
onHide	监听页面隐藏
onUnload	监听页面卸载

19.总结

今天我们认识了什么叫uni-app 我们也知道了怎么下载安装 我们也知道了里面的页面外观配置 数据绑定 uni-app的生命周期 懂了组件的简单使用 懂了在uni-app中的样式学习 懂了uni中的事件今天暂时更新这点 需要你们也要看完哦

uni-app的基本使用相关推荐

1. 切换 uniapp_万能前端框架uni app初探03：底部导航开发

   前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...

2. uni app map 地图 漂浮问题及方案

   uni app map 地图 漂浮问题及方案 文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...

3. uni.app H5(微信公众号定位) uni.getLocation

   最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...

4. HBuilder X ——Uni app 学习笔记（一）

   HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

5. uni app中使用图表

   关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...

6. uni app 自动化索引列表

   uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...

7. HbuilderX:uni app踩坑之uView-ui

   HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

8. uni App+H5 实现人脸识别

   uni App+H5 实现人脸识别 通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...

9. uni app 视频播放功能

   视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等 媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...

10. uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱

    一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...

最新文章

1. 策略模式——Strategy
2. WPF 基础控件之CheckBox样式
3. 前端学习（3164）：react-hello-react之添加todoList
4. 多处理机的进程调度方式
5. 通用职责分配软件原则之1-信息专家原则
6. 设计灵感|26个字母的花样插画解读方式
7. Unity开发《一起来捉妖》教程 | 1.陀螺仪控制相机
8. Mongodb常规操作【一】
9. [转]SOAP 教程
10. Linux下的Nginx安装(开机自启动)
11. 焊接工时简便计算工具_焊接工时定额计算手册.doc
12. 一个神奇的大学科目《软件工程》，知识点总结+测试题，包你不挂科
13. Redis介绍、安装、客户端
14. 将汉字转换为拼音：pypinyin.pinyin()
15. C# 怎么把集合转换成数据库添加语句，把类转换成sql语句
16. WiFi、ZigBee、BLE用哪个？
17. 【新手学习】Excel操作指南 之一
18. Unlock_ALD程序,用于解锁由 Adob​​e 产品
19. docker-compose部署SS
20. 【Linux 内核】CFS 调度器 ③ ( 计算进程 “ 虚拟运行时间 “ )

热门文章

1. circos 可视化手册-histograms 篇
2. 使用CSplitterWnd分隔窗口，左视图控制，右视图显示
3. java程序笑脸怎么打_我编写的JAVA程序为什么在编译执行后会先打出一个笑脸呢？...
4. C stdlib.h
5. rgb 接口lcd 驱动调试
6. 记录配置Jupyter kernels
7. 计算机ctrl加什么作用,计算机中快捷键ctrl加什么是返回上一步
8. RocketMQ-顺序消息Demo及实现原理分析
9. 4.2.7. Aggregate Expressions
10. Unity3D 协程