uni-app:基础组件 (上)-阿里云开发者社区

引言

在现代应用开发中，跨平台解决方案越来越受到欢迎，uni-app 正是这样一个强大的框架。它能够帮助开发者快速构建高效的移动应用。本文将深入探讨 uni-app 中的多个常用组件，包括数据存储、图标展示、按钮样式、表单输入、导航跳转和输入框控制等。通过具体的代码示例，我们将逐步展示如何利用这些组件提升应用的用户体验和功能性。无论您是新手还是有经验的开发者，这篇文章都将为您提供实用的技巧和深入的理解。

storage

```Plain Text

<script setup>
  const setData = () => {
    uni.setStorage({
      key: 'storage_key',
      data: 'hello',
      success: function() {
        console.log('success');
      }
    });
  }
  const getData = () => {
    const a = uni.getStorage({
      key: 'storage_key',
      success(res) {
        console.log(res.data)
      }
    })
  }
</script>
```

icon

<icon type="success"></icon>

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
     <view class="content">
     <progress class="con-pro" :percent="percentVal" show-info   stroke-width="8"/>
          </view>
        <view class="progress-control">
        <button type="primary" @click="setProgress">设置进度</button>
        <button type="warn" @click="clearProgress">清除进度</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
    data() {
      return {
        percentVal:10,
      }
    },
    methods: {
      setProgress() {
        let num  = Math.ceil(Math.random())*10
        this.percentVal +=num
      },
      clearProgress() {
        this.percentVal =0
      }

    },
  }
</script>

<template>
  <view class="page">
    <view class="item" v-for="(value,index) in iconType" :key="index">
      <icon :type="value" size="26"></icon>
      <text>{{value}}</text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search',
          'clear'
        ],
        
      }
    }
  }
</script>

button

<template>
    <view class="page">
        <button class="my_btn" size="default" type="default" hover-class="is-hover">
            click me
        </button>
    </view>
</template>
<style scoped>
        .my_btn {
        color: red;
        backgroundColor: #1AAD19;
        borderColor: #1AAD19;
    }
    .is-hover {
        color: rgba(255, 255, 255, 0.6);
        background-color: #179b16;
        border-color: #179b16;
    }
</style>

navigate

几个跳转的区别
uni.navigateTo()
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。

uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。

uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

uni.switchTab专门用于跳转到 tabBar 页面，并且可以刷新到最新的状态 
。
uni.navigateTo({
  url: 'B?id=1'
});

checked

<template>
  <view>
    <view class="uni-list">
      <checkbox-group @change="checkboxChange">
        <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
          <view>
            <checkbox :value="item.value" :checked="item.checked" />
          </view>
          <view>{{item.name}}</view>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'checkbox 复选框',
        items: [{
            value: 'USA',
            name: '美国'
          },
          {
            value: 'CHN',
            name: '中国',
            checked: 'true'
          },
          {
            value: 'BRA',
            name: '巴西'
          },
          {
            value: 'JPN',
            name: '日本'
          },
          {
            value: 'ENG',
            name: '英国'
          },
          {
            value: 'FRA',
            name: '法国'
          }
        ]
      }
    },
    methods: {
      checkboxChange: function(e) {
        var items = this.items,
          values = e.detail.value;
        for (var i = 0, lenI = items.length; i < lenI; ++i) {
          const item = items[i]
          if (values.includes(item.value)) {
            this.$set(item, 'checked', true)
          } else {
            this.$set(item, 'checked', false)
          }
        }
      }
    }
  }
</script>
<style scoped>
  .uni-list-cell {
    display: flex;
    justify-content: flex-start
  }
</style>

css

创建一个css 文件
.my_color{
    color: #d55617;
}
引入
<style scoped>
@import 'test.css'
</style>
使用 
<template>
<view>
    <text class="my_color">hello,world</text>
</view>
</template>

form

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <view>
      <form @submit="formSubmit" @reset="formReset">
        <view class="uni-form-item uni-column">
          <view class="title">switch</view>
          <view>
            <switch name="switch" />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">radio</view>
          <radio-group name="radio">
            <label>
              <radio value="radio1" /><text>选项一</text>
            </label>
            <label>
              <radio value="radio2" /><text>选项二</text>
            </label>
          </radio-group>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">checkbox</view>
          <checkbox-group name="checkbox">
            <label>
              <checkbox value="checkbox1" /><text>选项一</text>
            </label>
            <label>
              <checkbox value="checkbox2" /><text>选项二</text>
            </label>
          </checkbox-group>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">slider</view>
          <slider value="50" name="slider" show-value></slider>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">input</view>
          <input class="uni-input" name="input" placeholder="这是一个输入框" />
        </view>
        <view class="uni-btn-v">
          <button form-type="submit">Submit</button>
          <button type="default" form-type="reset">Reset</button>
        </view>
      </form>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      formSubmit: function(e) {
        console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
        var formdata = e.detail.value
        uni.showModal({
          content: '表单数据内容：' + JSON.stringify(formdata),
          showCancel: false
        });
      },
      formReset: function(e) {
        console.log('清空数据')
      }
    }
  }
</script>
<style>
  .uni-form-item .title {
    padding: 20rpx 0;
  }
</style>

input

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <view class="uni-common-mt">
      <view class="uni-form-item uni-column">
        <view class="title">可自动聚焦的input</view>
        <input class="uni-input" focus placeholder="自动获得焦点" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">键盘右下角按钮显示为搜索</view>
        <input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制最大输入长度的input</view>
        <input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">实时获取输入值：{{inputValue}}</view>
        <input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制输入的input</view>
        <input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
      </view>
      <!-- #ifndef MP-BAIDU -->
      <view class="uni-form-item uni-column">
        <view class="title">控制键盘的input</view>
        <input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
      </view>
      <!-- #endif -->
      <view class="uni-form-item uni-column">
        <view class="title">数字输入的input</view>
        <input class="uni-input" type="number" placeholder="这是一个数字输入框" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">密码输入的input</view>
        <input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">带小数点的input</view>
        <input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">身份证输入的input</view>
        <input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制占位符颜色的input</view>
        <input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
        <view class="uni-input-wrapper">
          <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
          <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
        <view class="uni-input-wrapper">
          <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
          <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
            @click="changePassword">&#xe568;</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'input',
        focus: false,
        inputValue: '',
        showClearIcon: false,
        inputClearValue: '',
        changeValue: '',
        showPassword: true
      }
    },
    methods: {
      onKeyInput: function(event) {
        this.inputValue = event.target.value
      },
      replaceInput: function(event) {
        var value = event.target.value;
        if (value === '11') {
          this.changeValue = '2';
        }
      },
      hideKeyboard: function(event) {
        if (event.target.value === '123') {
          uni.hideKeyboard();
        }
      },
      clearInput: function(event) {
        this.inputClearValue = event.detail.value;
        if (event.detail.value.length > 0) {
          this.showClearIcon = true;
        } else {
          this.showClearIcon = false;
        }
      },
      clearIcon: function() {
        this.inputClearValue = '';
        this.showClearIcon = false;
      },
      changePassword: function() {
        this.showPassword = !this.showPassword;
      }
    }
  }
</script>

属性

focus  自动 聚焦
confirm-type="search"  为搜索 
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />

  <view class="uni-form-item uni-column">
        <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
        <view class="uni-input-wrapper">
          <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
          <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
            @click="changePassword">&#xe568;</text>
        </view>
      </view>
    </view>

js

js
   onKeyInput: function(event) {
            this.inputValue = event.target.value
        },

       hideKeyboard: function(event) {
            if (event.target.value === '123') {
                uni.hideKeyboard();
            }
        },
      clearInput: function(event) {
            this.inputClearValue = event.detail.value;
            if (event.detail.value.length > 0) {
                this.showClearIcon = true;
            } else {
                this.showClearIcon = false;
            }
        },

     changePassword: function() {
            this.showPassword = !this.showPassword;
        }

uni-app:基础组件 (上)

引言