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

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

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

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

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

教程链接：https://developers.weixin.qq.com/miniprogram/dev/
<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/
<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
<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; }
最终效果：

点击全部



点击专家：



点击公司：



 

• « 上一篇：从一个真实案例去思考团队的打造，以及战斗力和凝聚力的提升
• » 下一篇：敏捷开发----项目管理工具和实践方法