vue书写一个uni-app小程序

在本次文章中我来大致向大家介绍一下如何使用Hbuilder X来编写一个uni-app的小程序的项目，在此我只说编写的方法与方向，具体的操作留给大家去亲自实操哦。

1.起步（创建一个uni-app框架）：

首先，我们需要把开发工具准备完善，这里之所以推荐大家使用Hbuilder X来开发uni-app项目是因为它的好处有：

模板丰富 完善的智能提示 一键运行

大家可以去官网自行下载这个编辑器，官网地址如下：

下载完毕之后，为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

之后我们就可以开始新建一个uni-app的项目了 ,在文件-新建-项目中新建一个uni-app项目,

选择完毕之后点击创建， 如图所示即为创建成功：

这样我们就创建了一个uni-app项目的框架 。

2.tabBar

那么我们就要在pages目录中来创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面；

创建完毕：

然后我们需要根据自身不同的需求在static目录里放入一些图片等资源文件，同时，修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

{
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png"
      }
    ]
  }
}

然后记得，默认生成的tabBar文件我们要删除掉：

在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉 同时，把 page.json 中记录的 index 首页 路径删除掉

那么除了下方的tabbar，上方的导航条样式也是一个问题，导航条的设置在pages.json这个全局配置文件当中，我们可以修改globalStyle这个节点里面的东西去实现导航条的修改：

{
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "商品优购",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF"
  }
}

需要注意的是这里改了可能你的导航条还是没有文字，这时候需要把文字写在pages.json中的pages中的样式里，如图所示：

最终我们会得到一个导航条和tabbar都写好的小程序框架：

那么今天关于小程序的编写就先说到这里，后面我们每天都会说一部分，谢谢大家观看。