微信小程序前台开发——实现登录，底部导航栏，顶部导航栏（分类显示）

最新推荐文章于 2024-08-07 22:38:02 发布
最新推荐文章于 2024-08-07 22:38:02 发布
阅读量1.7w 收藏 99
点赞数 18
文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t554984986/article/details/81751086
版权

微信小程序前台开发，实现登录功能，获取微信头像和微信名称，实现底部导航栏，顶部导航栏（通过导航栏分类显示内容）。

1、初次开发微信小程序需要去官网下载微信小程序开发工具。

 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2、通过官方的教程注册小程序账号。

教程链接：https://developers.weixin.qq.com/miniprogram/dev/

3、打开微信开发者工具新建项目。

选择项目路径，填写微信小程序管理平台上你自己的appid，填写项目名称。

可以勾选快速建立普通模板，创建基本架构。

4、app命名的文件是整个小程序的全局配置和打开小程序的初始加载内容。

   4.1修改app.json

{
  "pages": [
    "pages/gerenyemian/grym",
      "pages/gerenyemian/grzym/lishi/lishi",
      "pages/gerenyemian/grzym/sqfw/sqfw",
      "pages/gerenyemian/grzym/gzgs/gzgs",
      "pages/gerenyemian/grzym/gzzj/gzzj",
      "pages/gerenyemian/grzym/zjrz/zjrz",
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "个人中心",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "backgroundColor": "#fff",
    "color": "#A0A0A0",
    "selectedColor": "#FF3300",
    "list": [
      {
        "pagePath": "pages/shouye/index",
        "iconPath":"image/sy.png",
        "selectedIconPath": "image/sy_s.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/gongnengfuwu/index",
        "iconPath": "image/gn.png",
        "selectedIconPath": "image/gn_s.png",
        "text": "功能"
      },
      {
        "pagePath": "pages/zixunyemian/zxym",
        "iconPath": "image/zx.png",
        "selectedIconPath": "image/zx_s.png",
        "text": "咨询"
      },
      {
        "pagePath": "pages/gongsijieshao/gsjs",
        "iconPath": "image/gs.png",
        "selectedIconPath": "image/gs_s.png",
        "text": "公司"
      },
      {
        "pagePath": "pages/gerenyemian/grym",
        "iconPath": "image/gr.png",
        "selectedIconPath": "image/gr_s.png",
        "text": "个人"
      }
    ]
  }
}

ps: tabBar为小程序自带的底部导航栏

4.2在pages目录下新建gerenremian文件新建page名称为grym。

4.2.1 通过grym,js实现交互实现登录功能(js中的各个API都可以通过微信小程序API看到如何使用 链接：https://developers.weixin.qq.com/miniprogram/dev/api/)

// pages/gerenyemian/grym.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '个人中心',
    })
    wx.getSetting({
      success(res){
        if (!res.authSetting['scope.userInfo']){
          wx.authorize({
            scope: "scope.userInfo",
            success:(
              wx.getUserInfo({
                success:function(res){
                  console.log(res.userInfo)
                }
                })
              )
          }
          )
        }
      }
    })
  }
})

4.2.2编写grym.wxml实现页面的显示

<!--pages/gerenyemian/grym.wxml-->
<view class="gr">
  <view class="xingxi">
      <open-data class="touxiang" type="userAvatarUrl"></open-data>
    <open-data type="userNickName"></open-data>
  </view>
</view>
<view class="xuanxiang">
  
  <navigator class="kuang" url="../gerenyemian/grzym/lishi/lishi">
    <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/question-circle-fill.png"></image>
    <view class="text">历史咨询</view>
    <view class="right-arrow"></view>
  </navigator>
  <navigator class="kuang" url="../gerenyemian/grzym/sqfw/sqfw">
    <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/earth.png"></image>
   <view class="text">申请服务</view>
   <view class="right-arrow"></view>
  </navigator>
  <navigator class="kuang" url="../gerenyemian/grzym/gzgs/gzgs">
    <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/shop-fill.png"></image>
   <view class="text">关注公司</view>
   <view class="right-arrow"></view>
  </navigator>
  <navigator class="kuang" url="../gerenyemian/grzym/gzzj/gzzj">
   <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/team.png"></image>
   <view class="text">关注专家</view>
   <view class="right-arrow"></view>
  </navigator>
  <navigator id="kuang1" url="../gerenyemian/grzym/zjrz/zjrz">
   <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/adduser.png"></image>
   <view class="text">专家入驻</view>
   <view class="right-arrow"></view>
  </navigator>
</view>


<view class="msg">
  <text class='msg_text'>客服电话:100000000</text>
  <text class='msg_text'>如果有任何问题欢迎拨打我们的客服电话</text>
</view>

ps:可以通过在其子目录下创建多个页面通过navigator进行页面的跳转

4.2.3通过grym.wxss来对样式进行操控

/* pages/gerenyemian/grym.wxss */
.xingxi{
  display: flex;
  /* flex布局为列 */
  flex-direction: column;
  /*居中 */
  align-items: center;
}
.touxiang{
  /* 溢出内容被裁剪 */
  overflow:hidden;
  /* 此元素将显示为块级元素 */
  display: block;
  width: 160rpx;
  height: 160rpx;
  /* 边距 */
  margin: 20rpx;
  margin-top: 50rpx;
  /* 边圆角 */
  border-radius: 50%;
  /* 边框 */
  border: 2px solid #fff;
  /* 阴影 */
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  
}
.gr{
  display: flex;
  /* flex布局为列 */
  flex-direction: column;
  /* 距离顶部 */
  padding-top: 5%;
}

.xuanxiang{
  margin-top: 8%;
  margin-left: 9%;
  margin-right: 9%;
  align-items: center;
  border-radius: 4%;
  border: 1px;
  border-style: solid solid solid solid;
  border-color: gainsboro;
}

.kuang{
  
  display: flex;
  flex-direction: row;
  padding-top:3%;
  padding-left: 6%;
  padding-bottom: 1%;
  border: 1px;
  border-style: none none solid none;
  border-color: gainsboro;
}

#kuang1{
  display: flex;
  flex-direction: row;
  padding-top:3%;
  padding-left: 6%;
  padding-bottom: 1%;
  border: 1px;
  border-style: none none none none;
  border-color: gainsboro;
}

.text{
  width: auto;
  padding-top: 1%;
  padding-left: 3%;
  font-size: 15px;
 
}

.gr_image{
  height: 60rpx;
  width: 60rpx;
}

/*右箭头*/
.right-arrow {
    padding-left: 52%;
    padding-top: 3%;
    display :inline-block;
    position: relative;
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
}

.right-arrow::after {
    display: inline-block;
    content: " ";
    height: 18rpx;
    width: 18rpx;
    border-width: 5rpx 5rpx 0 0;
    border-color: #c7c7cc;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 35%;
    right: 6rpx;
    margin-top: -9rpx;
}
.msg{
  display: flex;
  /* flex布局为列 */
  flex-direction: column;
  /*居中 */
  align-items: center;
  margin-top: 9%;
}
.msg_text{
  font-size: 30rpx;
  color: #A8A8A8;
}

最终成品样式：

5、实现顶部导航栏。

顶部导航栏是通过 易雪寒的分享的代码实现的，原博客链接https://blog.csdn.net/u013521220/article/details/78923136

5.1zyym.js代码

// pages/zixunyemian/zxym.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    winWidth: 0,
    winHeight: 0,
    currentTab:0,
    currentSelect: 1,
    items: [{
      'image': "./image/a22.jpg",
      'name': '张三',
      'company': '专家',
      'title': 'XXXXXXXXXXXXXXXXXXXXXXXX',
      'type': '3'

    },
    {
      'image': "",
      'name': '赵四',
      'company': '公司',
      'title': 'YYYYYYYYYYYYYYYYYYYYYYY',
      'type': '4'

    },
    {
      'image': "",
      'name': '王五',
      'company': '公司',
      'title': 'ZZZZZZZZZZZZZZZZZZZZZZZZ',
      'type': '2'
    }

    ]
  },
  onLoad: function () {
    var that = this;

    /** 
     * 获取系统信息 
     */
    wx.getSystemInfo({

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    }),
    wx.setNavigationBarTitle({
      title: '咨询服务',
    })

  },

  /** 
     * 滑动切换tab 
     */
  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  /** 
   * 点击tab切换 
   */
  swichNav: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
})

5.2zyym.wxml代码

<!--pages/zixunyemian/zxym.wxml-->

 <!-- <view class="tabs-top">
    <view  wx:for-items="{{tabs}}" class="tab-item" bindtap='onTab' data-id="{{item.id}}">
      {{item.title}}
    </view>
  </view>
-->
<view class="swiper-tab">  
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">全部</view>  
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">专家咨询</view>  
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">公司咨询</view>  
</view>  

<swiper current="{{currentTab}}" class="swiper-box" duration="300"  style="height:{{winHeight}}px" bindchange="bindChange"> 
    <!-- 我是哈哈 -->  
  <swiper-item>  
    <view wx:for-items="{{items}}" class='page_card'>
      <view class='page-xx' >
        <image class="full-image"  src="{{item.image}}"></image>
          <view class='page-xx-text' style='width:70%'>
            <view class='xx-text-name'>
              <text class ="text-name">{{item.name}}</text>
            </view>
            <view>
              <text class ="text-company">{{item.company}}</text>
            </view>
          </view>
      </view>
      <view class="jian">
        <text class ="jian-text">{{item.title}}</text>
      </view>

      <view class="btn">
       <view style='margin:7px;display:flex;flex-direction:row;'>
          <button class="btn-wx"><image src='./image/call_3.png' style="width:19px;height:19px;"> </image> 微信咨询</button>
          <button class="btn-call"><image src='./image/call_4.png' style="width:19px;height:19px;"> </image> 电话咨询</button>
        </view>
      </view>
    </view>  
  </swiper-item>  
    <!-- 专家咨询 -->  
  <swiper-item>  
    <view wx:for-items="{{items}}" class='page_card'>
      <block wx:if="{{item.company=='专家'}}">
        <view class='page-xx' >
          <image class="full-image"  src="{{item.image}}"></image>
            <view class='page-xx-text' style='width:70%'>
              <view class='xx-text-name'>
               <text class ="text-name">{{item.name}}</text>
              </view>
             <view>
                <text class ="text-company">{{item.company}}</text>
             </view>
            </view>
        </view>
        <view class="jian">
          <text class ="jian-text">{{item.title}}</text>
        </view>

        <view class="btn">
          <view style='margin:7px;display:flex;flex-direction:row;'>
           <button class="btn-wx"><image src='./image/call_3.png' style="width:19px;height:19px;"> </image> 微信咨询</button>
            <button class="btn-call"><image src='./image/call_4.png' style="width:19px;height:19px;"> </image> 电话咨询</button>
         </view>
        </view>
      </block>
    </view>  
  </swiper-item>  
    <!-- 公司咨询 -->  
    <swiper-item>  
      <view wx:for-items="{{items}}" class='page_card'>
      <block wx:if="{{item.company=='公司'}}">
        <view class='page-xx' >
          <image class="full-image"  src="{{item.image}}"></image>
            <view class='page-xx-text' style='width:70%'>
              <view class='xx-text-name'>
               <text class ="text-name">{{item.name}}</text>
              </view>
             <view>
                <text class ="text-company">{{item.company}}</text>
             </view>
            </view>
        </view>
        <view class="jian">
          <text class ="jian-text">{{item.title}}</text>
        </view>

        <view class="btn">
          <view style='margin:7px;display:flex;flex-direction:row;'>
           <button class="btn-wx"><image src='./image/call_3.png' style="width:19px;height:19px;"> </image> 微信咨询</button>
            <button class="btn-call"><image src='./image/call_4.png' style="width:19px;height:19px;"> </image> 电话咨询</button>
         </view>
        </view>
      </block>
    </view>  
    </swiper-item>  
</swiper>  
 <!-- <view class="page-bd">
    <view  wx:for-items="{{items}}" class='page_card'>
       <view wx:if="{{item.type==currentSelect||currentSelect==1}}" class="list card">
         <view class='page-xx' >
             <image class="full-image"  src="{{item.image}}"></image>
             <view class='page-xx-text' style='width:70%'>
                <view class='xx-text-name'>
                   <text class ="text-name">{{item.name}}</text>
                </view>
                <view>
                  <text class ="text-company">{{item.company}}</text>
                </view>
              </view>
          </view>
      <view class="jian">
          <text class ="jian-text">{{item.title}}</text>
      </view>

      <view class="btn">
        <view style='margin:7px;display:flex;flex-direction:row;'>
            <button class="btn-wx"><image src='./image/call_3.png' style="width:19px;height:19px;"> </image> 微信咨询</button>
            <button class="btn-call"><image src='./image/call_4.png' style="width:19px;height:19px;"> </image> 电话咨询</button>
        </view>
      </view>
    </view>
  </view>
</view>-->

5.3zxym.wxss

/* pages/zixunyemian/zxym.wxss */
.swiper-tab{  
    width: 100%;  
    border-bottom: 2rpx solid #777777;  
    text-align: center;  
    line-height: 80rpx;}  
.swiper-tab-list{  font-size: 30rpx;  
    display: inline-block;  
    width: 33.33%;  
    color: #777777;  
}  
.on{ color: #da7c0c;  
    border-bottom: 5rpx solid #da7c0c;}  
  
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
.swiper-box view{  
  
    text-align: center;  
}  

.tab-item{
  display:inline-block;
  margin-left: 4px;
  margin-right: 4px;
  font-size: 15px;
  text-align: center;
  width: 22%;
}

.full-image{
  width:80px;
  height:80px;
  margin:13px;
  border-radius: 50px;
}
.page-xx{
  display:flex;
  flex-direction:row;
}
.xx-text-name{
  text-align: center;
  margin: 10px;
  width: 65%;
}
.text-name{
  font-size:30px;
  color:rgb(51, 20, 20);
}
.page_card{
  background:rgba(160, 160, 160, 0.295);
  margin: 8px;
  border-radius: 7px;
}

.jian-text
{
 font-size:16px;
 text-align: left;
}

.btn{
  display: flex;
 justify-content: center;
}
.btn-wx{
  display: flex;
  align-items: center;
  font-size:14px;
  background-color:#4a66c2;
}
.btn-call{
  display: flex;
  align-items: center;
  font-size:14px;
  background-color:#e67c61;
}

最终效果：

点击全部

点击专家：

点击公司：

 

鑫025
关注
微信小程序项目实例——今日美食
05-24
【微信小程序项目实例——今日美食】是一个以移动开发技术为核心，专注于美食分享的应用。这个小程序旨在为用户带来丰富的美食制作教程，提供详细的食材配料和步骤指导，让用户在家中也能轻松制作出美味佳肴。 首先...
小程序分类页实现三级分类，顶部导航栏，左侧分类栏，右侧数据列表
编程小石头
03-27 1万+
如果大家一直读石头哥的文章，或者看石头哥的视频，肯定知道，石头哥的点餐小程序有实现二级菜品或者商品分类。 如下图 但是又时候我们想实现三级分类，该怎么做呢，今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库 一，老规矩，先看效果图 先来给大家分析下原理 二，原理分析 首先来分析下有那三级 可以看出，我们最顶部是一级菜单，左侧是二级菜单，右侧是最终的三级列表。 我们来理一理层级关系 =宿舍楼号 ====宿舍号 ========学生 聪明的人肯定知道，我们是一.
微信小程序顶部导航栏
weixin_45659847的博客
12-17 839
wxml <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}...
微信小程序 - 自定义底部菜单栏
最新发布
觉醒法师的专栏
08-07 1974
微信小程序底部菜单栏是可以通过自定义来实现的。主要涉及：新建组件、编写组件代码、设置样式、配置导航栏、在页面中引用。自定义底部导航栏可以创建出符合项目设计需求效果，实现个性化的页面切换功能。
微信小程序的美发店管理系统(前台+后台)
xuqian_1234的博客
08-22 2984
后台技术框架: ssm mysql vue 小程序技术框架: wxml wxss js json 手机订餐点餐(微信小程序,前台,后台) 开发工具： wechat_devtools， IDEA, MYSQL, JDK， MAVEN 项目运行效果图如下:
微信小程序(一)：微信小程序实现底部导航菜单
qq_67449756的博客
11-18 6436
在app.json的下面输入tabBar,会直接提示 tabBar,直接回车就行，记得先打逗号分隔开哦（新手小白特别要注意！在项目目录里面创建static文件夹用于存放静态资源，在static下面创建TabBar文件夹，将你准备的icon图标放进去。以上则是我所掌握的微信小程序制作底部导航菜单的全部内容，希望能对你有帮助！复制以上四个参数，在list里面进行添加，添加四个（我的是四个）。底部导航菜单是一个经常使用的功能，有很多的好处。里面的名称自己定义哦！恭喜你完成底部导航栏的制作！
微信小程序云开发之自定义顶部导航栏搜索框（非组件）
我们好像在哪见过~
11-03 3347
隐藏原生navigationBar navigation-bar是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。
微信小程序项目实例——体质计算器
05-27
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是智能手机用户。它是腾讯公司推出的，旨在为用户提供便捷的、无需下载安装即可使用的应用服务。在这个“微信小程序项目实例——体质计算器”中，开发者...
微信小程序-顶部导航栏TopBar.zip
10-08
通过这个压缩包，开发者不仅可以学习到如何在微信小程序中实现滑动的顶部导航栏，还能了解到组件封装、性能优化以及微信小程序开发的基本流程和技巧。对于想要提升微信小程序开发技能的开发者来说，这是一个很好的...
微信小程序顶部导航栏可滑动并选中放大
10-15
微信小程序顶部导航栏可滑动并选中放大的知识点涉及了微信小程序前端开发中的几个关键技术点，包括wxss样式设计、wxml结构编写以及js逻辑处理。 首先，关于顶部导航栏的设计，使用了微信小程序组件库中的`...
微信小程序 开发之顶部导航栏实例代码
08-31
主要介绍了微信小程序 开发之顶部导航栏实例代码的相关资料,需要的朋友可以参考下
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
热门推荐
一片天空
05-11 1万+
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
（转载）微信小程序自定义头部导航栏
XZH1730932805的博客
04-16 5434
微信小程序自定义头部导航栏 先看下demo的效果： 最终要实现的效果： 在tabbar页面不显示左侧按钮； 分享出去的页面进入后不显示左侧返回按钮； 点击返回按钮可以自行设置返回层级； 字体颜色，背景颜色的设置； 左侧按钮的深浅样式切换； 使用自定义组件定义导航栏 在小程序跟目录下建立component / nav文件夹用来放我们的导航栏组件 首先在app.js中获取机型信息 onLaunch() { wx.getSystemInfo({ succe..
微信小程序顶部导航栏样式设置（自定义）
qq_45584157的博客
03-27 1498
首先在pages.json中设置"navigationStyle": “custom” , "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "navigationStyle": "custom" , //自定.
【小程序】固定导航栏在顶部，跟随下滑
Z_hongli的博客
11-17 3037
【小程序】固定导航栏在顶部，跟随下滑一、效果演示二、实现原理三、相关代码1.说明（一定要看）1.wxml2.wxss3.js 一、效果演示 二、实现原理 在js中有一个函数是用来监听页面的滑动的，这个函数叫做onPageScroll，下面是我从官网上面查到的有关信息 我们可以利用这个函数的功能，获取页面在垂直方向已经滚动的距离，当滚动的距离达到一定数值时，我们通过js来改变样式，让原有的模块固定住不再移动 三、相关代码 1.说明（一定要看） 我把整个页面的代码全部拷过来了，wxml中最上面的部分是导航栏
微信小程序——顶部导航标题栏、底部选项卡
qq_41141657的博客
03-01 1651
顶部导航标题、底部选项卡均写在app.json中 顶部导航 navigationBarBackgroundColor——顶部背景颜色 navigationBarTitleText——文字内容 navigationBarTitleText——文字颜色 "window":{ "backgroundTextStyle":"light", "color": "#fff", "n.
微信小程序自定义顶部导航栏
Loehr0319的博客
04-17 2843
微信小程序自定义顶部导航栏效果预览代码片段完成效果 效果预览 代码片段 .wxml.代码 <view class="nav-header"> <view wx:for="{{navs}}" wx:key='' class="nav-cell {{item.alias==activeNav?'active':''}}" bindtap="changeList" data-al...
微信小程序 顶部搜索框滑动伸缩效果的实现
water_road的博客
12-04 1771
微信小程序顶部搜索框随页面滑动伸缩效果（以及px转换rpx的方法） `提示：实现搜索框跟随用户滑动页面，实现伸缩效果` 微信小程序 顶部搜索框滑动伸缩动画的实现
uniapp开发微信小程序自定义顶部导航栏
03-31 764
⾃定义导航栏后页⾯就成了全屏状态，如果还要⾃定义导航栏，那么就需要重新计算导航栏的⾼度，让其⼀直 fixed 在头部。⼩程序⾃定义导航栏⾼度计算。
微信小程序底部导航栏开发教程与素材分享
微信小程序底部导航栏开发指南 在微信小程序的开发中，底部导航栏是一种常见的交互设计，它为用户提供直观且易于操作的界面导航。本文将详细介绍如何在微信小程序中设置美观且功能齐全的底部导航栏。 首先，要实现...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值