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

最新推荐文章于 2024-08-05 09:48:11 发布
最新推荐文章于 2024-08-05 09:48:11 发布
阅读量4.6k 收藏 36
点赞数 10
分类专栏： uni-app 文章标签： uni-app uni-app用法 uni-app总结 uni-app笔记 uni-app小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42690547/article/details/106016312
版权

目录

 

【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”保存。

 

 

itmonkey-cn
关注
专栏目录
Uni-app知识点汇总
bailantangpin的博客
04-16 1364
HBuilderX 提供了丰富的功能和工具，包括代码编辑器、调试器、项目管理器、插件系统等，支持多种语言和框架，如 HTML、CSS、JavaScript、Vue.js 等。Uni-App CLI 是 Uni-App 的命令行界面工具，提供了一系列命令和工具，用于创建、构建、调试和发布 Uni-App 项目。Uni-App 提供了丰富的组件库和模板，包括基础组件（如按钮、输入框、列表等）、业务组件（如轮播图、下拉刷新、滚动列表等）、第三方组件（如图表库、UI 库等）等。
uni-app基础知识点
qq_56045326的博客
06-06 4054
uni-app知识点详解
uni-app知识点整理
oschina_41673164的博客
05-06 3119
一. 单位 1.换算规则： 1 px = 2 rpx 1 px = 0.75 pt = 3 / 4 pt 1 pt = 1.33 px = 4 / 3 px = 8 / 3 rpx 1 em = 16 px 1 em = 12 pt 1px = 1pt * 图像分辨率/72 rpx是基于 当前屏幕宽度与750的比值 算出来的，属于动态的。会根据不同屏幕进行换算。所以做响应式比较好用。 pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。 px (pixel，像素)：像素px是
uni-app 从入门到精通，这篇超详细教程你绝对不能错过！
最新发布
hulianwangjike的博客
08-05 3033
持续每天分享好用的软件源码
uniapp 知识点 总结 （2023 持续更新....）
m0_47186697的博客
03-15 1228
小程序是一种不需要下载安装即可使用的应用，微信小程序又称为 原生小程序，是因为最先是由微信提出的，在之前App应用无论是开发还是推广方面，成本都居高不下，微信团队在微信上做了个入口，用户只需点击它，即可进入一个类似于“应用商城”的平台，并在此完成在一个APP里所要做的事情。而在这个平台中，大多数的程序都是基于H5相关技术进行开发的，“小程序”中的H5页面应用则尽可能地将这两项成本降低，改变互联网市场中的应用规则，用户既可基于成本较低的H5技术来开发应用，也可依附于微信的入口进行推广；
uniapp
不想起床
10-07 535
顶部导航 1: 外部100%， flex 2：scroll-view 部分 flex: 1 overflow： hidden 高度 padding 3: 右侧固定宽度 4: 伪元素 : 给top bottom 不用给height <view class="tab"> <scroll-view class="tab-scroll" scroll-x> <view class="tab-scroll__box"> <view v-for="(item,
uniapp scroll-view左侧菜单栏通过伪元素实现active选中效果
黎小小的博客
06-01 395
【代码】uniapp scroll-view左侧菜单栏active选中效果。
uni-app学习笔记和新闻资讯app项目总结
qq_46336617的博客
06-22 840
随着移动应用开发的快速发展，跨平台开发成为了许多开发者的追求。在我最近的学习中，我有幸接触到了Uni-app这个跨平台应用开发框架，它为我打开了一扇全新的大门。本文将分享我在学习Uni-app的过程中的笔记和项目心得体会。一、uni-app是什么？Uni-app是一个基于Vue.js框架的跨平台应用开发框架，它可以同时开发iOS、Android和Web应用。使用Uni-app，我们只需要编写一套代码，即可在不同平台上运行应用，大大提高了开发效率和降低了维护成本。
uni-app学习笔记
06-16
在"uni-app学习笔记"中，我们主要会涉及到以下几个关键知识点： 1. **uni-app基本概念**：了解uni-app的基本架构和工作原理，包括如何通过Vue.js语法编写页面和组件，以及uni-app如何将这些代码转换为各个平台的...
【uni-app系列】uni-app之快速搭建框架_uniapp项目框架搭建
2401_84520271的博客
04-21 1227
分享一套我整理的面试干货，这份文档结合了我多年的面试官经验，站在面试官的角度来告诉你，面试官提的那些问题他最想听到你给他的回答是什么，分享出来帮助那些对前途感到迷茫的朋友。
uni-app入门学习
2401_84092508的博客
04-20 1002
官方网页uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app为什么要去学习uni-app？
UniApp Vue3版如何实现微信小程序样式穿透
weixin_43952913的博客
11-15 1550
Vue3版的uniapp如何做小程序样式穿透。
android之uniapp弹出activity
04-22 1417
参考 https://ask.dcloud.net.cn/article/36849 https://ask.dcloud.net.cn/question/66338
uniapp 编译到微信小程序样式穿透不生效问题
qq_45670750的博客
07-14 268
样式穿透在微信小程序不生效
uni-app常用总结
qq_38722651的博客
01-10 1715
动态绑定class对象方法 1. 简单对象的绑定 :class="{'active':isActive}" active:class名(可以不加单引号) isActive:判断条件 2. 绑定并判断多个 1：使用逗号隔开 :class="{'active':isActive},'sort':isSort}" ​ 2：放入data里面 :class="className" data() { return { className:{ active: true, sort:false } } }
uniapp中常见的动态添加激活样式
weixin_48942894的博客
11-03 1752
1.首先要在data中挂载一个数组list:需要给每个对应的value值用来判断,!还要挂载一个start:0 start:0用于下面首个激活样式的判断 2.在html中这么写: <view class=“pic” :class=" [start == item.value? ‘actImg’ : ’ ’ ]" @tap=“icons(item)”> 加粗部分表示 动态的添加类名 3.在methods这么写:(第一句忽视,主要是看加粗的) icons(el){ this.kind
vue uniapp 知识点梳理
weixin_60495440的博客
07-27 675
关于vue遇到的问题
uniapp的生命周期
qq_48666244的博客
04-17 1348
onShow：每一次进入页面都会执行的生命周期。onLoad：第一次进入页面所执行的生命周期。中的页面，默认保存在工程根目录下的。中监听，在页面监听无效。
Uni-App知识点
jiuze000的博客
11-30 351
事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。websocket建立连接时，数据是通过http传输的，建立连接后就不需要http协议了。
uni-app 基础知识点
09-13
uni-app 是一个基于 Vue.js 的跨平台应用开发框架，可以用于开发同时运行在多个平台（如小程序、H5、APP）的应用程序。以下是 uni-app 的一些基础知识点： 1. 跨平台开发：uni-app 可以将一套代码同时编译成多个平台的应用程序，大大减少了开发成本和维护成本。 2. Vue.js：uni-app 基于 Vue.js 进行开发，所以对于熟悉 Vue.js 的开发者来说上手较容易。同时也能享受到 Vue.js 的数据驱动和组件化开发的特性。 3. 组件化开发：uni-app 采用组件化的开发方式，通过封装可复用的组件，提高开发效率和代码复用性。 4. API 封装：uni-app 封装了一系列平台特有的 API，开发者可以直接调用这些 API 来操作系统相关功能，如获取地理位置、扫码、支付等。 5. 跨平台能力：uni-app 支持编译成微信小程序、支付宝小程序、百度小程序、字节跳动小程序、H5、App 等多个平台的应用程序。 6. 插件生态：uni-app 提供了丰富的插件生态，可以通过插件来扩展功能或解决特定问题。 7. 发布与打包：uni-app 提供了一键打包和发布的功能，开发者可以方便地将应用程序发布到各个平台。 以上是 uni-app 的一些基础知识点，希望对你有所帮助。如有更多问题，请继续提问。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值