② uni

您所在的位置：网站首页 › vscode怎么引入img图片与文字的先后顺序 › ② uni

② uni

2023-11-14 04:07| 来源: 网络整理| 查看: 265

uni-app 组件的基本使用text文本组件的用法view视图容器组件的用法button按钮组件的用法open-type image组件的使用 uni-app中的样式scss

写下博客主要用来分享知识内容，便于自我复习和总结。如有错误之处，望各位指出。

组件的基本使用

本文只介绍几个简单的基本组件及属性用法，熟悉了之后，想实现其他功能、使用其他组件都只需查看官方文档uni-app组件即可。文档里写的很全面，比我在这里复述要好的多。

text文本组件的用法属性类型默认值必填说明selectablebooleanfalse否文本是否可选spacestring.否显示连续空格，可选参数：ensp、emsp、nbsp text 组件相当于行内标签、在同一行显示除了文本节点以外的其他节点都无法长按选中各个操作系统的空格标准并不一致组件内只支持嵌套，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。支持 \n 方式换行。

（注：虽然在uni-app中没有div、span等标签，但不代表我们就不能使用它们。就比如如果使用，编译时会被转换为。那显然直接使用，就减少编译时的转化时间。因此推荐直接使用uni-app组件）

信息页信息页信息页信息页信息页

在这里插入图片描述

view视图容器组件的用法

View 视图容器，类似于HTML 中的div

属性类型默认值说明hover-classStringnone指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态hover-start-timeNumber50按住后多久出现点击态，单位毫秒hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒信息页 .box{ width: 100px; height: 100px; background-color: green; } .box-active{ background-color: red; } .box2{ width: 200px; height: 200px; background-color: black; } .box2-active{ background-color: pink; }

其中，对于 hover-start-time 和 hover-stay-time ，如果没有学习过Vue，应该是很难理解，这里为什么要加：。所以，如果阅读到这里，自己还没学过Vue，建议先去学一些Vue的基础知识。可以参考我的专栏：Vue。之后的文章里，将不再提醒Vue用法，也不会赘述相关功能。

button按钮组件的用法属性名类型默认值说明sizeStringdefault按钮的大小typeStringdefault按钮的样式类型plainBooleanfalse按钮是否镂空，背景色透明disabledBooleanfalse是否按钮loadingBooleanfalse名称是否带 loading t图标 button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个按钮按钮1 按钮2 按钮按钮

在这里插入图片描述 button 组件的点击遵循 vue 标准的 @click事件。

button 组件没有 url 属性，如果要跳转页面，可以在@click中编写，也可以在button组件外面套一层 navigator 组件。举例，如需跳转到about页面，可按如下几种代码写法执行：

通过navigator组件跳转到about页面通过方法跳转到about页面跳转到about页面 export default { methods: { goto(url) { uni.navigateTo({ url:url }) } } } open-type

对于button里，有一个十分关键的属性：open-type，它将决定程序开放能力。它有很多的有效值，在这里就以getUserInfo为例，以获取当前微信用户的信息。其他有效值可以参考官方文档。（事件务必使用vue语法！）在这里插入图片描述（使用微信开发者工具噢！）

获取用户信息 export default{ data(){ return {} }, methods:{ getUserInfo(data){ console.log(data); } } }

看一下效果：在这里插入图片描述当我们点击按钮的时候，它就会弹出授权窗口。如果未弹出，其实就是已经授权过了，可以清除一下授权缓存。如果我们拒绝授权，输出结果是这样的：我们对比一下就懂了，如果我们授权成功，输出结果是这样的：在这里插入图片描述此时我们就可以发现，授权成功后，输出结果中出现更多字段。userInfo里已经出现了我们的微信个人信息。userInfo里会有如下信息：nickName姓名、avatarUrl头像、gender性别、province省份、city城市、country国家。

在这部分，我们就可以用rawData是否存在来判断，该用户是否授权成功。

但是我们并不用这个userInfo来获取个人信息噢！wx还有个getUserInfo，它只有在用户已经授权的情况下才会调用。在这里插入图片描述上面这段代码到底怎么用？看一下这部分所有的代码应该就懂啦：

点击获取用户信息 hello {{userInfo.nickName}} export default{ data(){ return{ userInfo: {}, isShow: false // 用户没有授权 } }, methods:{ getUserInfo(data){ // 判断用户是否授权 if(data.mp.detail.rawData){ // 用户授权 this.handelGetUserInfo(); } }, handelGetUserInfo(){ wx.getUserInfo({ success: (data) => { console.log(data); // 更新data中的数据 this.userInfo = data.userInfo; this.isShow = true; }, fail: () => { console.log('获取失败'); } }) } } } .container{ /* 小程序推荐使用flex布局 */ display: flex; flex-direction: column; align-items: center; } img{ /* 注意：rpx单位 */ width: 200rpx; height: 200rpx; border-radius: 100rpx; margin: 100rpx 0; }

效果：在这里插入图片描述授权后：

image组件的使用属性名类型默认值说明平台差异说明srcString图片资源地址modeString‘scaleToFill’图片裁剪、缩放的模式组件默认宽度 300px、高度 225px；src 仅支持相对路径、绝对路径，支持 base64 码；页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。自定义组件里面使用时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。

mode的有效值很多，演示代码建议建议参考官方文档：image

uni-app中的样式

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

演示：

样式 .box1{ width: 750rpx; height: 750rpx; background-color: #2C405A; } .box2{ width: 375rpx; height: 375rpx; background-color: red; }

从结果可以看到：750rpx是屏幕宽度（并且随着屏幕宽度变化而变化），同理375rpx就永远是屏幕宽度的一半。在这里插入图片描述

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

演示：

样式 @import url("./test.css"); .box1{ width: 750rpx; height: 750rpx; background-color: #2C405A; } .box2{ width: 375rpx; height: 375rpx; background-color: red; } view{ color: red; }

在这里插入图片描述

支持基本常用的选择器class、id、element等

在 uni-app 中不能使用 * 选择器。

page 相当于 body 节点在这里插入图片描述

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

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

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

字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效；

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

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

当我们第一次想使用scss的时候，会出现这种情况：在这里插入图片描述我们只需要去工具 -> 插件安装中，去安装插件。目前插件市场第一个就是scss编译使用HBuilderX导入插件即可。导入好了之后就可以正常编译了。

样式 .box1{ width: 750rpx; height: 750rpx; background-color: #2C405A; .box1-test{ width: 375rpx; height: 375rpx; background-color: red; } }

效果：在这里插入图片描述

uni.scss的使用就比较简单了，我们直接使用其中的配置就可以了。在这里插入图片描述

样式 @import url("./test.css"); .box1{ width: 750rpx; height: 750rpx; background-color: $global-color; /* ←这里 */ .box1-test{ width: 375rpx; height: 375rpx; background-color: red; } }

看效果：在这里插入图片描述

【本文地址】

公司简介

联系我们