uni-app基础知识(一) 持续更新

uni-app基础知识

一、uni-app介绍

1.1 什么是uin-app

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

1.2 为什么要选择uni-app

uni-app拥有其强大的优势。

1、更高的百度指数，跨端完善度更高，真正落地的提高生产力

2、平台能力不受限

在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。

支持原生代码混写和原生sdk集成。

3、性能体验优秀

体验更好的Hybrid框架，加载新页面速度更快。

App端支持weex原生渲染，可支撑更流畅的用户体验。

小程序端的性能优于市场其他框架。

4、周边生态丰富

丰富的插件市场，各种轮子拿来即用。

支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件。

微信生态的各种sdk可直接用于跨平台App。

5、学习成本低

基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本

6、开发成本低

不止开发成本，招聘、管理、测试各方面成本都大幅下降。

HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。

1.3 功能框架

从下面官方给的uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

1.4 目录及文件

├─ components ··················· uni-app组件目录
   └──comp-a.vue  ··················· 可复用的a组件
├── pages ·······················  业务页面文件存放目录
    ├─ index ······················ 使用到的字体文件
        └── index.vue ····················· index页面
    ├─ list ······················· 使用到的图片文件
        └── list.vue ····················· list页面
├─ static ··· 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─ main.js ······················· Vue初始化入口文件
├─ App.vue ··· 应用配置，用来配置App全局样式以及监听 
├─ manifest.json ················ 配置应用名称、appid、logo、版本等打包信息
└─ pages.json················· 配置页面路由、导航条、选项卡等页面类信息

二、uni-app应用生命周期及页面生命周期

2.1 应用生命周期

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

2.2 页面生命周期

onLoad	监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),示例中可参考
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角分享 微信小程序
onPageScroll	监听页面滚动
onTabItemTap	当前是tab页时,点击tab触发
onShareAppMessage	用户点击右上角分享（微信小程序支持）

注意

• 先触发 uni-app onReady ，后触发 vue 的 mounted
• 建议使用uni-app的onLoad 代替 vue的 created

官方生命周期

三、组件之间的三种通信方式

3.1 三种方式

组件间传值包括下面三种情况：

• 父组件给子组件传值
• 子组件给父组件传值
• 兄弟组件通讯

3.2父组件给子组件传值

子组件通过props接收外界传递到组件内部的值

// 父 index.vue   通过属性绑定进行传递  v-bind:简写为:
<test  :title="title" ></test>
data() {
        return {
            title:'Hello',
        }
    },

// 子组件 test.vue   通过props接收
<template>
    <view>这是父组件传递过来的数据{{title}} </view>
</template>

    export default {
        props:['title'],//接收
    }

3.3 子组件向父组件传值

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

// 子组件 test.vue  传值num
<template>
    <view>
        子组件点击按钮触发给父组件传值
        <button @click="sendNum">给父组件传值</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                num:'3',
            };
        },
        props:['title'],//接收
        methods:{
            sendNum(){this.$emit('myEven',this.num) //给父组件传值
        },
    }
</script>    

// index.vue  父组件接收num 
<view class="content">
    <test  :title="title" @myEven= 'getNum'></test>{{num}}
</view>
export default {
       data() {
            return {
                num:0 //默认0
            }
        },
        methods: {
        getNum(num){
            console.log(num)
    　　　　　this.num = num
        }
    },
}    

3.4 兄弟组件之间的通讯

a.创建组件a，b，引入index.vue, components注册

// index .vue  页面展示组件内容
<script>
    import test from '../../components/test.vue'
    import testA from '@/components/a.vue'
    import testB from '@/components/b.vue'
    export default {
        components:{
            test,
            "test-a":testA,
            "test-b":testB,
        },
    }
</script>
<template>
    <view class="content">
        <test-a></test-a>
        <test-b></test-b>
    </view>
</template>

b.通过uni.$on注册一个全局监听事件，通过uni.$emit触发全局监听事件

//a组件 a.vue
<template>
    <view><button @click="addNum">修改b组件数据</button></view>
</template>

<script>
    export default {
        methods:{
            addNum(){
                uni.$emit('changeNum',10) //触发全局变量自定义事件changeNum，该函数为b组件内修改b组件内容的方法  　　　　　　　　} 　　　　　　} 　　} </script>

//b组件 b.vue  a组件更改该组件内容
<template>
    <view>
        数据{{num}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num:0,
            };
        },
        created(){ //创建全局监听自定义事件  改变内容
            uni.$on('changeNum',num=>{
                this.num+=num
            })
        },
    }
</script>

注意：

uni.$emit(eventName,OBJECT) 触发全局的自定事件。

[uni.$on(eventName,callback)](https://uniapp.dcloud.io/collocation/frame/communication?id=on)监听全局的自定义事件。事件可以由uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

[uni.$off(eventName, callback]) 移除全局自定义事件监听器

四、图片上传

4.1 图片上传API接口 —uni.chooselmage(OBJECT)

简单的图片上传

	<!-- 点击上传图片 -->
		<button type="primary" @click="addImage">上传图片</button>
		<!-- 图片上传后显示 -->
		<image v-for="item in image" :src="item" mode="" @click="aaa(item)"></image>

	addImage() {
				uni.chooseImage({
					count: 5, //上传数量限制
					success: res => { //上传成功后执行回调函数
						this.image = res.tempFilePaths
					}
				})
			}

五、页面数据遍历 v-for

<view class="list" v-for="item in list">
			{{item}}
		</view>

data() {
			return {
				list: ['华为', '小米', 'vivo', 'oppo'],
				image: {}
			}
		},

uccess: res => { //上传成功后执行回调函数
this.image = res.tempFilePaths
}
})
}

### 五、页面数据遍历 v-for

```vue
<view class="list" v-for="item in list">
			{{item}}
		</view>

data() {
			return {
				list: ['华为', '小米', 'vivo', 'oppo'],
				image: {}
			}
		},