微信小程序学习笔记（暑假）_微信小程序凡高假期作业-优快云博客

本文链接：https://blog.youkuaiyun.com/Yuan_mingyu/article/details/97760859

本文分享了微信小程序自定义导航栏的实现方法，包括根据用户角色动态调整底部导航栏，以及顶部导航的设置。此外，还介绍了时间戳转换为日期格式、计算年龄的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前边

最近写了一个微信小程序，负责前端部分，加起来断断续续写了20天左右。最开始接触微信小程序，是在去年暑假，大概一年前，当时简单知道一点前端的知识，照着网上的教程写了一些小程序的界面，对于wxml、wxss、js、json也不怎么理解。这一年通过学习，跟着做了一些界面和系统，现在对前端的理解比当时要好了不少。这次的小程序前端是自己完成的，写的过程中遇到了一些困难，有的甚至花费了比较长的时间才解决，写这篇的目的就是把自己踩过的坑和难题记录一下，趁现在还记得，之后遇到忘了，就可以找这篇笔记了。

ps:文中涉及到的参考，都将在文末附上链接。

1. 自定义导航栏

由于需要，小程序是通过用户名和密码登录的，不是通过微信授权登录。小程序本身自带tabBar，但是无法动态改变，小程序用户角色不同，需要显示的导航栏不同，这时，就需要自定义导航栏了。开始查资料的时候，有已经写好的底部导航栏，可以动态改变，于是直接复制过来，但是很快发现了问题：底部导航栏的固定使用的是 position：fixed，bottom：0 ，也就是固定在底部。这时的问题是，导航栏会和正文部分内容重叠。于是又去问度娘，有解决方法说，给正文部分加一个padding-bottom就行，不过我自己试了好多遍，修改了好多，还是无法解决重叠的问题，这个问题困扰了我好久，，后来终于查到了一篇博客，解决了问题。

根据登录角色不同，设置底部导航栏

首先，新建一个文件夹，封装底部导航栏
在这里插入图片描述
其中只需完成tabBar.wxml，样式直接放在app.wxss中

tabBar.wxml

<template name="tabBar">   
  <view class="tab-bar" style="color: {{tabBar.color}};backgroundcolor:white" > 
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">    
    <navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">    
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>    
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>  
      <text class='tabbar_text' style='display:block'>{{item.text}}</text> 
    </navigator>    
    </block>  
    <view class="clear"></view>    
  </view>    
</template>

app.wxss

.container {
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
/* 角色1 */
.menu-item{
  width: 25%;  
  float: left;  
  text-align: center; 
  padding: 0;  
  padding-top: 15rpx; 
  background-color: white;
}  
/* 角色2 */
.menu-item1{  
  width: 33.3%;  
  float: left;  
  text-align: center; 
  padding: 0; 
  padding-top: 15rpx;  
  background-color: white;
}  
/* 角色3 */
.menu-item2{
  width: 50%;  
  float: left;  
  text-align: center; 
  padding: 0;  
  padding-top: 15rpx;  
  background-color: white;
}
.img{  
  width: 35rpx;  
  height: 35rpx;  
  display: block;  
  margin:auto;  
}  
.clear{  
  clear: both;  
}  
.tab-bar{ 
  width: 100%;  
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(109, 82, 82, 0.1);
}  
.tabbar_text{
  margin-top: 5rpx;
  margin-bottom: 8rpx;
  font-size: 24rpx
}

调用导航栏，根据角色动态改变
实现原理：
小程序中每个页面都有自己的导航栏，即在每个页面中调用相应角色的导航栏

调用函数定义
直接写在app.js中
在这里插入图片描述
app.js

//角色1 
  editTabBar0: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar0;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },

  //角色2  
  editTabBar1: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar1;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },  

  //角色3  
  editTabBar2: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar2;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },

同时，将导航栏参数，放在全局变量中

app.js

  globalData: {
    userInfo: null,
    tabBar0: {
      "color": "#747474",
      "selectedColor": "#D03A28",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "text": "医疗服务",
          "iconPath": "../images/bars/medical1.png",
          "selectedIconPath": "../images/bars/medical.png",
          "clas": "menu-item",
          "selectedColor": "#D03A28",
          active: true
        },
        {
          "pagePath": "/pages/daily/daily",
          "text": "日常服务",
          "iconPath": "../images/bars/daily1.png",
          "selectedIconPath": "../images/bars/daily.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        },
        {
          "pagePath": "/pages/class/class",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        },
        {
          "pagePath": "/pages/oldcenter/oldcenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        }
      ],
      "position": "bottom"
    },

    tabBar1: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/daily_volunteer/daily_volunteer",
          "text": "日常服务",
          "iconPath": "../images/bars/daily1.png",
          "selectedIconPath": "../images/bars/daily.png",
          "clas": "menu-item1",
          "selectedColor": "#D03A28",
          active: true
        },
        {
          "pagePath": "/pages/volunteer_service/volunteer_service",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item1",
          active: false
        },
        {
          "pagePath": "/pages/volunteercenter/volunteercenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item1",
          active: false
        }
      ],
      "position": "bottom"
    },

    tabBar2: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/admin_activity/admin_activity",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item2",
          active: true
        },
        {
          "pagePath": "/pages/admincenter/admincenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item2",
          active: false
        }
      ],
      "position": "bottom"
    },
  }

页面中调用举例

example.wxml

<import src="../template/tabBar.wxml"/>
<view>正文</view>
<template is="tabBar" data="{{tabBar:tabBar}}"></template>

example.js

const app = getApp();
Page({
		onLoad: function (options) {
		 app.editTabBar0();//加载底部导航栏,角色1
		}
	})

总结：在登录时判断用户角色，跳转到相应角色的首页，之后按照上述过程，在每个界面调用相应的导航栏即可。

底部导航栏实现

角色1
在这里插入图片描述
角色2

角色3

顶部导航

为了方便显示更多内容，有时候需要在界面顶部设置分页的tab，减少页面跳转。
在这里插入图片描述
这个的实现比较简单，通过设置两个顶部栏的点击事件，来控制顶部栏样式的改变和正文部分view的显示隐藏即可。微信小程序与网页不同，js改变样式、属性等，都是通过绑定js中的data来实现。

顶部和底部导航固定

由于正文部分高度不确定，因此页面的基本结构设置成：顶部和底部固定，中间部分滚动

基本框架

wxml

<view class='wraper'>
  <view class='header'>header</view>
  <view class='main'>
    <scroll-view class='main-scroll' scroll-y style="height: 100%">
      <view class='main-list'>
      main
      </view>
    </scroll-view>
  </view>
  <view class='footer'>footer</view>
</view>

wxss

page{
  width: 100%;
  height:100%;
}

.wraper{
  display: flex;
  flex-direction: column;
  width: 100%;
  height:100%;
}

.main{
  flex: 1;
  position: relative;
}

.main-scroll{
  position: absolute;
}

.main-list{
  display: flex;
  flex-wrap: wrap;
}

使用：将已经实现的顶部和底部导航放在框架的header和footer位置。

2.文字样式

垂直居中

在之前写网页的时候，把文字或div放在外层div中，设置成垂直居中（即内层文字或div距离外层大的div上下边沿距离相等），只需要让外层div的height与line-height值相等，但是在小程序中这样设置是有问题的。花费了好久查到，解决办法：给外层div设置高度后，line-height：100%

text高度问题

text标签会自带一个默认的高度，如果想取消高度，给text加属性：display:block

3.时间戳

这个在网上的资料很多，比较容易查到。
注：时间戳包括10位和13位两种，小程序中默认生成的时间戳是13位的。两者的区别是精度不同，13位精确到毫秒，10位精确到秒。实际上，13位时间戳只是比10位的末尾多了000，如果想要转化只要乘除1000即可。

时间戳转日期

在utils.js中定义函数
在这里插入图片描述

//时间戳转日期
function js_date_time(number, format) {
  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  var returnArr = [];
  number = number/1000;
  var date = new Date(number * 1000);
  returnArr.push(date.getFullYear());
  returnArr.push(formatNumber(date.getMonth() + 1));
  returnArr.push(formatNumber(date.getDate()));
  returnArr.push(formatNumber(date.getHours()));
  returnArr.push(formatNumber(date.getMinutes()));
  returnArr.push(formatNumber(date.getSeconds()));

  for (var i in returnArr) {
    format = format.replace(formateArr[i], returnArr[i]);
  }
  return format;
}

module.exports = {
  js_date_time: js_date_time //时间戳
}

调用举例：

example.js

var util = require('../../utils/util.js');
var time = util.js_date_time('要转化的时间戳', 'Y/M/D h:m:s');

日期转时间戳

var time = new Date('日期'.getTime()),

注：此处的日期应该为
在这里插入图片描述
如果不是，需要转化成这个格式后再使用

通过生日时间戳计算当前年龄

考虑到用户年龄随时间变化，因此数据库中存的是用户的生日（年、月、日），格式为时间戳。
前端需要根据生日，计算显示出用户现在的年龄。

var util = require('../../utils/util.js');

//获取当前时间
var time1 = util.formatTime(new Date());
    time1 = new Date(time1).getTime();
//定义当前时间数组、生日时间数组
var nowArray = util.js_date_time(time1, 'Y/M/D').split('/');
var birthArray = util.js_date_time(this.data.year, 'Y/M/D').split('/');
//计算年龄
var old = nowArray[0] - birthArray[0];
if (nowArray[1] < birthArray[1]) {
   old = old - 1;
 }
else if (nowArray[1] == birthArray[1]) {
  if (nowArray[2] < birthArray[2]) {
    old = old - 1;
  }
}

4.wx.request

小程序中前端访问后台数据库，使用的wx.request方法，与网页中jquery的ajax相似。

基本格式

基本格式与ajax很相似，参数的含义基本是一样的。
区别：header部分是ajax中没有的，但是很简单，参数是固定的。

举例

wx.request({
      url: 'http://localhost:8081/usualService/addVolunteerService',
      data: {
        token: app.globalData.token
      },
      method: 'GET',
      header: {
        'content-type': 'application/json',
      },
      success: function (res) {
        console.log(res);
       }
    })

详细可以参考官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

this使用

之前在学习写网页的时候，也记得有过this这个东西，但是当时也没太深究它的用法。可是到了小程序中，this变得常用了。尤其是js中遇到给data赋值的时候，要用this.setData( )。

在wx.request中，又是也会遇到需要在请求成功的回调函数中实现对data的赋值，如果这个时候，也像之前一样this.setData( )，就会发现报错了，原因是此处this不再是你想指代的那个this了。
在成功回调函数中使用this，其实此时的this指代的是包含success函数的wx.request方法了，并不是你想指代的那个Page。

所以，要想在此处给Page中的data赋值，要在wx.request调用之前，把this保存下来

test:function()
{
    var that = this;
	wx.request({
      url: '',
      data: { },
      method: 'GET',
      header: {
        'content-type': 'application/json',
      },
      success: function (res) {
          that.setData({});
       }
   )}
}