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

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

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

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

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

创建项目:

项目的配置如下图。

【微信小程序】初始页面和导航栏_第1张图片

创建初始页面:

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

成果图:

【微信小程序】初始页面和导航栏_第2张图片

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

你可能感兴趣的:(微信小程序,小程序,微信)