├── pages ├── middle │ ├── middle.json │ ├── middle.wxss │ ├── middle.wxml │ └── middle.js ├── mine │ ├── mine.wxss │ ├── mine.json │ ├── mine.wxml │ └── mine.js └── index │ ├── index.json │ ├── index.wxss │ ├── index.wxml │ └── index.js ├── tabbarComponent ├── tabbar.json ├── icon │ ├── icon_home.png │ ├── icon_mine.png │ ├── icon_home_HL.png │ ├── icon_mine_HL.png │ └── icon_release.png ├── tabbar.wxml ├── tabbar.js └── tabbar.wxss ├── app.wxss ├── utils └── util.js ├── project.config.json ├── app.json └── app.js /pages/middle/middle.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/mine/mine.wxss: -------------------------------------------------------------------------------- 1 | /* pages/mine/mine.wxss */ -------------------------------------------------------------------------------- /pages/middle/middle.wxss: -------------------------------------------------------------------------------- 1 | /* pages/middle/middle.wxss */ -------------------------------------------------------------------------------- /tabbarComponent/tabbar.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /pages/middle/middle.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/middle/middle.wxml 3 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "tabbar": "../../tabbarComponent/tabbar" 4 | } 5 | } -------------------------------------------------------------------------------- /pages/mine/mine.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "tabbar": "../../tabbarComponent/tabbar" 4 | } 5 | } -------------------------------------------------------------------------------- /tabbarComponent/icon/icon_home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dt8888/tabbar/HEAD/tabbarComponent/icon/icon_home.png -------------------------------------------------------------------------------- /tabbarComponent/icon/icon_mine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dt8888/tabbar/HEAD/tabbarComponent/icon/icon_mine.png -------------------------------------------------------------------------------- /tabbarComponent/icon/icon_home_HL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dt8888/tabbar/HEAD/tabbarComponent/icon/icon_home_HL.png -------------------------------------------------------------------------------- /tabbarComponent/icon/icon_mine_HL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dt8888/tabbar/HEAD/tabbarComponent/icon/icon_mine_HL.png -------------------------------------------------------------------------------- /tabbarComponent/icon/icon_release.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dt8888/tabbar/HEAD/tabbarComponent/icon/icon_release.png -------------------------------------------------------------------------------- /pages/mine/mine.wxml: -------------------------------------------------------------------------------- 1 | 2 | 我的页面 3 | 4 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .userinfo { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .userinfo-avatar { 9 | width: 128rpx; 10 | height: 128rpx; 11 | margin: 20rpx; 12 | border-radius: 50%; 13 | } 14 | 15 | .userinfo-nickname { 16 | color: #aaa; 17 | } 18 | 19 | .usermotto { 20 | margin-top: 200px; 21 | } -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{userInfo.nickName}} 8 | 9 | 10 | 11 | {{motto}} 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.2.2", 15 | "appid": "wx675e51b07d49a1b9", 16 | "projectname": "%E8%87%AA%E5%AE%9A%E4%B9%89Tabbar", 17 | "isGameTourist": false, 18 | "condition": { 19 | "search": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "conversation": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "game": { 28 | "currentL": -1, 29 | "list": [] 30 | }, 31 | "miniprogram": { 32 | "current": -1, 33 | "list": [] 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/middle/middle", 5 | "pages/mine/mine" 6 | ], 7 | "window": { 8 | "navigationBarBackgroundColor": "#fdb92c", 9 | "navigationBarTitleText": "tabBar" 10 | }, 11 | "tabBar": { 12 | "backgroundColor": "#ffffff", 13 | "color": "#979795", 14 | "selectedColor": "#1c1c1b", 15 | "list": [ 16 | { 17 | "pagePath": "pages/index/index", 18 | "text": "首页", 19 | "iconPath": "tabbarComponent/icon/icon_home.png", 20 | "selectedIconPath": "tabbarComponent/icon/icon_home_HL.png" 21 | }, 22 | { 23 | "pagePath": "pages/mine/mine", 24 | "text": "我的", 25 | "iconPath": "tabbarComponent/icon/icon_mine.png", 26 | "selectedIconPath": "tabbarComponent/icon/icon_mine_HL.png" 27 | } 28 | ] 29 | } 30 | } -------------------------------------------------------------------------------- /pages/middle/middle.js: -------------------------------------------------------------------------------- 1 | // pages/middle/middle.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /tabbarComponent/tabbar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.text}} 7 | 8 | 9 | 10 | {{item.text}} 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /pages/mine/mine.js: -------------------------------------------------------------------------------- 1 | // pages/mine/mine.js 2 | const app = getApp(); 3 | Page({ 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | //tabbar 9 | tabbar: {}, 10 | }, 11 | 12 | /** 13 | * 生命周期函数--监听页面加载 14 | */ 15 | onLoad: function (options) { 16 | app.editTabbar(); 17 | }, 18 | 19 | /** 20 | * 生命周期函数--监听页面初次渲染完成 21 | */ 22 | onReady: function () { 23 | 24 | }, 25 | 26 | /** 27 | * 生命周期函数--监听页面显示 28 | */ 29 | onShow: function () { 30 | 31 | }, 32 | 33 | /** 34 | * 生命周期函数--监听页面隐藏 35 | */ 36 | onHide: function () { 37 | 38 | }, 39 | 40 | /** 41 | * 生命周期函数--监听页面卸载 42 | */ 43 | onUnload: function () { 44 | 45 | }, 46 | 47 | /** 48 | * 页面相关事件处理函数--监听用户下拉动作 49 | */ 50 | onPullDownRefresh: function () { 51 | 52 | }, 53 | 54 | /** 55 | * 页面上拉触底事件的处理函数 56 | */ 57 | onReachBottom: function () { 58 | 59 | }, 60 | 61 | /** 62 | * 用户点击右上角分享 63 | */ 64 | onShareAppMessage: function () { 65 | 66 | } 67 | }) -------------------------------------------------------------------------------- /tabbarComponent/tabbar.js: -------------------------------------------------------------------------------- 1 | // tabBarComponent/tabBar.js 2 | const app = getApp(); 3 | Component({ 4 | /** 5 | * 组件的属性列表 6 | */ 7 | properties: { 8 | tabbar: { 9 | type: Object, 10 | value: { 11 | "backgroundColor": "#ffffff", 12 | "color": "#979795", 13 | "selectedColor": "#1c1c1b", 14 | "list": [ 15 | { 16 | "pagePath": "pages/index/index", 17 | "iconPath": "icon/icon_home.png", 18 | "selectedIconPath": "icon/icon_home_HL.png", 19 | "text": "首页" 20 | }, 21 | { 22 | "pagePath": "pages/middle/middle", 23 | "iconPath": "icon/icon_release.png", 24 | "isSpecial": true, 25 | "text": "发布" 26 | }, 27 | { 28 | "pagePath": "pages/mine/mine", 29 | "iconPath": "icon/icon_mine.png", 30 | "selectedIconPath": "icon/icon_mine_HL.png", 31 | "text": "我的" 32 | } 33 | ] 34 | } 35 | } 36 | }, 37 | 38 | /** 39 | * 组件的初始数据 40 | */ 41 | data: { 42 | isIphoneX: app.globalData.systemInfo.model == "iPhone X" ? true : false, 43 | }, 44 | 45 | /** 46 | * 组件的方法列表 47 | */ 48 | methods: { 49 | 50 | } 51 | }) 52 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | //tabbar 8 | tabbar: {}, 9 | motto: 'Hello World', 10 | userInfo: {}, 11 | hasUserInfo: false, 12 | canIUse: wx.canIUse('button.open-type.getUserInfo') 13 | }, 14 | 15 | onLoad: function () { 16 | app.editTabbar(); 17 | if (app.globalData.userInfo) { 18 | this.setData({ 19 | userInfo: app.globalData.userInfo, 20 | hasUserInfo: true 21 | }) 22 | } else if (this.data.canIUse){ 23 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 24 | // 所以此处加入 callback 以防止这种情况 25 | app.userInfoReadyCallback = res => { 26 | this.setData({ 27 | userInfo: res.userInfo, 28 | hasUserInfo: true 29 | }) 30 | } 31 | } else { 32 | // 在没有 open-type=getUserInfo 版本的兼容处理 33 | wx.getUserInfo({ 34 | success: res => { 35 | app.globalData.userInfo = res.userInfo 36 | this.setData({ 37 | userInfo: res.userInfo, 38 | hasUserInfo: true 39 | }) 40 | } 41 | }) 42 | } 43 | }, 44 | getUserInfo: function(e) { 45 | console.log(e) 46 | app.globalData.userInfo = e.detail.userInfo 47 | this.setData({ 48 | userInfo: e.detail.userInfo, 49 | hasUserInfo: true 50 | }) 51 | } 52 | }) 53 | -------------------------------------------------------------------------------- /tabbarComponent/tabbar.wxss: -------------------------------------------------------------------------------- 1 | .tabbar_box{ 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-around; 5 | position: fixed; 6 | bottom: 0; 7 | left: 0; 8 | z-index: 999; 9 | width: 100%; 10 | height: 98rpx; 11 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); 12 | } 13 | .tabbar_box.iphoneX-height{ 14 | padding-bottom: 66rpx; 15 | } 16 | .middle-wrapper{ 17 | position: absolute; 18 | right: 310rpx; 19 | bottom: 0; 20 | background-color: #fff; 21 | width: 120rpx; 22 | height: 120rpx; 23 | border-radius: 50%; 24 | border-top: 2rpx solid #f2f2f3; 25 | } 26 | .middle-wrapper.iphoneX-height{ 27 | bottom: 66rpx; 28 | } 29 | .tabbar_nav{ 30 | flex: 1; 31 | display: flex; 32 | flex-direction: column; 33 | justify-content: center; 34 | align-items: center; 35 | font-size: 20rpx; 36 | height: 100%; 37 | position: relative; 38 | } 39 | .tabbar_icon{ 40 | width: 56rpx; 41 | height: 56rpx; 42 | } 43 | .special-wrapper{ 44 | position: absolute; 45 | left: 77rpx; 46 | top: -36rpx; 47 | width: 96rpx; 48 | height: 96rpx; 49 | border-radius: 50%; 50 | border-top: 2rpx solid #f2f2f3; 51 | background-color: #fff; 52 | text-align: center; 53 | box-sizing: border-box; 54 | padding: 6rpx; 55 | } 56 | .special-wrapper .tabbar_icon{ 57 | width: 84rpx; 58 | height: 84rpx; 59 | } 60 | .special-text-wrapper{ 61 | width: 56rpx; 62 | height: 56rpx; 63 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //隐藏系统tabbar 5 | wx.hideTabBar(); 6 | //获取设备信息 7 | this.getSystemInfo(); 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | getSystemInfo: function () { 37 | let t = this; 38 | wx.getSystemInfo({ 39 | success: function (res) { 40 | t.globalData.systemInfo = res; 41 | } 42 | }); 43 | }, 44 | editTabbar: function () { 45 | let tabbar = this.globalData.tabBar; 46 | let currentPages = getCurrentPages(); 47 | let _this = currentPages[currentPages.length - 1]; 48 | let pagePath = _this.route; 49 | 50 | (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath); 51 | 52 | 53 | // if(pagePath.indexOf('/') != 0){ 54 | // pagePath = '/' + pagePath; 55 | // } 56 | 57 | for (let i in tabbar.list) { 58 | tabbar.list[i].selected = false; 59 | (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true); 60 | } 61 | _this.setData({ 62 | tabbar: tabbar 63 | }); 64 | }, 65 | globalData: { 66 | systemInfo: null,//客户端设备信息 67 | userInfo: null, 68 | tabBar: { 69 | "backgroundColor": "#ffffff", 70 | "color": "#979795", 71 | "selectedColor": "#1c1c1b", 72 | "list": [ 73 | { 74 | "pagePath": "/pages/index/index", 75 | "iconPath": "icon/icon_home.png", 76 | "selectedIconPath": "icon/icon_home_HL.png", 77 | "text": "首页" 78 | }, 79 | { 80 | "pagePath": "/pages/middle/middle", 81 | "iconPath": "icon/icon_release.png", 82 | "isSpecial": true, 83 | "text": "发布" 84 | }, 85 | { 86 | "pagePath": "/pages/mine/mine", 87 | "iconPath": "icon/icon_mine.png", 88 | "selectedIconPath": "icon/icon_mine_HL.png", 89 | "text": "我的" 90 | } 91 | ] 92 | } 93 | } 94 | }) --------------------------------------------------------------------------------