uniapp组件库有哪些，详细介绍uniapp的常用组件

Uniapp是一个跨平台的前端开发框架，它支持使用Vue.js的语法和组件，同时也可以使用HTML、CSS和JavaScript来开发。Uniapp提供了许多常用的组件，下面是一些常用的组件及其介绍：

1. 按钮组件（@uni/button）：按钮组件用于在页面中添加按钮，它提供了多种样式和尺寸的按钮，并且支持点击事件和自定义样式。

2. 表格组件（@uni/table）：表格组件用于在页面中展示数据，它提供了多种样式和交互方式，支持排序、筛选、分页等功能。

3. 列表组件（@uni/list）：列表组件用于在页面中展示数据，它提供了多种样式和交互方式，支持分页、搜索、筛选等功能。

4. 弹窗组件（@uni/dialog）：弹窗组件用于在页面中展示提示信息或操作提示，它提供了多种样式和交互方式，支持关闭、确认、取消等功能。

5. 输入框组件（@uni/input）：输入框组件用于在页面中展示输入框，它提供了多种样式和大小，支持输入、选择、搜索等功能。

6. 图片组件（@uni/image）：图片组件用于在页面中展示图片，它提供了多种样式和大小，支持预览、裁剪、旋转等功能。

7. 滑动组件（@uni/slider）：滑动组件用于在页面中展示滑动条，它提供了多种样式和大小，支持滑动、选择、缩放等功能。

8. 日期选择器组件（@uni/calendar）：日期选择器组件用于在页面中展示日期选择器，它提供了多种样式和大小，支持选择、搜索、过滤等功能。

这些组件只是Uniapp中的一部分，Uniapp还提供了许多其他的组件，可以根据具体需求进行选择和使用。

uniapp可以用pinia吗

Pinia 是什么？

Pinia（发音为 /piːnjʌ/，如英语中的 peenya） 是 Vue 的存储库，它允许您跨组件、页面共享状态。

在服务器端以及小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

Devtools 支持

    追踪 actions、mutations 的时间线

    在组件中展示它们所用到的 Store

    让调试更容易的 Time travel

 热模块更换

    不必重载页面即可修改 Store

    开发时可保持当前的 State

为 JS 开发者提供适当的 TypeScript 支持以及 自动补全 功能。

uni-app 使用Pinia

uni-app 内置了 Pinia 。Vue 2 项目暂不支持

使用 HBuilder X 不需要手动安装，直接使用即可。使用 CLI 需要手动安装，执行 yarn add pinia@2.0.33 或 npm install pinia@2.0.33。

uni-app已经内置了vuex和pinia两个状态管理，不需要安装即可使用。

建议项目结构

├── pages
├── static
└── stores // 注意此处
    └── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

main.js 中引用pinia

mian.js 引用并使用pinia

//导入pinia
import * as Pinia from  'pinia'

// 创建Pinia实例  // 将pinia实例挂载到vue实例上 
app.use(Pinia.createPinia());

return {
    app,
    Pinia, // 此处必须将 Pinia 返回
} 

main.js完整代码

// #ifndef VUE3
import Vue from 'vue'
import App from './App' 

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'

//导入pinia  
import * as Pinia from  'pinia'

import App from './App.vue'
export function createApp() {
    const app = createSSRApp(App)

    // 创建Pinia实例  // 将pinia实例挂载到vue实例上 
    app.use(Pinia.createPinia());

    return {
        app,
        Pinia, // 此处必须将 Pinia 返回
    }
}
// #endif

请特别注意pinia引用位置，否则会报错

创建和注册模块

在需要使用全局状态管理的地方，你可以创建一个或多个Pinia模块。每个模块代表一个具体的状态管理单元。

项目中，新建stores文件夹，用于存储 创建和注册的模块

在stores文件夹，新建js文件（useCounterStore.js），用于存储 创建和注册的模块

定义pinia方式

选项options方式 定义pinia

在useCounterStore.js中写入如下代码

import { defineStore } from 'pinia'

// 定义仓库有两种定义方式

// 01 选项options方式
export const useCounterStore = defineStore('counter', {
  // 定义状态
      state:()=>({count:5}),
      // 计算数据
      getters:{
          doubleCount:(state)=>state.count*2
      },
      // 动作支持异步
      actions:{
          setCount(v){
              this.count = v;
          }
      }
})

页面中使用 pinia选项options方式

<template>
    <view>
        pinia 大菠萝doubleCount:{{doubleCount}}
        <button>{{count}}</button>
    </view>
</template>

<script>
import {useCounterStore} from "@/stores/useCounterStore.js
// map方泛
import {mapState} from 'pinia';

export default {
    data(){},
    computed: function(){
        // 把pinia 的state映射到页面
        ...mapState(useCounterStore,["count","doubleCount"]
    } ,
    methods:{
        // 把pinia的方法映射到页面
        ...mapActions(useCounterStore,["setCount"])
    }
</script>

这种写法，和vuex很类似，但是少了mutation方法

函数方式 定义pinia

新建js文件(useColorStore.js)，并且定义pinia

// 导入定义仓库的方法
import {defineStore} from 'pinia';

// 导入响应式和计算
import {ref} from 'vue'
const  useColorStore = defineStore("color",()=>{
    // 定义一个状态颜色为 默认红色
    const color=ref('red');
    // 定义一个设置状态的方法
    const setColor = v=>{
        color.value = v;
    }
    // 导入
    return {color,setColor}
}) 

export default useColorStore;          

页面中使用 函数方式 定义的pinia

<template>
    <view class="container">
        <button @click="setColor">更改颜色</button> 

        <view :style="'background:'+colorStore.color">
            v-show="isShow"
        </view>
    </view>
</template>

<script setup>
    import useColorStore from '@/stores/useColorStore.js'
    const colorStore = useColorStore() 
    const setColor = () => { 
        colorStore.setColor('#333')
    }  
</script> 

<style lang="less" scoped> 
    .container {
        padding: 0 20px 20px;
        font-size: 14px;
        line-height: 24px;
    }
</style>

误区