对uniapp学习的深入

如何注册事件和传递参数以及获取到事件对象

 

 利用v—on对于点击事件有一个反应 并且对与点击事件进行一个返回值  可以传递数字

uniapp的生命周期

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

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

应用的生命周期比如 onLaunch onShow onHide onError

onLaunch是初始化完成时触发全局只触发一次

onShow是启动或从后台进入前台显示

onHide是从前台进入后台

onError当报错时触发

页面的生命周期比如

onLoad 监听页面加载，其参数为上一个页面的数据传递 ，参数类型为object   

 onShow监听页面显示     onReady监听页面初次渲染完成  onHide监听页面隐藏

比如 onShow（）{

console.log（‘页面加载完成’，options）

}，

onPullDownRefresh 是用来监听用户下拉动作 通过下拉刷新可以进行数据的更新

在文件中调用enablePullDownRefresh进行刷新的使用     调用uni.stopPullDownRefresh（）进行一个刷新的停止  并且可以通过setTimepout进行时间的控制 单位（毫秒）

onReachBottom 页面滚动到底部的事件 常用于下拉下一页的的数据

发送get请求

uni.request 发送网络请求  在小程序中网络相关的API需要在使用前配置域名白名单 

<button>@click="get">发送get请求</button>

method：{

get（）{

uni.request（{

url1：xxxxxxxxxx          （url是统一资源定位器）

}

）

}

}

数据缓存（将数据保存在本地中）

uni.setStorage  将数据存储在本地缓存的key中，会覆盖掉该key的原来内容，这是一个异步接口

uni.removeStorage（OBJECT类） 从本地缓存中异步移除指定的key

complete接口调用结束的回调函数（调用失败成功都会执行）

图片的上传和浏览

uni.chooseImage（OBJECT）

从本 地相册选择图片或使用相机拍照

count表示最多可以选择的图片数目

sizeType 有original原图 compressed压缩图 默认的是两者都有

sourceType  album从相册选图，camera使用相机 默认二者都有

success  fail  complete

loop类型是Boolean 默认值为false 是否可循环浏览   urls需要浏览的图片链接列表 

indicator 类型是一个string 图片指示器样式，可以取值default 底部圆点指示器 

number 顶部数字指示器 none不显示指示器  

longPressActions   类型是Object 长按图片显示操纵菜单 不填默认为保存相册

条件编译跨段兼容

uniapp已经将常用的组件，JSAPI封装到框架中 ，开发者按照uniapp规范开发可保证多平台兼容，大部分业务可以直接满足，但是也会存在一些无法跨平台的情况比如：

大量的if else  会造成代码执行性能低下和管理混乱

编译到不同的工程后二次修改，会让后续升级变的很麻烦

利用 #ifdef 和 #endif 进行一个条件编译  满足条件就在哪个程序框架里面运行

#ifdef H5             #ifdef MP-WEIXIN  表示在哪个环境下运行

两种方式导航跳转和传参

navigetor组件 进行页面链接（跳转）

 open—type=”switchTab”   因为信息页是tabbar页面，所有的tab bar（标签栏）页面都要用switchtab才可以跳转

redirect 对应uni.redirectTo的功能 把当前页面进行一个关闭 不能返回上一个页面

组件的创建使用和组件的生命周期函数

组件就是一个页面里的内容被另一个页面调用

组件的生命周期函数  

created 在实例完成后被立即调用

beforeCreate 在实例初始化后被调用

beforeMount  挂载到实例上去之后调用 

beforeUpdate 数据更新时调用

beforeDestroy 实例销毁之前调用 在这一步仍然完全可用

destroyed    Vue实例销毁之后调用 调用后，Vue 实例指示的所有东西都会解绑定 所有的事件监听器会被移除，所有的子实例也会被销毁

组件的通讯

<view class="content">   

<test v-if="">        </test>

</view>     如果为ture 那么就显示出来  如果为false 那么就不会显示