当前位置：首页 > news >正文

uni-app基础知识介绍

news 2025/8/9 16:29:55

uni-app的基础知识介绍

1、在第一次将代码运行在微信开发者工具的时候，应该进行如下的配置:

（1）将微信开发者工具路径进行配置；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lbyk5Jw2-1679025184071)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1679024954729.png)]

（2）在微信开发者工具中的设置里面==》安全设置==》服务端口打开；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A3IhwQH3-1679025184073)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1679024983105.png)]

2、全局配置：

（1）在pages.json里面有个gloablStyle进行配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EVYYEIwo-1679025184073)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210503194138648.png)]

（2）属性有：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉Loading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距离页面底部距离，单位仅支持px

3、页面的创建

在pages中去创建页面，在这里我们需要注意的是：在创建了页面之后，必须将此页面在全局中的pages.json中pages项进行页面路径配置；

"pages": [ //pages数组中第一项表示应用启动页{"path" : "pages/message/message",//在这个里面我们可以针对当前页面的一些基础样式进行设置，当前页面的设置会覆盖掉全局的设置"style":{"navigationBarTitleText":"信息页面","navigationBarBackgroundColor":"#4CD964",//我们在这里给h5单独设置"h5":{"pullToRefresh":{"color":"#007AFF"}}} },{"path": "pages/index/index"}  
]

4、tabBar 页面配置

属性说明：

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab上面文字默认颜色
selectedColor	HexColor	是		tab上的文字选中时的颜色
backgroundColor	String	是		tab的背景色
borderStyle	String	否	black	tabBar上边框的颜色，仅支持black/white	App2.3.4+支持其他颜色值
list	Array	是		tab的列表，最少2个，最多5个tab
position	String	否	bttom	可选值bottom、top	top仅微信小程序支持

在list数组里面所拥有的配置项：

pagePath:页面路径，必须在pages中先定义

text:tab上按钮文字

iconPath：图片路径，icon大小限制为40kb，建议尺寸为81*81px,当position为top时，此参数无效，不支持网络图片，不支持字体图标

selectedIconPath:选中时的图片路径，icon大小限制为40kb，建议尺寸为81*81px,当position为top时，此参数无效

5、condition启动模式配置

启动模式配置，仅支持开发期生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面

属性说明：

属性	类型	是否必填	描述
current	Number	是	当前激活的模式，list节点的索引值
list	Array	是	启动模式列表

list说明：

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的onload函数里获得

pages.json
{"condition": {"current" : 0,"list": [{"name": '详情页面',"path":"pages/detail/detail","query":"id=80"}]}
}

6、组件的基本使用

（1）text文本组件的用法

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string		否	显示连续空格，可选线束：ensp/emsp/nbsp
decode	boolean	false	否	是否解码

text 组件相当于行内标签，在同一行显示

（2）view视图容器组件的用法（类型于div）

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类，当hover-calss="none"时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位是毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

（3）buttom按钮组件的用法

属性名	类型	默认值	说明
size	string	default	按钮大小
type	string	default	按钮的样式类型
plain	Boolean	false	背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	是否是带loading图标

（4）image组件的用法

7、uni-app中的样式

（1）rpx即响应式px,一种根据屏幕宽度自适应的动态单位，以750px宽的屏幕为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大；

（2）使用@import语句可以引入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;分号表示语句结束；

（3）支持基本常用的选择器class/id/element等；

（4）在uini-app里面不能使用*选择器；

（5）page相当于body的节点；

（6）定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器；

（7）uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意一下几点：

字体文件大小40kb，uni-app会自动将其转化为base64格式；

字体文字大小等于40kb,需开发者自己转化，否则试用期不生效；

字体文字的引入路径推荐使用以~@开头的绝对路径

@font-face{font-family:test-icon;src:url("~@/static/iconfont.ttf")
}

8、uni-app中的数据绑定

用法和vue中的相同；

9、uni-app中的事件绑定

用法同vue中的相同；

10、uni-app中的生命周期

属性名	说明
onLaunch	当uni-app初始化完成时触发（全局只触发一次）
onShow	当uini-app启动，或者从后台进入前台显示
onHide	当uini-app从前台进入后台
onError	当uini-app报错时触发

页面的生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件，常用于下拉下一页数据
onShow	监听页面显示，页面每次出现在屏幕上都触发
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载

11、下拉刷新

（1）在uni-app中有两种方式开启下拉刷新

第一种：需要在pages.json里，找到当前页面的pages节点，并且在style选项中开启enablePullDownRefresh

第二种：通过调用uni.startPullDownRefresh方式开启下拉刷新

（2）监听下拉刷新：

通过onPullDownRefresh可以监听到下拉刷新的动作

（3）关闭下拉刷新

uni.stopPullDownRefresh，停止当前页面下拉刷新

代码示例：

onPullDownRefresh() {console.log('下拉事件触发了');//当数据已经更新之后，不希望还是一种下拉刷新的状态，所以在这里我们需要将下拉刷新取消掉，在此我们需要调用停止下拉刷新的函数,因为我们的数据在一瞬间进行改变的，所以这个改变之后停止下拉刷新我们的效果并不是很明显，所以在这个时候我们可以添加一个定时器setTimeout(()=>{this.list = ['前端课程','Java','UI课程','大数据课程'];uni.stopPullDownRefresh();},2000)
}

12、网络请求

在uni中可以调用uni.request方法进行请求网络

需要注意的是：在小程序中网络相关的API在使用前需要配置域名白名单；

13、数据缓存

uni.setStorage

uni.setStorageSync

uni.getStorage

uni.getStorageSync

uni.removeStorage

uni.removeStorageSync

14、上传图片、预览图片

（1）上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照

（2）预览图片

uni.previewImage(object)这个方法可以预览图片

15、条件注释实现跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同的平台

写法：以#ifdef加平台标识开头，以#endif结尾；

平台标识

值	平台
APP-PLU5	5+APP
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	头条小程序
MP-QQ	QQ小程序
MP	微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序

代码案例：

<!-- #ifdef H5 -->
<view >我只希望在H5页面中可以被看到
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view >我只希望在微信小程序被看到
</view>
<!-- #endif -->onLoad() {// #ifdef H5console.log('我希望在H5中打印')// #endif// #ifdef MP_WEINXINconsole.log('我希望在微信小程序中打印')// #endif
}<styel>/* #ifdef H5*/view {color: white;}/* #endif */</style>

16、两种方式导航跳转和传参

声明式导航：

<navigator url="/pages/detail/detail?id=80">跳转至详情页面</navigator>
<!-- 当我们要跳转到tabbar页面的时候，需要添加open-type -->
<navigator url="/pages/index/index" open-type="switchTab">跳转至首页</navigator>
<navigator url="/pages/index/index" open-type="redirect">跳转至详情页面</navigator>详情页面的接收：
onLoad(options){console.log(options)
}

编程式导航：

<button type="default" @click="toDetail">跳转到详情页面</button>
<button type="default" @click="toIndex">跳转到首页</button>
methods:{toDetail(){uni.navigateTo({url:"/pages/detail/detail?id=80&age=90"})},toIndex(){uni.switchTab({url:"/pages/index/index"})}}详情页面的接收：
onLoad(options){console.log(options)
}