微信小程序页面实战 得物小程序(一):顶部标题与底部导航

JRong
279 阅读2分钟

微信小程序是一种轻量级的应用程式，它不需要用户下载安装即可在微信内运行。小程序依托于微信这个巨大的社交平台，为用户提供便捷的服务和丰富的功能体验。自2017年推出以来，微信小程序迅速发展，覆盖了包括电商、社交、娱乐、教育、生活服务、工具等多个领域。

最近对微信小程序很感兴趣，想知道在日常生活中如此方便的小程序是如何做出来的，在好奇心的驱使下，自己上网搜索了应该如何做一个微信小程序，使我受益匪浅，今天先来看看得物App的小程序的顶部标题和底部导航跳转该如何实现。图标来自iconfont-阿里巴巴矢量图标库

先来看看效果图。

image.pngimage.png

首先，咱们需要在app.json文件中修改顶部标题navigationBarTitleText。

"navigationBarTitleText": "得物App"

添加页面

接下来咱们需要添加三个页面，以达到点击底部导航跳转页面功能，分别为index购物，Differential鉴别，Wash洗护，User我的

image.png

    "pages/Differential/Differential",
    "pages/Wash/Wash",
    "pages/User/User"

添加底部导航，绑定pagePath实现跳转

接下来咱们在app.json文件中添加tabBar底部导航，list中pagePath绑定wxml文件路径，分别对应需要实现功能名称。

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "购买",
    },
    {
      "pagePath": "pages/Differential/Differential",
      "text": "鉴别",
    },
    {
      "pagePath": "pages/Wash/Wash",
      "text": "洗护",
    },
    {
      "pagePath": "pages/User/User",
      "text": "我的",
    }
  ]
  }

让我们来看看当前实现的效果图吧

image.png

添加图标，使页面更美观

很明显，总感觉少了点什么东西，没错，咱少了图标。此处附上iconfont-阿里巴巴矢量图标库方便大家从里面获取图标。选择好图标下载后，将文件导入到资源中。

image.png

再将线性图片与"iconPath"进行绑定，将面性图片与"selectedIconPath"进行绑定，以达到选中时，图标颜色变化。以下为部分代码示例。

{
      "pagePath": "pages/index/index",
      "text": "购买",
      "iconPath": "image/gouwu-xianxing.png",
      "selectedIconPath": "image/gouwu-mianxing.png"
}

绑定后就可以实现底部导航功能啦，以上就是初步实现的得物小程序功能，后续会继续更新，添加新的功能与页面，看完觉得还不错可以点点赞哦~

avatar
文章
阅读
粉丝