uni-app快速入门笔记

"globalStyle": {
          //导航栏标题颜色
        "navigationBarTextStyle": "black",
         //导航栏文字
        "navigationBarTitleText": "uni-app",
        //导航栏背景色           
        "navigationBarBackgroundColor": "#F8F8F8",
        //开启页面下拉       
         "enablePullDownRefresh":true,
        //（下拉）窗口背景颜色
        "backgroundColor": "#F8F8F8",
        //下拉loading
        "backgroundTextStyle"："light"
    }

4. 页面配置

"pages":[
    //第一个页面为启动页
    {
        //页面路由
        "path":"pages/index/index"
    },
    {
        "path":"pages/msg/msg"，
        //页面配置（覆盖全局样式）
        "style":{
        //导航栏标题颜色
        "navigationBarTextStyle": "black",
         //导航栏标题
        "navigationBarTitleText": "uni-app",
        //导航栏背景色           
        "navigationBarBackgroundColor": "#F8F8F8",
        //h5特有样式(不影响微信小程序样式)
        "h5":{
        "pullToRefresh"：{
        "color"："#666"
    }
}
        }
    }
]

5. tabbar

tabBar设置为顶部时，不显示图标；

tabBar是一个list数组，最少两个，最多两项。

//全局中配置tabBay
"tabBar":{
    //未选中的文字颜色
    "color":"#666"，
    //选中的文字颜色
    "selectedColor":"#000",
    //tab背景颜色
    "backgroundColor":"#",
    //tab背景框颜色
    "borderStyle":"#fff",
    //tab位置（仅支持微信小程序）
    "positon":"top",
    //tabBar的list
    "list":[
        //tabBar的item
        {
            //item名
            "text":"home",
            //item名
            "pagePath":"pages/home/home",
            //item未选中icon
            "iconPath":"static/tabs/home1.png",
            //item选中icon
            "selectedIconPath":"static/tabs/home2.png"
            
        },
        {
            //item名
            "text":"home",
            //item名
            "pagePath":"pages/msg/msg",
            //item未选中icon
            "iconPath":"static/tabs/msg1.png",
            //item选中icon
            "selectedIconPath":"static/tabs/msg2.png"
            
        },
    ]
}

6. condition

//启动模式配置，仅在开发时生效，直达配置文件
"condition":{
    //设置激活的页面索引
    "current":0,
    //页面列表，配置页面
    "list":[
        {
            //页面名称
            "name":"msg",
            //页面路径
            "path":"pages/msg/msg",
            //页面参数
            "query":"id=80"
        }
    ]
}

2.常用组件

uni-app官网

1. text

文字标签
组成的元素行内元素

属性

selectable文字是否可选

space是否显示空格

可选值

ensp空格占半个中文字符
emsp占整个中文字符
nbsp根据设置文字大小

decode

decode 可以解析的有 < > & '

decode 可以解析的有 
    根据字体大小的空格&nbsp; 
    小于&lt;
    大于&gt; 
    &和与&amp; 
    单引号&apos; 
    半个中文字符的空格&ensp; 
    整个中文字符的空格&emsp;

2.view

相当于div

基础容器元素
块级元素

属性

class展示样式类

hover-class点击展示样式类

hover-stop-propagation阻止冒泡

hover-start-time延迟显示

hover-stay-time延迟隐藏

3.button

size按钮大小

type按钮样式类型

plain按钮是否镂空

disabled按钮是否禁用

loading按钮加载状态

4. image

有默认宽高

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	不缩放图片，只显示图片的右下边区域

3. uni-app样式

1. rpx

响应式单位

以750rpx为基准（屏幕宽度100%）

超过750rpx会等比例放大

2. css相关

导入css文件
```
@import url('css文件路径')
```

导入iconfont

//app.vue中导入
@import url('./static/fonts/iconfont.css')
//iconfont.css中修改引入路径，url中添加~@/static/fonts
url('~@/static/fonts/')

在 uni-app 中不能使用 * 选择器。
微信小程序自定义组件中仅支持 class 选择器

app.vue中的style是全局样式

局部样式会覆盖全局样式

3. less&scss

HBuilderX顶部导航中”工具“>”插件安装“找到less&scss

4.语法

1.数据绑定与插值语法

与vue数据绑定相同

2.v-bind&v-if

v-bind

//完整写法
v-bind:src="imgURL"
//简写
：src="imgURL"

v-for

v-for="(item,index) in list" :key="item.index"
v-for="(item,index) in list" :key="item.id"

3.事件

//绑定事件
<button @click="handleClick(20,$event)">点击事件</button> 
//数据接收
handleClick(20,$event){
    
}

5.uni-app生命周期

生命周期：一个对象从创建、运行、到销毁的整个过程

1.uni-app生命周期

onLaunch uni-app初始化完成时触发（全局只触发一次）
onShow uni-app启动，或应用切换（前后台切换）时触发
onHide uni-app进入后台时触发

onError监听错误

onError:function(err){
    console.log("异常"，err)
}

2. 页面生命周期

onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
```
onLoad(options){
    
}
```
onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady监听页面初次渲染
onHide监听页面隐藏
onUnload监听页面卸载

onPullDownRefresh监听页面下拉刷新

//页面配置中开启页面刷新
"pages":[
    {
      "path":"pages/msg/msg",
       "style":{
        "onPullDownRefresh":true
       }
    }
]
 //页面组件中下拉监听
 onPullDownRefresh(){
    //关闭下拉刷新
    uni.stopPullDownRefresh()
}

//方法调用
pullDown(){
    uni.startPullDownRefresh()
}

onReachBottom监听页面下拉触底

6.数据获取、上传与储存

1. 数据获取——GET方法

通过uni.request(OBJECT)发送

发送不成功（域名校验不通过）微信小程序”详细“>”本地设置“>"不校验方法域名"

get(){
    uni.request({
        //请求路径    
        url:"http://localhost:8000",
        //成功回调
        success(res){
        console.log(res)            
        }
    })
}

2. 数据缓存

uni-app数据缓存

uni.setStorage异步方法，传值(OBJECT)

uni.setStorageSnyc同步方法，传值(KEY,DATA)

1.1uin.setStorage(OBJECT)

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

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

1.2uni.getStorage(OBJECT)

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

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
data	Any	key 对应的内容

1.3uni.removeStorage(OBJECT)

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

OBJECT 参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

1.4uni.clearStorage()

异步清理本地数据缓存。

2.1uni.setStorageSync(KEY,DATA)

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

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

2.2uni.getStorageSync(KEY)

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

参数说明

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

2.3uni.removeStorageSync(KEY)

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

参数说明

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key

2.4uni.clearStorageSync()

同步清理本地数据缓存。

3.图片上传与预览

3.1uni.chooseImage(OBJECT)

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序
extension	Array<String>	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	H5(HBuilder X2.9.9+)
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效	App 3.1.19+
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

3.2uni.previewImage(OBJECT)

预览图片。

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
current	String/Number	详见下方说明	详见下方说明
urls	Array<String>	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。	App
loop	Boolean	否	是否可循环预览，默认值为 false	App
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册	App 1.9.5+
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

7.条件编译

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

写法：在注释行中，以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码
#ifdef H5 \|\| MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有\|\|，不可能出现&&，因为没有交集）

8. 组件导航与数据传递

1.组件导航

<template>
    <view>
        <view>导航跳转的学习</view>
        //navigator标签跳转 
        //普通页面跳转
        <navigator url="/pages/detail/detail?id=80&age=19">跳转至详情页</navigator>
        //跳转tabBar页面，需设置open-type
        <navigator url="/pages/message/message" open-type="switchTab">跳转至信息页(tabBar页面)</navigator>
        //open-type设置redirect，会在跳转时销毁前一页（默认没有返回建）
        <navigator url="/pages/detail/detail" open-type="redirect">跳转至详情页</navigator>
        //编程式导航，button按钮跳转
        <button @click="goDetail">跳转之详情页</button>
        <button @click="goMessage">跳转至信息页</button>
        <button type="primary" @click="redirectDetail()">跳转到详情页并关闭当前页面</button>
        <button type="primary" @click="addToCar">加入购物车</button>
    </view>
</template>

<script>
    export default {
        //open-type设置redirect，会在跳转时触发onUnload()
        onUnload() {
            console.log('导航页面卸载了')
        },
        
        methods: {
            goDetail () {
                uni.navigateTo({
                    url: '/pages/detail/detail?id=80&age=19'
                })
            },
            goMessage () {
                //跳转至tabBar页面，并关闭非tabBar页面
                uni.switchTab({
                    url: '/pages/message/message'
                })
            },
            redirectDetail () {
                //关闭当前页面，并跳转至新页面
                uni.redirectTo({
                    url: '/pages/detail/detail'
                });
            }
            
        }
    }
</script>

<style>
</style>

2.数据传递

2.1 父>子

props

2.2 子>父

un.$emit(eventName,OBJECT)

触发全局的自定义事件，附加参数都会传给监听器回调函数。

属性	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

//1.在b子组件中写好触发事件
addToCar () {
                //调用uni.$emit，传递名为updateCart的事件，包含id： 10,name: '贸易'
                uni.$emit('updateCart',{
                    id: 10,
                    name: '贸易'
                })
            }
//2.在B父组件的b子组件标签中，绑定事件
<b @updateCart="getDate"></b>

//3.接收存入数据
getDate(date){
    this.data=date
}

2.3 兄弟

uni.$on(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

//兄组件中定义upDate事件
created(){
    uin.$on('upDate',minId=>{
        this.maxId=minId
    })
}
//弟组件触发upDate事件，并传递数据
updateId(id){
    ui.$emit('upDate',{
        minId:id
    })
}