uni-app学习

学习要求

核心内容：

1. 掌握 uniapp 的路由配置
2. 掌握将 uniapp 项目运行在微信开发者工具或者手机上的方法
3. 掌握 uniapp 的生命周期
4. 掌握 uniapp 组件的使用

最终任务：

模拟实现一个跨平台项目

一、什么是uni-app

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

即使不跨端，uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手uni-app。

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

uni-app官网

二、环境搭建

1、安装编辑器HbuilderX【网站】
2、安装微信开发者工具 【网站】
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化；下载App开发版，可开箱即用。

三、初始化项目

点击HbuilderX菜单栏文件>项目>新建

选择uni-app,填写项目名称，项目创建的目录

注意：这里创建的是个项目不是目录，目录后边用到；一个项目有很多目录。随后可以运行，导航栏可以选择运行到不同的平台上，注意如果第一次运行到”微信小程序“需要配置微信小程序的路径；路径到启动项的上级文件夹。

3.1、介绍项目目录及作用

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

3.2、开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

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

3.3、全局配置和页面配置

全局配置在pages.json 里边，3.1中提到的文件都可以在uni-app官网查到很详细的文件配置项目和说明。
全局配置

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）	APP与H5为#F7F7F7，小程序平台请参考相应小程序文档
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色	微信小程序
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light	微信小程序
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
backgroundColorTop	HexColor	#ffffff	顶部窗口的背景色（bounce回弹区域）	仅 iOS 平台
backgroundColorBottom	HexColor	#ffffff	底部窗口的背景色（bounce回弹区域）	仅 iOS 平台
titleImage	String		导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址	支付宝小程序、H5、APP
transparentTitle	String	none	导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明	支付宝小程序、H5、APP
titlePenetrate	String	NO	导航栏点击穿透	支付宝小程序、H5
pageOrientation	String	portrait	横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见 响应显示区域变化	App 2.4.7+、微信小程序
animationType	String	pop-in	窗口显示的动画效果，详见：窗口动画	App
animationDuration	Number	300	窗口显示动画的持续时间，单位为 ms	App
app-plus	Object		设置编译到 App 平台的特定样式，配置项参考下方 app-plus	App
h5	Object		设置编译到 H5 平台的特定样式，配置项参考下方 H5	H5
mp-alipay	Object		设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY	支付宝小程序
mp-weixin	Object		设置编译到 mp-weixin 平台的特定样式	微信小程序
mp-baidu	Object		设置编译到 mp-baidu 平台的特定样式	百度小程序
mp-toutiao	Object		设置编译到 mp-toutiao 平台的特定样式	字节跳动小程序
mp-qq	Object		设置编译到 mp-qq 平台的特定样式	QQ小程序
usingComponents	Object		引用小程序组件，参考 小程序组件
renderingMode	String		同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层	微信小程序
leftWindow	Boolean	true	当存在 leftWindow 时，默认是否显示 leftWindow	H5
topWindow	Boolean	true	当存在 topWindow 时，默认是否显示 topWindow	H5
rightWindow	Boolean	true	当存在 rightWindow 时，默认是否显示 rightWindow	H5
rpxCalcMaxDeviceWidth	Number	960	rpx 计算所支持的最大设备宽度，单位 px	App、H5（2.8.12+）
rpxCalcBaseDeviceWidth	Number	375	rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px	App、H5（2.8.12+）
rpxCalcIncludeWidth	Number	750	rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx	App、H5（2.8.12+）
maxWidth	Number	1190	单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)	H5（2.9.9+）

3.4创建新的message页面

右键pages新建message目录，在message目录下右键新建vue文件,并选择基本模板。

四、全局配置项目索引（基于课程）

pages.json配置的项目：

1. 页面的路径path；每在pages里新建的页面都要在这里进行路径的补充。

2. 通过style修改页面的标题和导航栏背景色。

3. 通过globalStyle来设置默认页面的窗口表现。

4. 通过tabBar来配置底部导航栏。

   属性	类型	必填	默认值	描述	平台差异说明
   color	HexColor	是		tab 上的文字默认颜色
   selectedColor	HexColor	是		tab 上的文字选中时的颜色
   backgroundColor	HexColor	是		tab 的背景色
   borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white	App 2.3.4+ 支持其他颜色值、H5 3.0.0+
   blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
   list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
   position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持
   fontSize	String	否	10px	文字默认大小	App 2.3.4+、H5 3.0.0+
   iconWidth	String	否	24px	图标默认宽度（高度等比例缩放）	App 2.3.4+、H5 3.0.0+
   spacing	String	否	3px	图标和文字的间距	App 2.3.4+、H5 3.0.0+
   height	String	否	50px	tabBar 默认高度	App 2.3.4+、H5 3.0.0+
   midButton	Object	否		中间按钮 仅在 list 项为偶数时有效	App 2.3.4+、H5 3.0.0+

   其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

   属性	类型	必填	说明
   pagePath	String	是	页面路径，必须在 pages 中先定义
   text	String	是	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
   iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
   selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效

   midButton 属性说明

   属性	类型	必填	默认值	描述
   width	String	否	80px	中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度
   height	String	否	50px	中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果
   text	String	否		中间按钮的文字
   iconPath	String	否		中间按钮的图片路径
   iconWidth	String	否	24px	图片宽度（高度等比例缩放）
   backgroundImage	String	否		中间按钮的背景图片路径

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

   属性说明：

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

   list说明：

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

6. 具体见uni-app官网-框架。

五、组件的使用索引（基于课程）

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用。

uni-app官网-组件

5.1 text组件的使用

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选	App、H5
user-select	Boolean	false	文本是否可选	微信小程序
space	String		显示连续空格	App、H5、微信小程序
decode	Boolean	false	是否解码	App、H5、微信小程序

space 值说明

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

	
    
         
              来了老弟
          
          
              来了老弟
          
        													 

如果是一个view中放两个text的效果就是两个text同行显示；放在两个view中就是两行独占显示；并且两个view需要一个根组件。

	来了老弟
	
	来了  老弟      
	

5.2 view组件的使用

视图容器。

它类似于传统html中的div，用于包裹各种元素内容。

如果使用nvue，则需注意，包裹文字应该使用组件。

属性说明

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

注意这里的两个view是嵌套的，所以200* 200的区域是包裹住100* 100的区域的。

效果：100*100的绿色区域被 200 *200的蓝色区域包裹住，然后点击内层两秒后变成红色，再过两秒红色变回绿色，外层不变；点击外层同理。

5.3 button按钮

属性名	类型	默认值	说明	生效时机	平台差异说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标		App-nvue 平台，在 ios 上为雪花，Android上为圆圈
form-type	String		用于 组件，点击分别会触发 组件的 submit/reset 事件
open-type	String		开放能力
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果		App-nvue 平台暂不支持
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
app-parameter	String		打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效		微信小程序、QQ小程序
hover-stop-propagation	boolean	false	指定是否阻止本节点的祖先节点出现点击态		微信小程序
lang	string	‘en’	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。		微信小程序
session-from	string		会话来源，open-type="contact"时有效		微信小程序
send-message-title	string	当前标题	会话内消息卡片标题，open-type="contact"时有效		微信小程序
send-message-path	string	当前分享路径	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效		微信小程序
send-message-img	string	截图	会话内消息卡片图片，open-type="contact"时有效		微信小程序
show-message-card	boolean	false	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效		微信小程序
@getphonenumber	Handler		获取用户手机号回调	open-type=“getPhoneNumber”	微信小程序
@getuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo	open-type=“getUserInfo”	微信小程序
@error	Handler		当使用开放能力时，发生错误的回调	open-type=“launchApp”	微信小程序
@opensetting	Handler		在打开授权设置页并关闭后回调	open-type=“openSetting”	微信小程序
@launchapp	Handler		从小程序打开 App 成功的回调	open-type=“launchApp”	微信小程序

• 注1：button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
• open-type="launchApp"时需要调起的APP接入微信OpenSDK详见

size 有效值

值	说明
default	默认大小
mini	小尺寸

type 有效值

值	说明
primary	微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式
default	白色
warn	红色

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>

button组件后续还有介绍，很多接口。

5.4 image组件

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有效	微信小程序、百度小程序、字节跳动小程序
fade-show	Boolean	true	图片显示动画效果	仅App-nvue 2.3.4+ Android有效
webp	boolean	false	默认不解析 webP 格式，只支持网络资源	微信小程序2.9.0
show-menu-by-longpress	boolean	false	开启长按图片显示识别小程序码菜单	微信小程序2.7.0
draggable	boolean	true	鼠标长按是否能拖动图片	仅 H5 平台 3.1.1+ 有效
@error	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}

mode 有效值：

mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

插入图像的组件，image·组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度.

src可以支持线上网址；注意：线上的网址结尾是图片的格式，并不是网页，复制过来的应该是图片的地址！

六、uni-app中的样式

6.1 rpx自适应单位

详见uni-app官网-框架简介-页面布局与样式-尺寸单位

rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大；也可以用在文字上。

这里的375就是750基准的一半，实际显示过程中根据屏幕尺寸显示屏幕的一半。

6.2 @import

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

注意以上代码，除了“样式学习”绑定了class样式，其他两行文字没有绑定，就全都用了css文件的样式。

6.3 全局样式与局部样式

官网-介绍-框架简介-页面样式与布局-全局样式与局部样式

定义在App.vue中的样式为全局样式，作用于每一个页面。在 pages 目录下 的vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue 中相同的选择器。

选择器种类可以看uni-app官网-框架简介-页面布局与样式-选择器。

意思就是在app.vue中写的.class类会被页面中.vue文件的.class类覆盖掉；这里的class类名要一样。

app.vue 中代码

某一页面中的vue

以上代码类名相同为newbox，这时页面的会覆盖整体的；如果把页面中的background注释掉，那么整体的蓝色background会生效，并且页面中的newbox类的其他属性一样生效！如果类名不同那么就无法覆盖。

app.vue补充的是其他页面的相同类名中的相同设置项！可以理解为App.vue是全部页面vue文件的整体设置。

并且，在app.vue中添加好的样式什么的，不在具体的页面上引用的话，也不会显示。它的作用就是先放在整体的vue中之后就可以在各个页面vue进行引用了。

6.4 字体图标的使用

官网-介绍-框架简介-页面样式与布局-字体图标

字体图标简单的说，就是一种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样，字体图标最大的好处，在于它不会变形和加载速度快。字体图标可以像文字一样，随意通过CSS来控制它的大小和颜色。

使用本地路径图标字体需注意：

1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64格式；

2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；

3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

@font-face {font-family: "iconfont";
  src: url('~@/static/fonts/iconfont.eot?t=1564622062967'); /* IE9 */
  src: url('~@/static/fonts/iconfont.eot?t=1564622062967#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO8AAsAAAAAB7gAAANwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDFIJnATYCJAMMCwgABCAFhG0HRBu7BhHVm7fIvjygx7TMFStNxenSq2WP9X36CU2F1n7OILuqenpuT4CejMCIWLwzI9wAAIfc/KJHSDDiwLwECAjNz7GGbjAZSrO2GfqMqjBMSTzvp2W2tykp/XlwTf3/beJ5NptLVFNEYSTgBAfUjVU44A1kgr5h7IKWuB0IAAnosEKCQqKSIAYWZj8CgFSVl+ZDLKMG25BMIAYCTsVUFmQOIhBjxpl7AGaD75PPcEgMYCBCYQ6NKwkugt87k88TtE/YhywPAWc6IwA2C6AArAAsQHIqzWmgkc8KhYQqZpujOWBBwEzlFAoDtibkWH94AAMCEA7MRCkAgBlSMrgojkMDBvg87lVzHq43BwALoBfAISxXGvpixk0N8dqVDUL6VS8JHFdVV0/r7pqsqPD5KVxu0pLSAfWzxsvKZ3nuy0DfmhKXq6Z8kMebFAhMVTf4KdEy+nu4U3yD/YJUcpXvcDFlZ7+lgJ+Ax0s+elZr64zRGa5XZ8nKhFLRUt/ypGois31fUvrcU0Lj+Rut9hdJkP3OkoePqlemn/1R5G53+aU6Rr/NJ/VN0zd1JRra20tQiu4u8UbdW9PdahbDHkYB6dO35RKlf5zNkWy1P9awViTdy5mxGb5hreFYrplHaIP8RJyGHNe0ASnkNGJG+tSm+wKzU6wUgvr+Lje8s9KDbmwsyg0WiNVPXI8KCsjog9tjbSUlyi0tJa3K3/3r2JtL1xic3CNvaWbXovxNJdBra4V55G73Xhp5AAAhOkeRgy4y/3/Wb7Ds3WmVK+t1MVgAwPNmfwtsQiy6+8XAAIzzazgdK1iNZ2ooq7AdtmGlyBpoZADI5BL8kFQAUPBmuFUZEiOBGOdAYCAKbaAQgxHKEqxABJJwAg7E4AsSsBQ6WxKKGkBBWHEAFoYBEMg5DQxkcA0o5NxHWcJrEIGKr8CBXBQkkEIUl5SU2SbBWXGD5Qd+5Z1snZow+Yr2lWZJ8wLiE+X0TmirJh+84I4yxYjzbTtVAhLOMIDdMCWGQzjgqpVTPfq6pqorVSvnwkhwVtzA8gN+5Z28+moKn7+ifaVZGnKq9E+U0zcOWpWmA3oR751ybmWf8207qgRIOIMBGDFZPgZHdaeAq1bcAM/Rq1Et6iqulpfmF8hiBZjZNIZQwoJLDxv/bt6tM4bN+4bfknxKRQE=') format('woff2'),
  url('~@/static/fonts/iconfont.woff?t=1564622062967') format('woff'),
  url('~@/static/fonts/iconfont.ttf?t=1564622062967') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/static/fonts/iconfont.svg?t=1564622062967#iconfont') format('svg'); /* iOS 4.1- */
}

使用方法：先把本地的字体图标文件添加到项目中，再更改字体图标的css文件里边的路径为~@形式；然后可以在页面定义class类别引用图标了。

<template>
	<view>
		<view class="iconfont icon-tupian">view>
	view>
template>
<style>
	@import url("../../static/fontpicture/iconfont.css"); 
style>

或者是在app.vue中总体载入。

<style>
	/*每个页面公共css */
	 @import url("./static/fontpicture/iconfont.css");
style>

导入字体图标的文件进项目

iconfont组件中的四个字体图标及名字。

6.5 使用scss全局变量

官网-介绍-框架简介-页面样式与布局-全局样式与局部样式

使用的是uni.scss文件，uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

在使用lang="scss"之前要安装scss插件；在工具中的插件安装。

页面的vue文件中

<template>
	<view>
		<view class="newbox">样式学习
		<text>新学习text>
		view>	
		<view>1213241view>
	view>
template>
//这里引用scss全局样式文件
<style lang="scss"> 
     //这里是引用外部css样式                  
	@import url("./style.css"); 
	.newbox{
		width: 375rpx;
		height: 750rpx;
		background: $uni-color-primary;            			  //使用了预置的颜色变量
		color: #4CD964;
		font-size: 50rpx;
		text{
			color:pink;  //注意这里的text是在newbox样式下的，可以单独给text设置样式
			//不单独设置text的颜色，默认使用的是color: #4CD964;
		}   
	}
style>

以上代码background使用了uni.scss的预置变量，颜色变量可在uni.scss文件中查看。

6.6 数据绑定{{}}的用法

官网-介绍-vue教程-基础-模板语法-插值

<template>
	<view>
		<view>  {{msg}}   msg  view>            
		<view>数据的拼接：{{number+'我是谁'}}view>  
		<view>三目运算：{{flag?'我是真':'我是假'}}view>  
		<view>运算{{1+2}}view> 
	view>
template>
<script>
	 export default {
	        data() {
	            return {
	                msg: 'Hello Vue!',
					flag:true,
					number:1
	            }
	        }
	    }
script>

{{msg}}里的内容将会被替代为对应数据对象上msg的值。无论何时，绑定的数据对象上msg发生了改变，插值处的内容都会更新。

6.7 v-bind v-for v-on指令

v-bind：官网-介绍-vue教程-基础-模板语法-指令

v-for：官网-介绍-vue教程-基础-列表渲染

v-on：官网-介绍-vue教程-基础-模板语法-指令

6.7.1 v-bind指令

v-bind 是可以动态的绑定一个或者多个属性。

<template>
	<view>
		<image src="path">image>     
	view>
template> 
<script>
	 export default {
	        data() {
	            return {
					path:"https://scpic.chinaz.net/files/pic/pic9/202104/hpic3876.jpg",
	            }
	        }
	    }
script>

上述代码，显示的时候path并不会被解析成网址，只是一个字符串；加上v-bind才会被解析成网址。

v-bind的缩写:，以上注释的两种写法都可。

6.7.2 v-for指令

v-for 指令可以实现基于一个数组来渲染一个列表。

<template>
	<view>
		<view v-for="(item,index) in array">
			默认索引：{{index}},姓名：{{item.name}},年龄：{{item.age}},序号：{{item.number}}
		view>
	view>
template>
<script>
	 export default {
	        data() {
	            return {
					array:[
						{
							name:"宋小宝",
							age:"18",
							number:1
						},
						{
							name:"小沈阳",
							age:22,
							number:2
						},
						{
							name:"赵四",
							age:33,
							number:3
						}
					]
	            }
	        }
	    }
script>

以上item就是对象，item in array指的是数组中的对象。效果如下图所示：

6.7.3 v-on指令

v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件

<template>
	<view>
		<button @click="clickhandle(25,$event)">我是个绑定了点击事件的按钮button>
	view>
template>
<script>
	 export default {
	        data() {
	            return {
	            }
	        },
			methods:{
				clickhandle(number,e){
					console.log('点击我了',number,e)
				}
			}
		}
script>

console.log是打印的意思，在页面的调试中可以看到。以上代码用v-on指令为按钮绑定了点击事件，同时此事件clickhandle传回参数，一个是25，另一个是 事件对象

七、生命周期

官网-框架-框架接口-生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

生命周期分app的和页面的，app的在App.vue中设置，页面的在页面vue中设置。

应用生命周期

uni-app 支持如下应用生命周期函数：

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

注意

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

  App.vue中：

页面生命周期

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

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例

八、下拉刷新

uni官网-API-界面-下拉刷新

曾经在pages.json中的globalStyle定义过**“enablePullDownRefresh”:true**，这是全局的所有页面都可以进行下拉的刷新。

在uni-app中有两种方式开启下拉刷新

1. 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh，页面的下拉刷新

2. 通过调用uni.startPullDownRefresh方法来开启下拉刷新

   uni.startPullDownRefresh(OBJECT)

   开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

   OBJECT 参数说明

   参数名	类型	必填	说明
   success	Function	否	接口调用成功的回调
   fail	Function	否	接口调用失败的回调函数
   complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

   success 返回参数说明

   参数	类型	说明
   errMsg	String	接口调用结果

3. onPullDownRefresh:在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

4. uni.startPullDownRefresh(OBJECT):开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

5. uni.stopPullDownRefresh():停止当前页面下拉刷新。（https://uniapp.dcloud.io/api/ui/pulldown?id=stoppulldownrefresh）

延迟：setTimeout( ()=>{ },2000)

8.2上拉加载

官网-框架-框架接口-生命周期

九、发起网络请求

官网-API-网络-发起请求

本地请求步骤：

1. 打开phpstudy启动

2. 在D:\SKK\uniapp黑马教程\uniapp\素材\heima_shop_server 路径下启动windows powershell

3. 运行node ./src/app.js

4. 得到地址

5. 在浏览器输入地址 localhost:8082/api/getlunbo

十、数据缓存

官网-API-数据缓存

一般用同步的更简略：uni.setStorageSync(KEY,DATA)

十一、图片上传及预览

uni-api-媒体-图片

思路：图片的上传利用uni.chooseImage函数，并且返回一个图片的地址数组，我们用个空的数组去接收这个地址数组，然后利用image组件进行动态显示出来，最后预览用uni.previewImage函数，注意预览的是点击的那个图片，那么应该在点击事件发生时传回一个参数，这个参数就是点击的图片的地址。

图片描述

十二、差别编译，页面的跳转及参数传递

一、差别编译

uni-介绍-条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

1. #ifdef：if defined 仅在某平台存在

2. #ifndef：if not defined 除了某平台均存在

3. %PLATFORM%：平台名称

%PLATFORM% 可取值如下：

值	平台
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-QQ	QQ小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

例子：

二、页面跳转

页面的跳转分两种方式：一是用组件的方式navigator，二是用API函数跳转。

1. uni-组件-页面路由与跳转-navigator

   属性说明

   属性名	类型	默认值	说明	平台差异说明
   url	String		应用内的跳转链接，值为相对路径或绝对路径，如："…/first/first"，"/pages/first/first"，注意不能加 .vue 后缀
   open-type	String	navigate	跳转方式
   delta	Number		当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
   animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
   animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
   hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
   hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
   hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
   hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
   target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

   open-type 有效值

   值	说明	平台差异说明
   navigate	对应 uni.navigateTo 的功能
   redirect	对应 uni.redirectTo 的功能
   switchTab	对应 uni.switchTab 的功能
   reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序不支持
   navigateBack	对应 uni.navigateBack 的功能
   exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

2. uni-API-路由与页面跳转

   注意，组件一般都是在template结构体里边写，api函数在script里边写

<template>
	<view>
		<navigator url="../list/list?id=你好&age=23">跳转至普通页面navigator>
        
		<navigator url="../list/list" open-type="redirect">跳转至普通页面navigator>
        
		<navigator url="../index/index" open-type="switchTab">跳转到tablebar页面navigator>
		
		<button @click="jump">跳转至普通页面button>
		<button @click="jump1">跳转到tablebar页面button>
	view>
template>
<script>
	export default{
		methods:{
			jump(){
				uni.navigateTo({
					url:"../list/list"
				})
			},
			jump1(){
				uni.switchTab({
					url:"../index/index"
				})
			}
		}
	}
script>
<style>
style>

list页面

<script>
	export default{
		onLoad(data) {
			console.log(data)
		}
	}
script>

数据的传递在url地址后边加上？引导即可，多数据用&并列，参数的接收在跳转的页面内用onload接收，页面生命周期里边的函数。

十三、组件的创建使用和组件的生命周期函数

1、组件的创建使用：uni-组件-组件概述

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。例如 /components/uni-rate/uni-rate.vue

如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：

1. import导入组件 script下import newtext from’…/…/components/newtext.vue’

2. components里注册组件script下的export default下components: { newtext:newtext }

3. template中使用组件

2、组件的生命周期函数：uni-框架-框架接口-生命周期-组件生命周期

可以利用组件生命周期函数进行数据初始化获取数据等操作。

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

十四、组件之间的参数传递

14.1 父组件向子组件传值

传数据通过属性绑定传递，接收通过props接收。

以下的例子，jump中引用了newtext组件，所以前者为父组件后者为子组件。

在父组件中绑定一个属性，动态绑定才能解析成值，非字符串。

在子组件中用props接收到，并且能在父组件显示出来，data1=555。

14.2 子组件向父组件传值

通过注册自定义事件实现。

uni-框架-框架接口-页面通讯

在子组件中定义一个事件叫myeven

在父组件中调用的子组件上绑定这个自定义事件并且调用的函数，定义函数体并且显示，实现点击按钮一次就将子组件传过来的值进行相加运算。

3 兄弟组件之间传值

通过a1给b1组件改值

a1组件：

b1组件：

如果按钮中的文字太长会导致按钮不显示，并且保存编译要每个文件都保存才可以，在某个文件保存，其余文件不执行保存的操作。