uni-app中的数据绑定

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

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

插值表达式的使用

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

  {{msg}}}

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

  {{flag ? '真的':'假的'}}

• 基本运算

  {{1+1}}

v-bind 动态绑定属性

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

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

利用v-bind进行渲染

还可以缩写成

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  }     ] }    }}

页面进行绑定渲染

     序号:{{index}}我是{{item.name}} 年龄:{{item.age}}    

渲染结果如下:

uni-app中事件

事件绑定

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

点我啊

事件函数定义在methods中

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

事件传参

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

  //template点我啊//scriptmethods:{tapHandle(e){ console.log("真的点我了");    }}

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

  //template按钮一//jsmethods:{    handClick(num){    console.log(num);    }}

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

  //template按钮二//jsmethods:{    clickHand(num,e){    console.log(num,e);    }}

uni-app的生命周期

应用生命周期

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

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

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

页面的生命周期

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

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

uni-app中的下拉刷新

开启下拉刷新

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

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

代码演示

这是列表页面{{item}}开启下拉刷新export default {data() {return {list:["Java","php","mysql","linux","docker"]}},onPullDownRefresh(){setTimeout(()=>{this.list.push("c#");//停止下拉刷新uni.stopPullDownRefresh()},1000);},methods: {startUpDown:()=>{uni.startPullDownRefresh();}}}

uni-app中的上拉加载

上拉加载需要注意的事项

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

代码演示

这是列表页面{{item}}开启下拉刷新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();}}}

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

uni-app中的网络请求

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

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

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

发送get请求

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

uni-app中的数据缓存

官方文档

uni.setStorage

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

代码演示

存储数据export default {data() {return {}},methods: {setStorage(){uni.setStorage({key:"id",data:19,success: () => {console.log("存储成功")}})}}}

uni.setStorageSync

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

代码演示

存储数据export default {data() {return {}},methods: {setStorage(){uni.setStorageSync("id",20);}}}

uni.getStorage

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

代码演示

获取数据export default {data() {return {}},methods: {getStorage(){uni.getStorage({key:"id",success: (res) => {console.log(res);}})}}}

uni.getStorageSync

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

     获取数据    export default {data() {return {}},methods: {getStorage(){console.log(uni.getStorageSync("id"));}}}

uni.removeStorage

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

删除数据export default {data() {return {}},methods: {removeStorage(){uni.removeStorage({key:"id"})}}}

removeStorageSync

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

删除数据export default {methods: {removeStorage(){uni.removeStorageSync("id");}}}

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

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

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

上传图片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})}}}

uniapp中的导航跳转

利用navigator进行跳转

navigator详细文档:文档地址

跳转到普通页面

    跳转到普通页面

跳转到tabbar页面

    跳转tab页面

在当前页面中打开

    在当前页打开

利用编程式导航进行跳转

导航跳转文档

利用navigateTo进行导航跳转

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

跳转页面

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

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

通过switchTab跳转到tabbar页面

跳转tabbar页面

通过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中进行引入 即可显示

组件的生命周期

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

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

uni-app中组件通讯

父组件给子组件传值

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

• 子组件

  父组件给子组件传的值{{msg}}export default {props:["msg"]}

• 父组件

  export default {components:{test,}    data:{return(){msg:"你好"     }    }}

子组件给父组件传值

• 子组件

   给父亲传值export default {data() {return {num:4};},methods:{fuQinNum(){this.$emit("emitEvt",this.num)}}}

• 父组件接受值

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

兄弟组件之间传值

• A组件

  这是a组件修改b组件中num的值export default {methods:{updateNum(){uni.$emit("sumNum",10);}}}

• B组件

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

• 父组件

  import A from "../../components/A.vue"import B from "../../components/B.vue"export default {components:{A,B}}

uni-app中的uni-ui

官方文档

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

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

uni-ui产品的特点

1. 高性能

   • 自动差量更新数据

     虽然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的组件，会自动判断自己的显示状态，在组件不再可见时，不会再消耗硬件资源。

2. 全端

   • 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体验

3. 风格扩展

   • uni ui的默认风格是中型的，与uni-app基础组件风格一致。但它支持uni.scss，可以方便的扩展和切换应用的风格。

     ui是一种需求非常发散的产品，DCloud官方也无意用uni ui压制第三方ui插件的空间，但官方有义务在性能和跨端方面提供一个开源的标杆给大家。

     我们欢迎更多优秀的ui组件出现，也欢迎更多人贡献uni ui的主题风格，满足更多用户的需求。

4. 与uniCloud协作

   • uni ui里很多组件与uniCloud打通，可大幅提升开发效率

5. 与uni统计自动集成实现免打点

   • uni统计是优秀的多端统计平台，见tongji.dcloud.net.cn。

     除了一张报表看全端，它的另一个重要特点是免打点。 比如使用uni ui的navbar标题栏、收藏、购物车等组件，均可实现自动打点，统计页面标题等各种行为数据。 当然你也可以关闭uni统计，这不是强制的。

6. uni ui符合全套DCloud组件规范

   • 包括easycom、uni_module、datacom，全部遵循。

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