uni-app移动应用开发课件 2-基础内容

移动应用

开发UniAppuni-app基础内容1第

二

章学习目标

知识目标1.掌握uni-app的基本开发流程2.掌握常用的基本组件3.掌握flex布局能力目标1.能够熟练使用基础组件搭建页面2.能够熟悉使用flex布局页面3.能够开发多tab的应用

素质目标1.具有良好的软件编码规范素养2.培养独立思考、分析问题、解决问题的能力3.逐渐具备持之以恒的精神目录CONTENTSpages.json1资源引用2页面样式3尺寸单位4基础组件5pages.json第

一

节2.1.1globalStyle和pages在HbuliderX中新建一个“默认模板”项目uniappch02，打开pages.json，代码如下：{ "pages":[//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/index/index", "style":{ "navigationBarTitleText":"uni-app" } } ], "globalStyle":{ "navigationBarTextStyle":"black", "navigationBarTitleText":"uni-app", "navigationBarBackgroundColor":"#F8F8F8", "backgroundColor":"#F8F8F8" }}2.1.1globalStyle和pages状态栏1导航条2标题3窗口背景色4globalStyle全局设置应用globalStyles属性属性类型默认值描述navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色navigationBarTextStyleStringwhite导航栏标题颜色及状态栏颜色，仅支持black/whitenavigationBarTitleTextString

导航栏标题文字内容backgroundColorHexColor#ffffff下拉显示出来的窗口背景色backgroundTextStyleStringdark下拉loading的样式，仅支持dark/lightenablePullDownRefreshBooleanfalse是否开启下拉刷新navigationStyleStringdefault值为default/custom，custom即取消默认原生导航栏。属性类型描述属性pathString配置页面路径pathstyleObject配置页面窗口表现，参考表2-1中globalStylestylepages属性2.1.2tabBar属性类型默认值描述colorHexColorHexColorTab上的文字默认颜色，必填selectedColorHexColorTab上的文字选中时的颜色，必填backgroundColorHexColorTab上的背景颜色borderStyleStringblacktabBar上边框的颜色，可选值black/whitelistArrayTab的列表，最少2个、最多5个。tabBar属性在pages.json中提供tabBar配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。2.1.2tabBar属性类型描述pagePathString页面路径，必须在pages中先定义，必填textStringTab上的按钮文字，在App和H5平台非必填iconPathString图片路径，icon大小限制为40kb，建议尺寸为81px*81px，当position为top时，此参数无效，不支持网络图片，不支持字体图标selectedIconPathString选中时的图片路径，图片要求与iconPath一致。list数组元素属性list接受一个数组，数组中每个项都是一个对象。(a)组件页实现一个有2个tab页面的应用2.1.2tabBar(b)flex布局页实现步骤

iconfont网站首页准备tabBar上的图标1下载图标页面2.1.2tabBar新建页面2<template> <view> 弹性盒子布局flex </view></template>新建页面窗口文件结构图2.1.2tabBar实现步骤实现步骤{ "pages":[//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/compony/compony", "style": { "navigationBarTitleText":"基础组件", "enablePullDownRefresh":false }

} , { "path":"pages/index/index", "style":{ "navigationBarTitleText":"uni-app" } } ,{"path":"pages/flex/flex","style":{"navigationBarTitleText":"flex布局","enablePullDownRefresh":false}

}], "tabBar":{ "backgroundColor":"#F8F8F8", "color":"#8F8F94", "list":[ {"text":"组件", "pagePath":"pages/compony/compony", "iconPath":"static/unComponet.png", "selectedIconPath":"static/componet.png" }, {"text":"flex布局", "pagePath":"pages/flex/flex", "iconPath":"static/unflex.png", "selectedIconPath":"static/flex.png" } ] }, "globalStyle":{ "navigationBarTextStyle":"black", "navigationBarTitleText":"uni-app", "navigationBarBackgroundColor":"#F8F8F8", "backgroundColor":"#F8F8F8" }}修改pages.json文件32.1.2tabBar2.1.3subPackages属性类型是否必填描述rootString是子包的根目录pagesArray是子包由哪些页面组成，参数同pageslist数组元素属性subPackages配置项，为小程序的分包加载配置。subPackages节点接收一个数组list，list数组每一项都是应用的子包。设置subPackages后，设置preloadRule分包预载配置，在小程序某个页面时，由框架自动预加载可能需要的分包，提升进入后续分包页面时的启动速度。资源引用第

二

节importaddfrom'@/common/add.js';//绝对路径importaddfrom'../../common/add.js';//相对路径1．引用js文件2.2资源引用@import"../../common/uni.css";@importurl('/common/uni.css');@importurl('@/common/uni.css');@importurl('../../common/uni.css');2．引用css文件<imageclass="logo"src="/static/logo.png"></image><imageclass="logo"src="@/static/logo.png"></image><imageclass="logo"src="../../static/logo.png"></image>3．在<template>内引入静态资源页面样式第三

节uni-app支持的选择器有#idclasselementelement，element：after：before2.3页面样式尺寸单位第四

节750*元素在设计稿中的宽度/设计稿基准宽度若设计稿宽度为

750px，元素A在设计稿上的宽度为100px，那么元素A在uni-app里面的宽度应该设为：750*100/750，结果为：100rpx。若设计稿宽度为640px，元素A在设计稿上的宽度为100px，那么元素A在uni-app里面的宽度应该设为：750*100/640，结果为：117rpx。若设计稿宽度为375px，元素B在设计稿上的宽度为200px，那么元素B在uni-app里面的宽度应该设为：750*200/375，结果为：400rpx。2.4尺寸单位基础组件第五

节组件的几个部分组件内容以组件名称为标记的开始标签和结束标签组件属性值组件属性2.5基础组件在开始标签和结束标签之间，称为组件内容。开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。每个属性通过=赋值。如：<imageclass="logo"src="/static/logo.png"></image>2.5基础组件<template><view><text>弹性盒子布局flex</text></view></template>每个vue文件的根节点必须为<template>，且这个下只能且必须有一个根<view>组件。2.5.1viewview组件属性属性类型默认值说明hover-classStringnone指定按下去的样式类。当hover-class="none"时，没有点击态效果hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态hover-start-timeNumber50按住后多久出现点击态，单位毫秒hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒view是容器组件，类似于HTML中的div标签，用于包裹各种元素内容，是页面布局最常用的标签。组件页面演示效果图2.5.2texttext组件属性属性类型默认值说明selectableBooleanfalse文本是否可选（微信小程序user-select）spaceBoolean显示连续空格decodeBoolean50是否解码值说明ensp中文字符空格一半大小emsp中文字符空格大小ebsp根据字体设置的空格大小space属性的取值text组件用于包裹文本内容，类似于Html中的span标签。2.5.2text组件页面演示效果图在compony.vue文件视图层<template>中添加代码演示<text>组件属性<viewclass="textbox"><textspace="ensp":decode="true">{{words}}</text></view><script>exportdefault{ data(){ return{

words:'永不放弃是实现梦想的唯一途径！<语录>' } }, methods:{

}}</script>在<script>部分添加代码2.5.3navigatornavigator组件常用属性属性类型默认值说明urlString应用内的跳转链接，值为相对或绝对路径open-typeStringnavigate跳转方式Hover-classBooleanNavigate-hover指定点击时的样式类，为none时，没有点击效果2.5.3navigatoropen-type属性的有效值属性说明navigate保留当前页面，跳转到应用内的某个页面redirect关闭当前页面，跳转到应用内的某个页面。switchTab跳转到tabBar页面，并关闭其他所有非tabBar页面。reLaunch关闭所有页面，打开到应用内的某个页面。navigateBack关闭当前页面，返回上一页面或多级页面。（a）组件页演示<navigator>组件的三种不同形式的导航2.5.3navigator（b）index页2.5.4imageimage组件常用属性属性类型默认值说明srcString图片资源地址modeString‘scaleToFill’图片裁剪、缩放的模式值说明scaleToFill不保持纵横比缩放图片，使图片的宽度完全拉伸至填满image元素aspectFit保持纵横比缩放图片，使长边完全显示出来aspectFill保持纵横比缩放图片，使短边完全显示出来，长边方向将会发生截取widthFix宽度不变，高度自动变化，保持原图宽高比不变heightFix高度不变，宽度自动变化，保持原图宽高比不变mode属性的取值（a）组件页在compony页面1个image组件2.5.3navigator（1）template部分添加代码：<viewclass="imgbox"><imagesrc="../../static/奋斗.jpg"mode="widthFix"class="img"></image></view>（2）style部分添加代码：imgbox{ width:100%; text-align:center;}.img{ width:60%;}2.5.5属性绑定和事件绑定属性绑定1<template>

<viewclass="imgbox"> <image:src="imgpath"mode="widthFix"class="img"></image></view></template><script>exportdefault{ data(){ return{

words:'永不放弃是实现梦想的唯一途径！<语录>', imgpath:'../../static/奋斗.jpg' } }, methods:{ }}</script>2.5.5属性绑定和事件绑定事件绑定2组件页面演示效果图<script>exportdefault{

methods:{

test(){ uni.showToast({ title:'你刚才点击了按钮！', duration:1500 }) } }}</script>2.5.6v-for渲染数据组件页面演示效果图演示数据渲染<template>

<viewclass="content">

<viewclass="listbox"> <textv-for="(item,index)inlist":key="index"> {{}}{{item.person}} </text></br> </view> </view></template><script>

data(){ return{

list:[{ id:1, name:'神舟14号', person:'陈冬、刘洋、蔡旭哲' }, { id:2, name:'神舟13号', person:'翟志刚、王亚平、叶光富' } ]

} },

</script>flex布局第

六

节2.6.1flex布局的基本概念弹性盒模型

flex页面演示效果图flex（flexiblebox）布局是在CSS3中引入的，又称为“弹性盒模型”，使用flex布局可以轻松地创建响应式网页布局。2.6.2容器属性

flex-direction属性取值描述row弹性盒子元素按横轴方向顺序排列（默认值）row-reverse弹性盒子元素按横轴方向逆序排列column弹性盒子元素按纵轴方向顺序排列column-reverse弹性盒子元素按纵轴方向逆序排列flexdirection页面演示效果图flex-direction属性12.6.2容器属性flex-wrap属性取值描述nowrap容器为单行，该情况下flex子项可能会溢出容器。该值是默认属性值，不换行wrap容器为多行，flex子项溢出的部分会被放置到新行（换行），第一行显示在上方wrap-reverse反转wrap排列（换行），第一行显示在下方

flexwrap页面演示效果图flex-wrap属性22.6.2容器属性justify-content属性取值描述flex-start弹性盒子元素将向行起始位置对齐（默认值）flex-end弹性盒子元素将向行结束位置对齐center弹性盒子元素将向行中间位置对齐space-between弹性盒子元素会平均分布在行里，第一个元素的边界与行的起始位置边界对齐，最后一个元素的边界与行结束位置的边界对齐space-around弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半space-around弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半justifycontent页面演示效果图justify-content属性32.6.2容器属性flex-flow属性4为flex-direction和flex-wrap的综合形式。默认值为rownowrap。其写法如下：flex-flow：columnwrap;2.6.2容器属性align-items属性取值描述flex-start弹性盒子元素向侧轴的起始位置对齐flex-end弹性盒子元素向侧轴的起始位置对齐center弹性盒子元素向侧轴的起始位置对齐baseline项目与行的基线对齐，在未单独设置基线时，等同于flex-startspstretch默认值。如果项目未设置高度或设为auto，将占满整个容器的高度alignitems页面演示效果图align-items属性52.6.2容器属性align-content属性6align-content属性主要用于在进行多行排列时，设置项目在侧轴方向上的对齐方式。文件aligncontent.vuealigncontent页面演示效果图2.6.3项目属性order属性1f