小程序入门到实现底部导航栏tabbar

其他 2019-06-11 04:39:05 阅读次数: 0

参考文档

小程序开发·指南·框架·API等
小程序介绍·开发·注册·主体信息·支付
小程序·开发支持
开发者社区
小程序·云开发

Hello World!

  1. 下载微信开发者工具
  2. 登录微信公众平台官网
  3. 登录后即可看到后台，没登录先注册
    后台
  4. 拉到最底部里面可以查看或则设置你的AppID
  5. 打开我们的微信开发者工具，新建一个项目。
  6. 接下来可以使用我们自己的ID,或则点击小程序测试号，生成一个测试号
    id
  7. 你的第一个小程序项目就这样诞生了
    第一个hello world
  8. 恭喜你成功生成第一个hello world!要开香槟庆祝记得艾特我。
  9. 如果需要设置合法域名，在后台找到开发，点击开发设置，可以设置你的域名，当然，同时这里也可以设置你的id
    域名
  10. 当然，如果在开发中可以直接使用微信开发者工具不校验域名，在详情那里
    图片

什么是小程序

微信小程序，简称小程序，英文名Mini Program。小程序是一种不需要下载安装即可使用的应用，它体现了应用“触手可及”的梦想（用户扫一扫，或则搜一搜即可打开应用）.也体现了“用完即走”的理念；用户不用关心是否安装太多应用的问题。应用将无处不在，随即可用，但又不需要安装卸载。

从网页开发迁移到小程序开发

对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

线程和环境
  1. 网页开发渲染线程和脚本线程是互斥的，也就是长时间的脚本运行会导致页面失去响应。
  2. 而在小程序中，二者是分开的，分别运行在不同的线程中。逻辑层运行在 JSCore 中，并没有一个完整浏览器对象。JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。而其中 WXML 模板和 WXSS 样式工作在渲染层，渲染层的界面使用了WebView 进行渲染；一个小程序存在多个界面，所以渲染层存在多个WebView线程
代码构成
  1. 网页开发的代码是:html+css+js,这样的组合
  2. 而小程序的代码结构是：JSON配置+WXML 模板+WXSS 样式+JS 逻辑交互。其中 WXML 充当的就是类似 HTML 的角色。WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改，比如尺寸单位rpx。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

底部导航栏的实现上集

小程序全局配置详解

首先要了解app.json
  • 原本的代码结构
{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}
  • 既然是json文件，我们不能在里面添加字段，而且必须使用双引号
  • pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
  • window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
  • 如果我们想要定义一个文件的话，直接在pages字段里面写入
添加两个文件
"pages": [
    "pages/index/index",
    "pages/demo1/demo1",
    "pages/demo2/demo2"
  ],

这样就会自动生成两个组件了，而logs没有配置则不会导航到。如果想要导航到该页面，点击普通编译，切换为添加编译模式即可
切换编译模式

生成底部导航栏

在app.json添加tabBar字段，在和pages和window同级字段下添加

{
  "pages": [
    ......
  ],
  "window": {
	......
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/demo1/demo1",
        "text": "案例1"
      },
      {
        "pagePath": "pages/demo2/demo2",
        "text": "案例2"
      }
    ]
  }
}
看完导航栏会觉得干瘪瘪的，添加一个路径给它
  • 在项目新建文件夹assets，放入六张小于40kb，尺寸为 81px * 81px的图片icon，配置iconPath和selectedIconPath
    效果如图
  • list代码如下
"list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/home.png",
        "selectedIconPath": "assets/home-active.png"
      },
      {
        "pagePath": "pages/demo1/demo1",
        "text": "案例1",
        "iconPath": "assets/message.png",
        "selectedIconPath": "assets/message-active.png"
      },
      {
        "pagePath": "pages/demo2/demo2",
        "text": "案例2",
        "iconPath": "assets/profile.png",
        "selectedIconPath": "assets/profile-active.png"
      }
    ]
  • 当然可以改字体颜色和背景颜色等
"tabBar": {
    "color": "#66ccff",
    "selectedColor": "#e8cd56",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
		......
    ]
  },
  • 最后的效果如下
    如图
  • 关于导航栏的说明
    list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象。配置入下图
    解释

自定义tabbars

当有时候我们想改一下字体大小，或则想要选中时让导航更加突出,app.json已经没有属性直接配置满足我们人类的需要了…微信小程序给我们提供了自定义的tabbars…接下来通过字段custom配置自定义组件…不管东西南北风，现在我们的tabs引入"custom": true,，然后发现底部导航栏不见了
底部导航栏隐藏了

  1. 在项目根目录下添加 tabBar 代码文件，如下图
    如图
  2. 在index.js写入我们的数据
Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "首页",
        iconPath: "/assets/home.png",
        selectedIconPath: "/assets/home-active.png"
      },
      {
        pagePath: "/pages/demo1/demo1",
        text: "案例1",
        iconPath: "/assets/message.png",
        selectedIconPath: "/assets/message-active.png"
      },
      {
        pagePath: "/pages/demo2/demo2",
        text: "案例2",
        iconPath: "/assets/profile.png",
        selectedIconPath: "/assets/profile-active.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      this.setData({
        selected: data.index
      })
    }
  }
})
  1. 在index.json里面写入
{
  "component": true
}
  1. 在模板文件index.wxml写入我们的样式，覆盖原先的文件
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>
  1. 接下来只是样式问题了index.wxss
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}
  1. 接下来需要在各个组件内部配置"usingComponents": {},比如page/index/index.json
    如图
  2. 需要什么样式和功能直接改js或css即可
  3. 推荐用 fixed 在底部的 <cover-view> + <cover-image> 组件渲染样式，以保证 tabBar 层级相对较高。
  4. data是界面和逻辑之间的桥梁，而且微信使用单向数据流绑定，就像react一样，更改数据使用的是setState,所以小程序如果同样改变数据需要的绑定一个方法

实现底部导航栏大结局

以上是官方直接给我们提供的导航栏，回想我们的MVVM框架，比如vue，它实现导航router-link,而react使用的是Link,ng直接在里面添加routerLink；也是一个元素（标签）实现跳转。那么我们可以直接使用元素跳转即可

navigator

其实就是页面链接。我们如果要实现自定义导航栏，如果是页面内部跳转,我们需要使用url:当前小程序内的跳转链接,target: 在哪个目标上发生跳转，默认当前小程序，open-type:跳转方式,默认：navigate（，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。）;其余属性和方法查看：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
当然基本高亮样式都是必不可少的，hover-class

实现顶部导航栏吧
  1. 新建一个项目，在新建三个组件
  "pages": [
    "pages/index/index",
    "pages/nav/nav",
    "pages/nav1/nav1"
  ],
  1. 我们在index.wxml,nav.wxml,nav1.wxml相同的代码
<view class="btn-area">
  <navigator
    url="../index/index"
    hover-class="navigator-hover"
    class='nav'
    open-type='redirect'
  >
    跳转到index
  </navigator>
  <navigator
    url="../nav/nav"
    hover-class="navigator-hover"
    class='nav'
  >
    跳转到nav
  </navigator>
  <navigator
    url="../nav1/nav1"
    hover-class="navigator-hover"
    class='nav'
  >
    跳转到nav1
  </navigator>
</view>
  1. 先输入相同的样式(index.wxss,nav.wxss,nav1.wxss)
.btn-area{
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.nav{
  flex: 1;
  text-align: center;
  font-size: 12px;
  padding-bottom: 10px;
}
  1. 在每一个样式添加高亮类
  2. index.wxss
.nav:first-child{ 
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}
  1. nav.wxss
.nav:nth-child(2){ 
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}
  1. nav1.wxss
.nav:last-child{ 
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}
  1. 观看一下样式默认会出现返回按钮，这显然不是我们想要的
    如果
  2. 我们可以利用redirect，来实现，例如当index.wxml跳转到nav.wxml时不要出现返回按钮
  <navigator
    url="../nav/nav"
    hover-class="navigator-hover"
    class='nav'
    open-type='redirect'
  >

结果
大体思路都一致，其它补全即可。
10. 但是我们发现有动画效果，因为它没有像我们的MVVM框架一样有路由填坑，比如：router-view，而且如果强制设置动画或路由属性，也达不到效果
11. 而且冗杂的代码，加上其它

实现顶部导航栏第二部

  • 本以为上面那种自定义可以实现的话，我们可以自己写一些样式加上去即可，想怎么自定义就怎么自定义。所以我们用普通的元素来实现即可
  • 按照我们学网页的思路来写，点击添加一个类高亮的方式
  • 我们接着循环数据：wxml
<!--index.wxml-->
<view class="container">
  <view wx:for="{{nav}}" wx:key="item.id" data-index='{{item.id}}' class='nav {{type==item.id?"active":""}}' bindtap='changeType'>{{item.name}}</view>
</view>
  • wxss
.container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.nav{
  font-size: 16px;
  text-align: center;
  padding-bottom: 10px;
  flex: 1;
}
.active{
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}
  • js
//logs.js

Page({
  data: {
    nav:[
      { id: 1, name: 'nav1' },
      { id: 2, name: 'nav2' },
      { id: 3, name: 'nav3'},
    ],
    type:1
  },
  onLoad: function (options) {
    this.data.nav.forEach((item,i)=>{
      if(this.data.type == item.id){
        
      }
    })
  },
  changeType(){
    console.log(111)
  }
})
  • 只需要改变type即可成功，因为微信是单向数据绑定和react有点像，都是需要set数据或状态
  changeType:function(event){
    this.setData({
      type:event.target.dataset.index
    })
    
  }
  • 如果有什么需求这样的自定义导航栏更容易满足，因为样式都是我们自己写，而界面只需要根据导航栏获取数据即可

当然有时候导航栏在顶部，或则说为了和页面协调，我们有时需要配置window

了解window的配置，上代码
  "window": {
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#fffade",
    "backgroundTextStyle":"dark"
  },

"enablePullDownRefresh"要开启才能下拉出现背景剖析

扫描二维码关注公众号，回复： 6399158 查看本文章

http://www.cnblogs.com/xiao-ling-zi/p/9329612.html
https://www.jianshu.com/p/04bf1103e40a

猜你喜欢

转载自blog.csdn.net/weixin_41105030/article/details/89957602
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022