微信小程序的tabBar

微信小程序的代码其实和vue是很相似的,虽然我从来没有做过小程序,但是看着文档和度娘上面那些demo,摸摸索索还是可以写点东西出来的。
今天是国庆收假回来第一天上班,后端哥们都请假了,我一个人不知道干啥,所以就想着自己试试做小程序吧。说干就干,跟着文档在微信公众平台注册了微信号,然后一步步完成就开始创建自己项目了,今天就写了一个主界面和底部tabbar。
先看一下效果图:
在这里插入图片描述

下面是demo代码

 "tabBar": {
    "color": "#000",
    "selectedColor": "#ea5b2a",
    "borderStyle": "black",
    "backgroundColor": "#e6e6e6",
    "list": [
      {
        "selectedIconPath": "image/home.png",
        "iconPath": "image/home1.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "image/exam.png",
        "iconPath": "image/exam1.png",
        "pagePath": "pages/examBottom/exam",
        "text": "考试"
      },
      {
        "selectedIconPath": "image/practice.png",
        "iconPath": "image/practice1.png",
        "pagePath": "pages/practiceBottom/practice",
        "text": "练习"
      },
      {
        "selectedIconPath": "image/course.png",
        "iconPath": "image/course1.png",
        "pagePath": "pages/courseBottom/course",
        "text": "课程"
      }
    ]
  },

看一下这就是小程序的tabbar,是写在app.json文件里面的,它的目录结构也和vue很相似
在这里插入图片描述
而具体界面内容就是写在pages文件夹里面。你在pages文件夹里面创建新的文件夹后点击右键“新建page”,然后就会自动生成js文件,json文件,wxml和wxss四个文件。
下面这个就是我花了一天时间写的东西,(其实都是空白文件),只有路由跳转和title的改变。
在这里插入图片描述
title的改变我是在每一个文件夹里面的每一个json文件里面添加

"navigationBarTitleText": "",

后知后觉,小程序那么多,我还没有自己研究过,慢慢搞吧!每天学一点,然后被时代的潮流淹没。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值