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

偏执的太偏执、 2023-03-12 16:25 359阅读 0赞

**目录**

【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选中][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”保存。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70][]

[change_e.detail.value]: mailto:%E5%BA%95%E9%83%A8%E5%BC%B9%E7%AA%97%EF%BC%8C%E6%97%A5%E6%9C%9F%E7%9C%81%E4%BB%BD%E9%80%89%E6%8B%A9%EF%BC%8C@change%E4%BA%8B%E4%BB%B6%E7%9A%84e.detail.value%E9%80%89%E4%B8%AD
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]: /images/20230312/2081fc38b2ac42b4b7ffeffaae3da4fc.png