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. o n 注册一个全局监听事件，通过 u n i . on注册一个全局监听事件，通过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. o n ( e v e n t N a m e , c a l l b a c k ) ] ( h t t p s : / / u n i a p p . d c l o u d . i o / c o l l o c a t i o n / f r a m e / c o m m u n i c a t i o n ? i d = o n ) 监听全局的自定义事件。事件可以由 u n i . on(eventName,callback)](https://uniapp.dcloud.io/collocation/frame/communication?id=on) 监听全局的自定义事件。事件可以由 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: {}}},