【微信小程序】初始页面和导航栏

在正式编写微信小程序先要完成注册和下载，方法参照官网：微信小程序开发者文档。

目前用到的软件有：微信小程序开发者工具、Pixso（一个设计软件，可以找到很多设计资源）。

设计中会使用到Vant Weapp组件库，添加组件库的方法参照官网：Vant Weapp - 轻量、可靠的小程序 UI 组件库。

注意：我的组件库的引入的位置为/miniprogram，官方教程的位置可能会报错。

第一步，创建项目。

项目的配置如下图，

第二步，创建初始页面。

在pages文件下新建文件夹，选择新建好的文件夹新建Page，由于我打算做个有关人工智能的简单微信小程序，先拟定有三个主要页面：首页，微体验，我。

第三步，创建导航栏。

在app.json中添加代码，

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "人工智能微体验",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh":true,
    "backgroundColor":"#DCDCDC"
  },
  
  "tabBar": {
    "custom": false,
    "color": "#6e6d6b",
    "selectedColor": "#6e6d6b",
    "borderStyle": "black",
    "backgroundColor": "#F5F5F5",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/pages/image/tabBar/index.png",
        "selectedIconPath": "/pages/image/tabBar/index-o.png"
      },
      {
        "pagePath": "pages/function/index",
        "text": "微体验",
        "iconPath": "/pages/image/tabBar/func.png",
        "selectedIconPath": "/pages/image/tabBar/func-o.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我",
        "iconPath": "/pages/image/tabBar/my.png",
        "selectedIconPath": "/pages/image/tabBar/my-o.png"
      }
    ]
  },

"window"为窗口属性，"tabBar"为导航栏属性。

"tabBar"下的"list"下的iconPath属性为页面图标的路径，selectedIconPath属性为页面被选中时的页面图标的路径，这里的图标需要自己选择喜爱的图标样式添加到image文件路径下（没有image文件夹的直接在pages下新建即可）。

成果图：

这是手机预览的界面，开发者工具端的界面会有变形。