② uni-app 基本组件的使用（text、view、button、image）+ uni-app中的样式

桃扇骨 2022-12-27 14:02 601阅读 0赞

### uni-app ###

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

--------------------

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

--------------------

# 组件的基本使用 #

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

--------------------

## text文本组件的用法 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">类型</th> 
   <th align="center">默认值</th> 
   <th align="center">必填</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">selectable</td> 
   <td align="center">boolean</td> 
   <td align="center">false</td> 
   <td align="center">否</td> 
   <td align="center">文本是否可选</td> 
  </tr> 
  <tr> 
   <td align="center">space</td> 
   <td align="center">string</td> 
   <td align="center">.</td> 
   <td align="center">否</td> 
   <td align="center">显示连续空格，可选参数：<code>ensp</code>、<code>emsp</code>、<code>nbsp</code></td> 
  </tr> 
 </tbody> 
</table>

*  `text` 组件相当于行内标签`<span>`、在同一行显示
 *  除了文本节点以外的其他节点都无法长按选中
 *  各个操作系统的空格标准并不一致
 *  `<text>`组件内只支持嵌套`<text>`，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。
 *  支持 \\n 方式换行。

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

![在这里插入图片描述][20201211151400822.png]

--------------------

## view视图容器组件的用法 ##

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

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">类型</th> 
   <th align="center">默认值</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">hover-class</td> 
   <td align="center">String</td> 
   <td align="center">none</td> 
   <td align="center">指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果</td> 
  </tr> 
  <tr> 
   <td align="center">hover-stop-propagation</td> 
   <td align="center">Boolean</td> 
   <td align="center">false</td> 
   <td align="center">指定是否阻止本节点的祖先节点出现点击态</td> 
  </tr> 
  <tr> 
   <td align="center">hover-start-time</td> 
   <td align="center">Number</td> 
   <td align="center">50</td> 
   <td align="center">按住后多久出现点击态，单位毫秒</td> 
  </tr> 
  <tr> 
   <td align="center">hover-stay-time</td> 
   <td align="center">Number</td> 
   <td align="center">400</td> 
   <td align="center">手指松开后点击态保留时间，单位毫秒</td> 
  </tr> 
 </tbody> 
</table>

<template>
    	<view>
    		
    		<view class="box2" hover-class="box2-active">
    			
    			
    			
    			<view class="box" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box-active" hover-stop-propagation>信息页</view>
    		</view>
    	</view>
    </template>
    
    <script> </script>
    
    <style> .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; } </style>

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

--------------------

## button按钮组件的用法 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">属性名</th> 
   <th align="center">类型</th> 
   <th align="center">默认值</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">size</td> 
   <td align="center">String</td> 
   <td align="center">default</td> 
   <td align="center">按钮的大小</td> 
  </tr> 
  <tr> 
   <td align="center">type</td> 
   <td align="center">String</td> 
   <td align="center">default</td> 
   <td align="center">按钮的样式类型</td> 
  </tr> 
  <tr> 
   <td align="center">plain</td> 
   <td align="center">Boolean</td> 
   <td align="center">false</td> 
   <td align="center">按钮是否镂空，背景色透明</td> 
  </tr> 
  <tr> 
   <td align="center">disabled</td> 
   <td align="center">Boolean</td> 
   <td align="center">false</td> 
   <td align="center">是否按钮</td> 
  </tr> 
  <tr> 
   <td align="center">loading</td> 
   <td align="center">Boolean</td> 
   <td align="center">false</td> 
   <td align="center">名称是否带 loading t图标</td> 
  </tr> 
 </tbody> 
</table>

*  `button` 组件默认独占一行，设置 `size` 为 `mini` 时可以在一行显示多个

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

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

<template>
        <view>
            <navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
            <button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
            <button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button>
        </view>
    </template>
    <script> export default { methods: { goto(url) { uni.navigateTo({ url:url }) } } } </script>

--------------------

### open-type ###

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

<template>
    	<view>
    		<button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>
    	</view>
    </template>
    
    <script> export default{ data(){ return { } }, methods:{ getUserInfo(data){ console.log(data); } } } </script>
    
    <style> </style>

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

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

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

<template>
    	<view class="container">
    		<img v-if="isShow" :src="userInfo.avatarUrl" alt="头像">
    		<button v-else type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">点击获取用户信息</button>
    		<view v-if="isShow">hello {
       {userInfo.nickName}}</view>
    	</view>
    </template>
    
    <script> 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('获取失败'); } }) } } } </script>
    
    <style> .container{ /* 小程序推荐使用flex布局 */ display: flex; flex-direction: column; align-items: center; } img{ /* 注意：rpx单位 */ width: 200rpx; height: 200rpx; border-radius: 100rpx; margin: 100rpx 0; } </style>

效果：  
![在这里插入图片描述][20201211162857782.png]  
授权后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 6]

--------------------

## image组件的使用 ##

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>String</td> 
   <td></td> 
   <td>图片资源地址</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>‘scaleToFill’</td> 
   <td>图片裁剪、缩放的模式</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

*  `<image>` 组件默认宽度 300px、高度 225px；
 *  `src` 仅支持相对路径、绝对路径，支持 base64 码；
 *  页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 `image{will-change: transform}` ,可优化此问题。
 *  自定义组件里面使用 `<image>`时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。

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

--------------------

# uni-app中的样式 #

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

演示：

<template>
    	<view>
    		<view>样式</view>
    		<view class="box1"></view>
    		<view class="box2"></view>
    	</view>
    </template>
    
    <script> </script>
    
    <style> .box1{ width: 750rpx; height: 750rpx; background-color: #2C405A; } .box2{ width: 375rpx; height: 375rpx; background-color: red; } </style>

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

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

演示：

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

view{ 
    	color: red;
    }

![在这里插入图片描述][20201211171248869.png]

*  支持基本常用的选择器class、id、element等
 *  在 `uni-app` 中不能使用 `*` 选择器。
 *  `page` 相当于 `body` 节点  
    ![在这里插入图片描述][20201211171510349.png]
 *  定义在 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的时候，会出现这种情况：  
![在这里插入图片描述][20201212122447404.png]  
我们只需要去 工具 -> 插件安装 中，去安装插件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 9]  
目前插件市场第一个就是scss编译  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 10]  
使用HBuilderX导入插件即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 11]  
导入好了之后就可以正常编译了。

<template>
    	<view>
    		<view>样式</view>
    		<view class="box1">
    			<view class="box1-test"></view>
    		</view>
    	</view>
    </template>
    
    <script> </script>
    
    <style lang="scss"> .box1{ width: 750rpx; height: 750rpx; background-color: #2C405A; .box1-test{ width: 375rpx; height: 375rpx; background-color: red; } } </style>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 12]

--------------------

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

<template>
    	<view>
    		<view>样式</view>
    		<view class="box1">
    			<view class="box1-test"></view>
    		</view>
    	</view>
    </template>
    
    <script> </script>
    
    <style lang="scss"> @import url("./test.css"); .box1{ width: 750rpx; height: 750rpx; background-color: $global-color; /* ←这里 */ .box1-test{ width: 375rpx; height: 375rpx; background-color: red; } } </style>

看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 14]

[uni-app]: https://uniapp.dcloud.io/component/view
[20201211151400822.png]: /images/20221120/a0dada770dd94e81a1bbdd3a9cf8a798.png
[Vue]: https://blog.csdn.net/qq_45613931/category_9941207.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20221120/170f5a4c71d34bdf980db93d02114a5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20221120/b7bfb2fb78f745bfa2c1e2bc6a3d33ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: /images/20221120/cb3edba397b0438399e2670ca5619da2.png
[20201211161434805.png]: /images/20221120/85fe6291fbfc4807bb57796d319dba7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: /images/20221120/41f141ef429444bcae25dc2d8be72381.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]: /images/20221120/1203c164c7f746088a7ed89667105cfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]: /images/20221120/525bb6dcea34476f842e34d7aa596f32.png
[20201211162857782.png]: /images/20221120/8aa218b0037c42ca8427cb63a0d6afe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 6]: /images/20221120/61d8a9a119434165b03c207b359bae6f.png
[image]: https://uniapp.dcloud.io/component/image
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 7]: /images/20221120/3f96c0a373964d9ca64120e3e3e62d01.png
[20201211171411679.png]: /images/20221120/126baffe3c264bd280cb868aada6b30a.png
[20201211171428200.png]: /images/20221120/4216983d9ea3400686c545dfab39e250.png
[20201211171248869.png]: /images/20221120/e49473ff66ff44bc99a915856fb84684.png
[20201211171510349.png]: /images/20221120/35fd96fd6557445da2bb31e40d62bb20.png
[20201212122447404.png]: /images/20221120/7cad8cce4fb9474d89a8ea5d2bc5c137.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 8]: /images/20221120/9b50cb8c731f41dab3800835fcb17f06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 9]: /images/20221120/9f4eea37f1bc4b81a8f1ec7beb26e4fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 10]: /images/20221120/5218adb4660240acbfbade05206e67fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 11]: /images/20221120/1302e18884f94392b390e1b452ebd5ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 12]: /images/20221120/81b886309d48435189d619c05f27a085.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 13]: /images/20221120/f7f73f0a0c0243b09049b0fe921e0df9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 14]: /images/20221120/d9ec0e8098a24417a6523c3c44f7eee5.png