uni-app学习

一、课程介绍

课程流程介绍

基础部分：

环境搭建

页面外观配置

数据绑定

uni-app的生命周期

组件的使用

条件注释跨端兼容

uni中的事件

导航跳转

组件创建和通讯

项目：

黑马商城项目

uni-app介绍

uni-app是一个使用vue.js开发所有前端应用的框架。一套代码，可发布到IOS、Android、H5以及各种小程序等多个平台。

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

二、准备

环境搭建：HbuiderX

安装微信开发者工具，用于打包后小程序预览。

介绍项目目录和文件作用

pages.json文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。

manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

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

unpacksge就是打包目录，在这里有各个平台的打包文件

pages所有的页面存放目录

static静态资源目录，例如图片等

components组件存放目录

开发规范

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

页面文件遵循Vue单文件组件(SFC)规范

组件标签靠近小程序规范，详见uni-app组件规范

接口能力（JS API）靠近微信小程序规范，但需将前缀wx替换为uni，详见uni-app接口规范

数据绑定及事件处理同vue.js规范，同时补充了App及页面的生命周期

为兼容多端运行，建议使用flex布局进行开发

三、globalstyle全局外观配置

全局配置

用于设置应用的状态栏、导航栏、标题、窗口背景色等

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#FFFFFF	窗口的背景色
backgroundTextStyle	Srting	dark	下拉loading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px,详见页面生命周期

页面配置

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/message/message",
            "style":{
                "navigationBarTitleText":"信息页",
                "navigationBarBackgroundColor":"#007AFF",
                "h5":{
                    "pullToRefresh":{
                        "color":"#007AFF"
                    }
                }
            }
        },
        {
            "path": "pages/index/index"         
        }
        
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "绿帽子",
        "navigationBarBackgroundColor": "#7FFF00",
        "backgroundColor": "#228B22",
        "enablePullDownRefresh":true,
        "backgroundTextStyle":"light",
        "onReachBottomDistance":50
    }
}

配置tabbar

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

当tabbar设置了position为top时，将不会显示icon图标。

tabbar中的list是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。

属性说明：

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab上的文字默认颜色
selectedColor	HexColor	是		tab上的文字选中时的颜色
backgroundColor	HexColor	是		tab的背景色
borderStyle	String	否	black	tabbar上边框的颜色，仅支持black/white	App2.3.4+支持其他颜色值
list	Array	是		tab的列表，详见list属性说明，最少2个，最多5个tab
position	String	否	bottom	可选值bottom、top	top值仅微信小程序支持

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

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

"tabBar":{
        "color":"#A0522D",
        "selectedColor":"#B3EE3A",
        "backgroundColor":"#FFFFFF",
        "borderStyle":"black",
        "position":"top",
        "list":[
            {
                "pagePath":"pages/index/index",
                "text":"首页",
                "iconPath":"/static/tabs/home.png",
                "selectedIconPath":"static/tabs/home-active.png"
            },
            {
                "pagePath":"pages/message/message",
                "text":"信息",
                "iconPath":"static/tabs/message.png",
                "selectedIconPath":"static/tabs/message-active.png"
            },
            {
                "pagePath":"pages/contact/contact",
                "text":"我们",
                "iconPath":"static/tabs/contact.png",
                "selectedIconPath":"static/tabs/contact-active.png"
            }
        ]
    }

"position":"top"只在微信小程序中生效。

condition启动模式配置

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

属性说明：

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

list说明：

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

"condition":{
        "current":0,
        "list":[
            {
                "name":"详情页",
                "path":"pages/detail/detail",
                "query":"id=80"
            }
        ]
    }

四、组件的基本使用

就像HTML中的div、p、span等标签的作用是一样的。

text文本组件

属性：

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

space值：

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

view视图容器组件

相当于div。

属性：

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

hover-stop-propagation阻止冒泡

:hover-start-time和:hover-stay-time后面写数字，所以前面要加冒号。

    
        
        我是一个大盒子
        
    

button按钮组件

size="default" 默认大小

="mini" 小按钮

type="default" 白色

="warn" 红色

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

plain 镂空

disabled 是否禁用，禁用不可点

loading 加载效果。H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)

按钮
按钮

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+、App（iOS15+）
@error	HandleEvent		当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
@load	HandleEvent		当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

• 组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度

五、uni-app中的样式

rpx即响应式即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，75Ppx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。

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

支持基本常用的选择器class、id、element等

在uni-app中不能使用*选择器。

page相当于body节点

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

uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点：

1. 字体文件小于40kb,uni-app会自动将其转化为base64格式；

2. 字体文件大于等于40kb,需开发者自己转换，否则使用将不生效；

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

   @font-face {
       font-family: "iconfont";
       src: url('~@/static/fonts/iconfont.eot?t=1576844226174');
   }

如何使用scss或者less

只要下载相关插件，就能自动编译

六、uni-app中的数据绑定

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

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

插值表达式的使用

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

{{msg}}

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

{{flag?'我是真的'：'我是假的'}}

基本运算

{{1+1}}

v-bind动态绑定属性

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

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

利用v-bind进行渲染

还可以缩写成：

v-for遍历

七、uni中的事件

事件绑定

事件传参

v-on:click="函数名(参数，$event)"

$event是指传入事件参数

八、uni的生命周期

应用的生命周期

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

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

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

App.vue中：

页面的生命周期

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

函数名	说明	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object(用于页面传参)
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新	九、
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

下拉刷新不推荐在全局写，

哪个页面需要就在哪个页面onPullDownRefresh监听，并且页面单独配置"enablePullDownRefresh":true

九、下拉刷新

开启下拉刷新

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

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

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

通过配置文件开启

创建list页面进行演示：

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新

十、上拉加载

触底事件onReachBottom

十一、网络请求

在uni中可以调用uni.request方法进行请求网络请求 需要注意的是：在小程序中网络相关的API在使用前需要配置域名白名单。

发生get请求

发生get请求

methods: {
    get(){
        uni.request({
            url:"http://localhost:8082/api/getlunbo",
            method:"GET",
            success(res) {
            	console.log(res)
            }
        })
    }
}

十二、数据缓存

uni.setStorage

异步

将数据存储在本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是一个异步接口。

存储数据

//methods中：
setStorage(){
    uni.setStorage({
        key:"id",
        data:80,
        success() {
        	console.log("存储成功")
        }
    })
}

uni.setStorageSync

同步

将data存储在本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是一个同步接口。

存储数据

//methods中：
setStorage(){
    uni.setStorageSync("id",100)
}

uni.getStorage

异步

从本地缓存中异步获取指定key对应的内容。

获取数据

//methods中：
getStorage(){
    uni.getStorage({
        key:"id",
        success(res){
        	console.log("获取成功",res.data)
        }
    })
}

uni.getStorageSync

同步

从本地缓存中同步获取指定 key 对应的内容。

获取数据

//methods中：
getStorage(){
    let res=uni.getStorageSync("id")
	console.log(res)
}

uni.removeStorage

异步

从本地缓存中异步移除指定 key。

移除id数据

//methods中：
removeId(){
    uni.removeStorage({
        key:"id",
        success() {
        	console.log("删除成功")
        }
    })
}

uni.removeStorageSync

同步

从本地缓存中同步移除指定 key。

移除id数据

//methods中：
removeId(){
    uni.removeStorageSync("id")
}

十三、上传图片、预览图片

uni.chooseImage

上传图片

从本地相册选择图片或使用相机拍照。

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App

• count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。

上传图片

chooseImg(){
    uni.chooseImage({
        count:5,
        success:res=>{
        console.log(res)
        	this.imgArr=res.tempFilePaths
        }
    })
},

uni.previewImage

预览图片

参数名	类型	必填	说明	平台差异说明
current	String/Number	详见下方说明	详见下方说明
urls	Array	是	需要预览的图片链接列表
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数

十四、条件注释实现跨端显示

跨端兼容

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

• 大量写 if else，会造成代码执行性能低下和管理混乱。

• 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

条件编译

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

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

• #ifdef：if defined 仅在某平台存在

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

• %PLATFORM%：平台名称

我希望只在H5页面中看见


我希望只在微信小程序中看见


onLoad() {
    // #ifdef H5
    console.log("我希望在h5中看见")
    // #endif
    // #ifdef MP-WEIXIN
    console.log("我希望在微信小程序中看见")
    // #endif
}

十五、uni中的导航跳转

利用navigator进行跳转

跳转到普通页面

	跳转到关于页面

跳转到tabbar页面，要加上open-type="switchTab"

	跳转到message页面

open-type="redirect"，销毁了页面才进行跳转，没有返回上一页箭头。通过生命周期函数onUnload的打印可见页面卸载了。

利用编程式导航进行跳转

跳转至详情页
跳转至信息页
跳转到详情页，并关闭当前页

methods: {
    goDetail(){
        uni.navigateTo({
        	url:"/pages/detail/detail"
        })
    },
    goMessage(){
        uni.switchTab({
        	url:"/pages/message/message"
        })
    },
    redirectDetail(){
        uni.redirectTo({
        	url:"/pages/detail/detail"
        })
    }
}

navigator跳转传参

跳转至详情页

detail.vue：options可以接收传过来的参数

onLoad(options) {
	console.log(options)
},

编程式跳转传参

goDetail(){
    uni.navigateTo({
    	url:"/pages/detail/detail?id=100&age=20"
    })
},

detail.vue：options可以接收传过来的参数

onLoad(options) {
	console.log(options)
},

十六、uni-app中组件的创建

创建

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

创建login组件，在component中创建login目录，然后新建login.vue文件

在其他组件中导入该组件并注册

components组件

十七、组件的通讯

父组件给子组件传值

通过props来接受外界传递到组件内部的值。

父组件传值：

子组件接收：

子组件给父组件传值

通过$emit触发事件进行传递参数

子组件传值：

给父组件传值

父组件接收：

这是子组件传递过来的数据{{num}}

components组件之间传值

a.vue传值

b.vue接收

index.vue父组件把子组件渲染在页面

十八、uni-ui

uni官网下载安装ui组件到HBuilderX的项目里面。

然后就可以直接在template 中使用组件。

    


//要注意示例代码的触发事件
methods:{
	change(e){
		console.log("触发了change",e)
	}
}