uni-app中的数据绑定

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

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

插值表达式的使用

使用插值表达式渲染基本数据
```
<view>{{msg}}}</view>
```

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

<view>{{flag ? '真的':'假的'}}</view>

基本运算
```
<view>{{1+1}}</view>
```

v-bind 动态绑定属性

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

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

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成

<image :src="img"></image>

v-for的使用

在data中定义一个数组最终将数组渲染到页面上

export default {data() {return {list:[{id:1,name:"张三",age:18},{id:2,name:"李四",age:30},{id:3,name:"王五",age:19},{id:4,name:"赵柳",age:50}]}}
}

页面进行绑定渲染

<view><view v-for="(item,index) in list" :key="item.id">序号:{{index}}   我是{{item.name}} 年龄:{{item.age}}</view>
</view>

渲染结果如下:

uni-app中事件

事件绑定

在uni-app中事件绑定和vue中是一样的通过v-on进行事件的绑定也可以简写为@

<button @click='tapHandle'>点我啊</button>

事件函数定义在methods中

methods:{tapHandle(){console.log("真的点我了");}
}

事件传参

默认如果没有传递参数事件函数第一个形参为事件对象

//template
<button @click="tapHandle">点我啊</button>
//script
methods:{tapHandle(e){console.log("真的点我了");}
}

如果给事件函数传递参数了则对应的事件函数形参接收的则是传递过来的数据

//template
<button type="primary" @click="handClick(20)">按钮一</button>
//js
methods:{handClick(num){console.log(num);}
}

如果即需要传参数有需要事件对象可以如下写法

//template
<view class="uni-padding-wrap uni-common-mt"><button type="primary" @click="clickHand(20,$event)">按钮二</button>
</view>
//js
methods:{clickHand(num,e){console.log(num,e);}
}

uni-app的生命周期

应用生命周期

生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期

生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发这些函数被成为生命周期函数

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

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

页面的生命周期

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

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、字节小程序、快手小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序	2.8.1

详细的生命周期文档请浏览官方文档

uni-app中的下拉刷新

开启下拉刷新

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

需要在page.json里找到当前页面的pages节点并在style选项中开启enablePullDownRefresh
通过调用uni.startPullDownRefresh方法来开启下拉刷新

代码演示

<template><view>这是列表页面<view :key="index" v-for="(item,index) in list">{{item}}</view><button @click="startUpDown">开启下拉刷新</button></view>
</template><script>export default {data() {return {list:["Java","php","mysql","linux","docker"]}},onPullDownRefresh(){setTimeout(()=>{this.list.push("c#");//停止下拉刷新uni.stopPullDownRefresh()},1000);},methods: {startUpDown:()=>{uni.startPullDownRefresh();}}}</script><style></style>

uni-app中的上拉加载

上拉加载需要注意的事项

可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
在页面中执行上拉加载数据的方法是onReachBottom方法与下拉刷新方法处于同级

代码演示

<template><view>这是列表页面<view class="box-bottom" :key="index" v-for="(item,index) in list">{{item}}</view><button @click="startUpDown">开启下拉刷新</button></view>
</template><script>export default {data() {return {list:["Java","php","mysql","linux","docker"]}},onPullDownRefresh(){setTimeout(()=>{this.list.push("c#");//停止下拉刷新uni.stopPullDownRefresh()},1000);},onReachBottom(){console.log("触发上拉加载事件")//es6的新语法 传播操作符setTimeout(()=>{this.list = [...this.list,...["Java","php","mysql","linux"]];},2000)},methods: {startUpDown:()=>{uni.startPullDownRefresh();}}}
</script>

详细的上拉加载参数以及说明可以查看官方文档的解释

uni-app中的网络请求

在uniapp中可以调用uni.request方法进行请求网络

需要注意的是:在小程序中网络相关的API在使用前需要配置域名白名单

详细参数配置文档请参考官方文档

发送get请求


<template><view><button type="primary" @click="getData()">发送get请求</button></view>
</template><script>export default {data() {return {}},methods: {getData(){//这里默认method就是get请求 所以这里就没有写methoduni.request({url:"http://localhost:8001/address",success:(res)=>{console.log(res)}})}}}
</script><style></style>

uni-app中的数据缓存

官方文档

uni.setStorage

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

代码演示

<template><view><button type="primary" @click="setStorage">存储数据</button></view>
</template><script>export default {data() {return {}},methods: {setStorage(){uni.setStorage({key:"id",data:19,success: () => {console.log("存储成功")}})}}}
</script>

uni.setStorageSync

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

代码演示

<template><view><button type="primary" @click="setStorage">存储数据</button></view>
</template><script>export default {data() {return {}},methods: {setStorage(){uni.setStorageSync("id",20);}}}
</script>

uni.getStorage

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

代码演示

<template><view><button @click="getStorage">获取数据</button></view>
</template><script>export default {data() {return {}},methods: {getStorage(){uni.getStorage({key:"id",success: (res) => {console.log(res);}})}}}
</script>

uni.getStorageSync

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

<template><view><button @click="getStorage">获取数据</button></view>
</template><script>export default {data() {return {}},methods: {getStorage(){console.log(uni.getStorageSync("id"));}}}
</script><style></style>

uni.removeStorage

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

<template><view><button type="primary" @click="removeStorage">删除数据</button></view>
</template><script>export default {data() {return {}},methods: {removeStorage(){uni.removeStorage({key:"id"})}}}
</script><style></style>

removeStorageSync

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

<template><view><button type="primary" @click="removeStorage">删除数据</button></view>
</template><script>export default {methods: {removeStorage(){uni.removeStorageSync("id");}}}
</script>

uni-app上传图片以及预览图片简单示例

uni-app中图片上传以及预览的参数请参考官方文档

uni.chooseImage 上传图片的方法
uni.previewImage 预览图片的方法

<template><view><button type="primary" @click="upload">上传图片</button><image v-for="(item,index) in imgArr" @click="show(item)" :src="item" :key="index"></image></view>
</template><script>export default {data() {return {imgArr:[]}},methods: {upload(){uni.chooseImage({count:9, //最多可以选择几张 在web中 没有限制 最多只能选择9张success:res=>{//res是选择图片返回的数据//res.tempFilePaths 是图片中所有的本地路径this.imgArr = res.tempFilePaths;}})},show(current){uni.previewImage({//current 当前图片的路径current,//是否开启循环查看 app才有效loop:true,//指示器 app才有效indicator:"default",//所有的图片路径urls:this.imgArr})}}}
</script><style></style>

uniapp中的导航跳转

利用navigator进行跳转

navigator详细文档:文档地址

跳转到普通页面

<navigator url="跳转路径" hover-class="navigator-hover"><button type="default">跳转到普通页面</button>
</navigator>

跳转到tabbar页面

<navigator url="跳转路径" open-type="switchTab" hover-class="other-navigator-hover"><button type="default">跳转tab页面</button>
</navigator>

在当前页面中打开

<navigator url="跳转路径" open-type="redirect" hover-class="other-navigator-hover"><button type="default">在当前页打开</button>
</navigator>

利用编程式导航进行跳转

导航跳转文档

利用navigateTo进行导航跳转

保留当前页面跳转到应用内的某个页面使用uni-navigateBack可以返回到原页面

<button type="primary" @click=“goAbout”>跳转页面
</button>

通过navigateTo方法进行跳转到普通页面

goAbout(){uni.navigateTo({url:"路径"})
}

通过switchTab跳转到tabbar页面

<button type="primary" @click=“goAbout”>跳转tabbar页面
</button>

通过switchTab方法进行跳转

goAbout(){uni.switchTab({url:"路径"})
}

导航跳转传递参数

在导航进行跳转到下一个页面的同时可以给下一个页面传递相应的参数接受参数的页面可以通过onLoad生命周期进行接收

goAbout(){uni.navigateTo({//传递参数url:"路径?key=value"})
}

接收参数的页面

export default{//通过uni-app中的生命周期函数来获取上一个页面传入过来的参数onLoad(options){console.log(options)}
}
# uni-app中组件的创建在uni-app中,可以通过创建一个后缀名为vue的文件 即创建一个组件成功，其他组件可以将该组件通过import的方式导入 在通过components进行注册即可- 创建test组件 在component新建test.vue文件```vue<template><view>这是一个test组件</view></template><script>export default {data() {return {};}}</script><style></style>

在需要引入组件的页面中的script脚本部分中import 导入以及在export 中引入组件学过vue都知道写法一样的
```
import test from "../../components/test.vue"
export default {components:{test},
}
```

在template中进行引入即可显示

<template><view><test></test></view>
</template>

组件的生命周期

组件的生命周期同vue组件的生命周期详见文档

注意组件的更新前和更新后的钩子函数只在h5页面有效

uni-app中组件通讯

父组件给子组件传值

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

子组件

<template><view>父组件给子组件传的值{{msg}}</view>
</template><script>export default {props:["msg"]}
</script>

父组件

<template><view><test :msg="msg" ></test></view>
</template><script>export default {components:{test,}data:{return(){msg:"你好"}}}
</script>

子组件给父组件传值

子组件

<template><view><button type="primary" @click="fuQinNum"> 给父亲传值</button></view>
</template><script>export default {data() {return {num:4};},methods:{fuQinNum(){this.$emit("emitEvt",this.num)}}}
</script>

父组件接受值

<template><view><test @emitEvt="getNum"></test><text>这个是儿子传过来的值{{num}}</text></view>
</template><script>import test from "../../components/test.vue"export default {components:{test,A,B},data() {return {num:0,}},methods: {getNum(num){this.num = num;}}}
</script>

兄弟组件之间传值

A组件

<template><view>这是a组件<button @click="updateNum">修改b组件中num的值</button></view>
</template><script>export default {methods:{updateNum(){uni.$emit("sumNum",10);}}}
</script><style></style>

B组件

<template><view>这是b组件的值{{num}}</view>
</template><script>export default {data() {return {num:0};},created(){uni.$on("sumNum",num=>{this.num = this.num + num;})}}
</script>

父组件

<template><view><A></A><B></B></view>
</template><script>import A from "../../components/A.vue"import B from "../../components/B.vue"export default {components:{A,B}}
</script>

uni-app中的uni-ui

官方文档

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui不包括基础组件，它是基础组件的补充

uni-ui产品的特点

高性能
- 自动差量更新数据
  
  虽然uni-app支持小程序自定义组件，所有小程序的ui库都可以用。但小程序自定义组件的ui库都需要使用setData手动更新数据，在大数据量时、或高频更新数据时，很容易产生性能问题。
  
  而uni ui属于vue组件，uni-app引擎底层自动diff更新数据。当然其实插件市场里众多vue组件都具备这个特点。
- 优化逻辑层和视图层通讯折损
  
  非H5，不管是小程序还是App，不管是app的webview渲染还是原生渲染，全都是逻辑层和视图层分离的。这里就有一个逻辑层和视图层通讯的折损问题。比如在视图层拖动一个可跟手的组件，由于通讯的损耗，用js监听很难做到实时跟手。
  
  这时就需要使用css动画以及平台底层提供的wxs、bindingx等技术。不过这些技术都比较复杂，所以uni ui里做了封装，在需要跟手式操作的ui组件，比如swiperaction列表项左滑菜单，就在底层使用了这些技术，实现了高性能的交互体验
- 背景停止
  
  很多ui组件是会一直动的，比如轮播图、跑马灯。即便这个窗体被新窗体挡住，它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上，背景操作ui会引发很严重的性能问题，造成前台界面明显卡顿。
  
  而uni ui的组件，会自动判断自己的显示状态，在组件不再可见时，不会再消耗硬件资源。
全端
- uni ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。
  
  比如导航栏navbar组件，会自动处理不同端的状态栏；比如swiperaction组件，在app和微信小程序上会使用交互体验更好的wxs技术，但在不支持wxs的其他小程序端会使用js模拟类似效果。
  
  uni ui还支持nvue原生渲染。
  
  uni ui还支持pc等宽屏设备，可以通过PC浏览器访问https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge体验
风格扩展
- uni ui的默认风格是中型的，与uni-app基础组件风格一致。但它支持uni.scss，可以方便的扩展和切换应用的风格。
  
  ui是一种需求非常发散的产品，DCloud官方也无意用uni ui压制第三方ui插件的空间，但官方有义务在性能和跨端方面提供一个开源的标杆给大家。
  
  我们欢迎更多优秀的ui组件出现，也欢迎更多人贡献uni ui的主题风格，满足更多用户的需求。
与uniCloud协作
- uni ui里很多组件与uniCloud打通，可大幅提升开发效率
与uni统计自动集成实现免打点
- uni统计是优秀的多端统计平台，见tongji.dcloud.net.cn。
  
  除了一张报表看全端，它的另一个重要特点是免打点。比如使用uni ui的navbar标题栏、收藏、购物车等组件，均可实现自动打点，统计页面标题等各种行为数据。当然你也可以关闭uni统计，这不是强制的。
uni ui符合全套DCloud组件规范
- 包括easycom、uni_module、datacom，全部遵循。

uni ui的使用请看官方文档这里不介绍啦

uni-app学习笔记(完)相关推荐

HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
得到app文稿导出_得到app学习笔记作为知识付费者，如何把所学内容快速输出？...
原标题:得到app学习笔记作为知识付费者,如何把所学内容快速输出? 零.引子昨天看到老公票圈更新了一条段子: 我就是那个伪勤奋者,在知识焦虑的胁迫下,这些年买了不知多少视频.微课.教程还有得到专栏. ...
Flutter高级进阶实战仿哔哩哔哩APP学习笔记
Flutter高级进阶实战仿哔哩哔哩APP学习笔记近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...
go语言基础学习笔记完整版
目录背景基础 helloworld 变量常量数据类型基本数据类型与复杂数据类型值类型与引用类型查看变量类型字符与字符串类型转换指针打包读取控制台数据 for-range遍历生 ...
鸿蒙app学习笔记一
前言鸿蒙app开发基础知识鸿蒙应用程序 HAP entry feature pack.info 库文件资源文件配置文件(config.json) HAR Node.js NPM 关于DevEc ...
【跨端应用】—— uniapp黑马商城App学习笔记（二）
一.设置微信小程序调试 HBuilderX点击[工具] --[设置]--[运行配置],找到[微信web开发者工具]安装所在的文件夹. 复制路径,填写到[小程序运行配置]-- [微信开发者工具路径] 先 ...
Opencv学习笔记完整版
opencv下载 https://www.raoyunsoft.com/wordpress/index.php/2020/03/09/opencvdownload/ opencv下载 https:// ...
Windows 8 Metro App学习笔记(九)—磁砖
瓷砖,即桌面显示的Tile,它的创建和生命周期都可以由用户自由创建并可以直接访问一个应用程序,还可以为信息的及时推送带来很多的方便.在Windows 8中,由SecondaryTile对象负责. 首先 ...
apcloud混合式开发app学习笔记
修改图标新建项目检出到本地 -------------------------- 1.api.ajax var loginName = $api.val($api.byId('uname')); ...

uni-app学习笔记(完)

uni-app中的数据绑定

v-bind 动态绑定属性

v-for的使用

uni-app中事件

uni-app的生命周期

uni-app中的下拉刷新

uni-app中的上拉加载

uni-app中的网络请求

uni-app中的数据缓存

uni.setStorage

uni.setStorageSync

uni.getStorage

uni.getStorageSync

uni.removeStorage

removeStorageSync

uni-app上传图片以及预览图片简单示例

uniapp中的导航跳转

组件的生命周期

uni-app中组件通讯

uni-app中的uni-ui

uni-ui产品的特点

uni-app学习笔记(完)相关推荐

最新文章

热门文章