uni-app基础使用和知识点（笔记）

目录

 

【uni-app基础】

【uni-app之nvue】

---

【uni-app基础】

一、事件绑定

1. @click ：点击
2. @langtap ：长按

 

二、事件传参

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

1.  e.target.id ：获取的对象包含冒泡，穿刺。
2.  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选中的下标， {{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. 图片

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

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

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

1. 上传、下载

1. uni.unloadFileRes : 上传图片.
2. 下载后，是临时路径需要利用文件保存API

1. 数据缓存

1. uni.setStorage: 异步存储，类似微信setData。
2. uni.setStorageSync:同步存储，小程序需要用try和catch包裹。
3. get获取，remove移除，传入的key。

1. 设备信息

1. uni.getSysteminfo: 获取设备的型号等设备信息。
2. uni.makePhoneCall({phoneNumber:’110’}) 拨打电话
3. uni.setClipboardData 剪切板。
4. uni.addPhoneContact 可以往手机添加联系人，没有获取。

1. 导航配置

1. uni.setNavigationBarTitle 设置顶部导航的标题。
2. uni.setNavigationBarColor 设置顶部标题栏颜色。

1. 下拉刷新

1. 需要在page.json中，style选项开启enablePullDownRefresh，封装加载数据函数。

page++，数据为空时，return false。

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

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

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

1. 上拉加载

1. onRachBottom :function(){} 监听滚动条到达底部。

1. 跨端兼容

1. 用注释语法，包裹不同的展示模块

小程序，#ifdef MP-WEIXIN   #endif

h5+ app，#ifdef APP-PLUS   #endif

1. 交互提示

1. uni.showLoading({}) 加载提示。uni.hideLoading()，关闭
2. uni.showModel({}) 弹出模态框，有确定取消的。
3. uni.showActionSheet（{}）底部弹出功能菜单。

• 登陆

1. 小程序

在manifest.json底部有小程序appid需要配置。

getuserinfo，微信获取用户数据。

1. app第三方

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

1. 判断登陆

global，全局变量。小程序。

• 分享

1. 微信，onShareAppMessage.支持小程序。
2. 第三方，uni.share.去各个开放平台申请。

• 引入iconfont图标

1. 把想用的图标添加至项目，下载到本地，记事本打开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：捕获子孙错误时调用。

1. 应用级生命周期、只可在APP.vue中

• onLaunch ：初始化完成，全局只触发一次。
• onShow：应用启动
• onHide：应用从后台进入前台

1. 页面级生命周期，类似小程序。

• onLoad：页面加载，参数为上个页面传递的。
• onShow：监听页面显示，dom不一定渲染
• onReady：初次渲染完成
• onHide：页面隐藏
• onUnload：页面卸载
• onpullDownRefresh：监听用户下拉动作
• onReachBottom：监听上拉触底
• onShareAppMessage:点击右上角分享
• onNavigationBarButtonTap:原生标题按钮点击
• onPageScroll:监听页面滚动，单位px。

十一、样式

1. 字体大小，2倍关系，想要15px的字体，应设置为30upx.
2. :class=”active:isActive,color:isColor”,用对象形式，控制显示的样式。
3. ：class=”[数组，数组]”各个样式。
4. 三元运算。
5. 全局的标题栏设置，在globalStyle中配置，单个在pages中配置

• 创建项目

1. 用HBuilderX创建项目

• 非npm创建的项目，想要引入第三方库vant。

当组件引入。

1. 用npm

npm install -g @vue/cli

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

 

 

 

 

【uni-app之nvue】

• 支持nvue编译配置

在manifest文件的app-plus加入

"usingComponents": true,//开启自定义编译模式

"renderer":"native",//weex编译

"nvueCompiler" : "uni-app",//开启混合渲染,支持nvue

在app-plus后面添加编译模式支持

/* 小程序特有相关 */

"mp-weixin": {

"appid": "wxf6ff290fc07fad30",

"setting": {

"urlCheck" : false,

"es6" : true

},

"usingComponents": true

},

• 样式差异

不支持嵌套css  !!!!!!!

1. 弹性盒。

nvue,默认为弹性盒模型。默认方向为column.

1. 只有text标签可以设置字体大小颜色。
2. 布局不能用百分比
3. 只能用class选择器
4. border和background不支持简写

 

 

 

• map配置

nvue只支持高德地图。

获取key

key名称：根据应用需求输入应用的名称，如“HBuilder.Android”；
安全码：SHA1：应用打包时使用证书的指纹字符串（SHA1），HBuilder默认打包使用的签名为"BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58"
Package：应用包名，在提交App云端打包时默认为“io.dcloud.%APPID%”（用户可自定义修改），如“io.dcloud.HBuilder”。
设置完成后点击“获取KEY”保存。