uni-app入门：项目创建及原生tabbar配置

uni-app入门：项目创建及原生tabbar配置

一、什么是uni-app？

uni-app是一个基于Vue.js开发的多端开发框架，可以同时开发微信小程序、H5、App等多个平台。

其优点在于可以快速的实现一份代码在多个平台上运行，同时也具备了很好的开发体验以及性能表现。

二、如何创建uni-app项目？

1. 安装HbuilderX

HbuilderX是uni-app官方推荐的开发工具，我们可以通过官网下载安装，详见：https://www.dcloud.io/hbuilderx.html

2. 创建项目

HbuilderX中创建uni-app项目非常简单，只需要选择uni-app项目，并填写相应信息即可。

我们可以在“新建项目”中选择“uni-app”，填写项目名称、项目路径、应用ID、选择“使用原生框架”等信息即可完成项目创建。

创建uni-app项目示例代码：
<img :src="$withBase('/images/uni-app-1.png')" alt="uni-app项目创建">

三、如何配置原生tabbar？

1. 安装插件

我们需要在HbuilderX中安装“Uni App Native”插件，该插件提供了uni-app访问原生API能力。

具体可以通过以下步骤完成插件安装：

1）打开HbuilderX，点击“设置”菜单，在弹窗中选择“插件安装”；

2）搜索“uni-app native”插件并进行安装。

<img :src="$withBase('/images/uni-app-2.png')" alt="插件安装">

2. 配置tabbar.json文件

在uni-app项目中，tabbar相关配置都可以在tabbar.json文件中进行配置。

我们可以在该文件中添加对应的页面路径、图标、选中图标、文字等配置来实现tabbar栏。

示例代码如下：

{
    "color":"#8E8E8E",
    "selectedColor":"#43BD98",
    "backgroundColor":"#FFF",
    "borderStyle":"black",
    "list":[
        {
            "pagePath":"pages/index/index",
            "iconPath":"static/tabbar/index.png",
            "selectedIconPath":"static/tabbar/index_p.png",
            "text":"首页"
        },
        {
            "pagePath":"pages/category/category",
            "iconPath":"static/tabbar/category.png",
            "selectedIconPath":"static/tabbar/category_p.png",
            "text":"分类"
        },
        {
            "pagePath":"pages/cart/cart",
            "iconPath":"static/tabbar/cart.png",
            "selectedIconPath":"static/tabbar/cart_p.png",
            "text":"购物车"
        },
        {
            "pagePath":"pages/user/user",
            "iconPath":"static/tabbar/user.png",
            "selectedIconPath":"static/tabbar/user_p.png",
            "text":"我的"
        }
    ]
}

3. 编写tabbar布局

在页面布局中，我们需要注入一个名为“tabbar”的组件，来实现tabbar的展示和切换。

示例代码如下：

<template>
  <view class="container">
    <router-view></router-view>
    <tabbar :list="list"></tabbar>
  </view>
</template>
<script>
import tabbar from '@/components/tabbar.vue'
export default {
  components: {
    tabbar
  },
  data() {
    return {
      list: [
        {
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-active.png'
        },
        {
          pagePath: '/pages/category/category',
          text: '分类',
          iconPath: '/static/tabbar/category.png',
          selectedIconPath: '/static/tabbar/category-active.png'
        },
        {
          pagePath: '/pages/cart/cart',
          text: '购物车',
          iconPath: '/static/tabbar/cart.png',
          selectedIconPath: '/static/tabbar/cart-active.png'
        },
        {
          pagePath: '/pages/user/user',
          text: '我的',
          iconPath: '/static/tabbar/user.png',
          selectedIconPath: '/static/tabbar/user-active.png'
        }
      ]
    }
  }
}
</script>

四、总结

以上就是uni-app项目创建及原生tabbar配置的相关内容了，我们可以通过HbuilderX创建uni-app项目，然后在项目中进行tabbar的配置，最后在页面中进行布局实现。

uni-app作为一个开发跨端应用的框架，对于使用Vue.js进行开发的开发人员来说，无疑是一个很好的选择。