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

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

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

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

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

创建项目：

项目的配置如下图。

创建初始页面：

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

在app.json中添加代码，iconPath为图标路径，selectedIconPath为选中时的图标路径。

  "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"
      }
    ]
  },

成果图：

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