小程序基础开发（一）：配置tab底部栏页面，page和component的区别，使用component自定义头部组件样式和底部导航

最新推荐文章于 2024-09-01 22:07:00 发布

金木研-

最新推荐文章于 2024-09-01 22:07:00 发布

阅读量1.4w

点赞数 24

分类专栏：小程序 #小程序基础开发文章标签：小程序 page component 自定义顶部窗口底部窗口随顶部窗口变色而变色

本文链接：https://blog.csdn.net/qq_42050067/article/details/101797142

版权

page和component的区别

简单地说，page是官方默认组件，component是自定义组件。当你需要开发一个有特色的，可灵活配置样式的小程序，就要用到component。开发一个小程序前先确定是否需要自定义component模板来做，相对来说，page比较简单快捷，但是样式固定单一。而component可以有更多功能，例如头部返回主页按钮，头部图片背景，自定义底部导航样式和底部导航根据头部背景色而变化等等。

page模式

如果是简单功能，页面不多的小程序，即可直接配置参数，所有页面用page注册即可。官方文档

1，设置头部

"window": {
   
    "backgroundTextStyle": "下拉 loading 的样式，仅支持 dark / light	",
    "navigationBarBackgroundColor": "背景色",
    "navigationBarTitleText": "标题",
    "navigationBarTextStyle": "导航栏标题颜色，仅支持 black / white"
  },

2，设置底部

首先找几个底部的图标，分2种颜色，点击前和点击后（建议灰色和绿色）在这里插入图片描述

"tabBar": {
   
    "color": "#707070",//默认颜色
    "selectedColor": "#2DBB55",//选中后颜色
    "backgroundColor": "#FAFAFA",//背景颜色
    "list": [
      {
   
        "selectedIconPath": "image/tabBar11.png",//点击后的图标
        "iconPath": "image/tabBar1.png",//默认图标
        "pagePath": "pages/index/index",//点击后跳转的链接
        "text": "首页"//附带文字
      },
      {
   
        "selectedIconPath": "image/tabBar22.png",
        "iconPath": "image/tabBar2.png",
        "pagePath": "pages/staff/staff_index/staff_index",
        "text": "功能"
      },
      {
   
        "selectedIconPath": "image/tabBar33.png",
        "iconPath": "image/tabBar3.png",
        "pagePath": "pages/visitor/visitor_index/visitor_index",
        "text": "我的"
      }
    ]
  },

看看效果图在这里插入图片描述

3，新建页面

新建一个目录后，会有js,json,wxml和wxss4个文件，其中wxml和wxss其实就是html和css差不多，主要是配置js文件。打开js文件后可以看到默认帮你列出很多api，把你想执行的动作写到相应的api里。

特别注意的是

如需从服务器获取再进行渲染的数据，最好请求和渲染都写在onShow里，避免页面样式没加载完就开始渲染了。
在这里插入图片描述

component模式

官方文档

1，新建组件-自定义头部栏

组件例子来自于ColorUI2.0-作者【文晓港】
JS
1，在 methods配置了2个方法，分别是头部的返回上一页和返回首页,
2，properties里的4个对外属性，对应头部栏的背景色，返回主页按钮，上一页按钮和背景图

const app = getApp();
Component({
   
  /**
   * 组件的一些选项
   */
  options: {
   
    addGlobalClass: true,
    multipleSlots: true
  },
  /**
   * 组件的对外属性
   */
  properties: {
   
    bgColor: {
   
      type: String,
      default: ''
    }, 
    isCustom: {
   
      type: [Boolean, String],
      default: false
    },
    isBack: {
   
      type: [Boolean, String],
      default: false
    },
    bgImage: {
   
      type: String,
      default: ''
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
   
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    Custom: app.globalData.Custom
  },
  /**
   * 组件的方法列表
   */
  methods: {
   
    BackPage() {
   
      wx.navigateBack({
   
        delta: 1
      });
    },
    toHome(){
   
      wx.reLaunch({
   
        url: '/pages/index/index',
      })
    }<