uni-app基础知识

一、事件绑定

@click ：点击
@langtap ：长按
 

二、事件传参

不支持自定义事件，建议id传参。

 e.target.id ：获取的对象包含冒泡，穿刺。
 e.currentTarget.id： 获取的是目标对象，更加准确。
 

三、组件

1.  scroll-view ：滚动组件，内部view，可设置横向或者纵向滚动，用弹性盒布局，内部view约束在一行，可实现横向滚动导航。

2.  swiper ：滑块，内部swiper-item，用来做轮播图。里面放图或者文字。

3.  text ：只有这里的才可以复制，其他的节点不允许。

4.  button： @getuserinfo，uni.getUserinfo小程序获取用户信息。原生open-type=”getUserInfo”

5.  checkbox-group : 复选框父组件，绑定@change事件，可收集label下的checkbox选中的value值，detail中。

6.  input ： 注意小程序和app的不同。

7.  picker : 底部弹窗，日期省份选择，@change事件的e.detail.value选中的下标， {undefined{data[index]}}

8.  from : 表单组件，可以获取表单内部所有表单控件的键值对，name为键名。 @submit.

四、导航跳转

1. 组件navigator，open-type控制跳转方式。声明式跳转。用url链接相对跳转。

2.  uni.navitateTo 原页面不销毁。里面对象形式的{url:”地址”}

3. uni.redirectTo 重定向跳转，原页面销毁，更新数据时。

4. nui.navitateBack 返回原页面。{delta:1},返回上级一层。

5.  hash,history  在manifest.json中配置。

五、传参

1. 页面跳转传参

:url=”’地址？name=’+test&age=18” onLoad:function(options){获取传参，动态的话，用拼接。

2.组件传参

模拟事件传参。

子组件，在方法中用this.$emit(名字，参数)来传递

父组件，绑定：名字=”方法”，方法可以接受到参数。

六、接口

封装request请求。

图片
1. uni.chooseImage({})：选择图片，可以得到临时地址。res.tempFilePathsx

2. uni.previewImage({})：预览图片

3. uni.getImageInfo({})：得到地址后，用来图片信息，宽高路径类型方向。

上传、下载
uni.unloadFileRes : 上传图片.
下载后，是临时路径需要利用文件保存API
数据缓存
uni.setStorage: 异步存储，类似微信setData。
uni.setStorageSync:同步存储，小程序需要用try和catch包裹。
get获取，remove移除，传入的key。
设备信息
uni.getSysteminfo: 获取设备的型号等设备信息。
uni.makePhoneCall({phoneNumber:’110’}) 拨打电话
uni.setClipboardData 剪切板。
uni.addPhoneContact 可以往手机添加联系人，没有获取。
导航配置
uni.setNavigationBarTitle 设置顶部导航的标题。
uni.setNavigationBarColor 设置顶部标题栏颜色。
下拉刷新
需要在page.json中，style选项开启enablePullDownRefresh，封装加载数据函数。
page++，数据为空时，return false。

uni.stopPullDownRefresh（）可以停止下拉刷新

uni.startPullDownRefresh() 调用触发下拉刷新动画。跟手动下拉一致。

onpulldownrefresh() 页面监听用户下拉动作。小程序

上拉加载
onRachBottom :function(){} 监听滚动条到达底部。
跨端兼容
用注释语法，包裹不同的展示模块
小程序，#ifdef MP-WEIXIN   #endif

h5+ app，#ifdef APP-PLUS   #endif

交互提示
uni.showLoading({}) 加载提示。uni.hideLoading()，关闭
uni.showModel({}) 弹出模态框，有确定取消的。
uni.showActionSheet（{}）底部弹出功能菜单。
登陆
小程序
在manifest.json底部有小程序appid需要配置。

getuserinfo，微信获取用户数据。

app第三方
SDK里面设置。微信第三方开放平台。

判断登陆
global，全局变量。小程序。

分享
微信，onShareAppMessage.支持小程序。
第三方，uni.share.去各个开放平台申请。
引入iconfont图标
把想用的图标添加至项目，下载到本地，记事本打开iconfont.css复制粘贴到公共样式。标签放相应类名就可以了。
 

十、生命周期

1. vue的生命周期,都可以使用

初始化阶段

beforeCreate：实例初始化后，啥都没有$route对象存在，可根据路由信息重定向操作。监视观测之前。
created：实例创建完成之后。数据观测，属性算法回调完成。挂载还没开始$el，this.data和methods可用。开始在内存中绘制虚拟DOM
beforeMount：挂载dom开始之前。render执行中有$el，但为空，无法操作DOM。
mounted：挂载之后调用。元素渲染完成，创建vm. el，依赖DOM的代码放这。
更新显示阶段

beforeUpdate：$vm.data更新后，虚拟DOM重新渲染之前调用，可以修改$vm.data，不会触发附加的重渲染过程。
updated：虚拟DOM重新渲染之后。组件和data更新，可以操作DOM，但不能修改data，不然死循环。
activated： keep-alive激活时被调用。
deactivated：keep-alive停用时调用。
死亡销毁阶段

beforeDestroy：实例销毁之前。还是可以用的，哈哈。
destroyed：实例销毁之后。绑定解除，监听移除，子实例销毁。
错误捕获

errorCaptured：捕获子孙错误时调用。
应用级生命周期、只可在APP.vue中
onLaunch ：初始化完成，全局只触发一次。
onShow：应用启动
onHide：应用从后台进入前台
页面级生命周期，类似小程序。
onLoad：页面加载，参数为上个页面传递的。
onShow：监听页面显示，dom不一定渲染
onReady：初次渲染完成
onHide：页面隐藏
onUnload：页面卸载
onpullDownRefresh：监听用户下拉动作
onReachBottom：监听上拉触底
onShareAppMessage:点击右上角分享
onNavigationBarButtonTap:原生标题按钮点击
onPageScroll:监听页面滚动，单位px。
十一、样式

字体大小，2倍关系，想要15px的字体，应设置为30upx.
:class=”active:isActive,color:isColor”,用对象形式，控制显示的样式。
：class=”[数组，数组]”各个样式。
三元运算。
全局的标题栏设置，在globalStyle中配置，单个在pages中配置
创建项目
用HBuilderX创建项目
非npm创建的项目，想要引入第三方库vant。
当组件引入。

用npm
npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue 名字