微信小程式前臺開發——實現登入，底部導航欄，頂部導航欄（分類顯示）
阿新 • • 發佈：2018-12-27
微信小程式前臺開發，實現登入功能，獲取微信頭像和微信名稱，實現底部導航欄，頂部導航欄（通過導航欄分類顯示內容）。
1、初次開發微信小程式需要去官網下載微信小程式開發工具。
2、通過官方的教程註冊小程式賬號。
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。
// 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、實現頂部導航欄。
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;
}
最終效果：
點選全部
點選專家：
點選公司：
