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

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

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.jsPage({/*** 页面的初始数据*/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;
}

最终效果：

点击全部

点击专家：

点击公司：

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

微信小程序云开发欢迎登录注册
提示:此文章相关代码在新版小程序上或许已经不可用!该小程序片段需要使用云函数,云函数具体内容参考github.需要使用云开发提供的数据库,相关的具体使用方法还请参考小程序云开发的相关最新文档.该部分代 ...
微信小程序云开发之登录注册界面详细教程
文章目录前言一.前期的准备(很重要) 1.程序的需求 2.微信开发者文档 3.数据库的设计二.小程序设计阶段 1.选择开发方式 2.云开发第一步:注册微信小程序,获取小程序的 AppID 第二 ...
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验前期准备因我们的项目是根据模板创建的,需先清理掉无效的页面 ...
微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...
微信小程序-云开发下的用户注册及用户登录逻辑
文章目录一.前言二.思路分析三.这样做的好处 1.安全性 2.便捷性 3.健壮性四.实现代码 1.创建集合.配置权限 2.实现代码(app.js) 五.一些疑惑六.结语一.前言基于微信小 ...
微信小程序的开发（一）
微信小程序的开发(一) 创建项目这里的AppID就在微信公众平台注册一个小程序就有了后端服务可以选择使用微信云开发,如果有能力搭建自己的后端也可以选择不使用云服务. 然后项目的结构大概是这样子的 ...
SSM同城拼车微信小程序的开发计算机毕设源码20625
摘要伴随着科技进步和经济全球化,人民生活水乎丕断提高,拥有私家车的人群也越来越庞大.据统计,我国汽车保有量持续高速度增长,众多的车辆上路,是造成交通拥堵的最主要原因.除此之外,随着经济高速发展,城市 ...
微信小程序从零开始开发步骤（一）搭建开发环境
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...

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

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

最新文章

热门文章