├── README.md
├── app.js
├── app.json
├── app.wxss
├── imgs
    ├── bland.png
    ├── bland_on.png
    ├── buy.png
    ├── buy_on.png
    ├── category.png
    ├── category_on.png
    ├── home.png
    ├── home_on.png
    ├── message.png
    ├── message_on.png
    ├── search.png
    ├── search1.png
    └── timg.gif
├── pages
    ├── index
    │   ├── index.js
    │   ├── index.wxml
    │   └── index.wxss
    └── news
    │   ├── news.js
    │   ├── news.json
    │   ├── news.wxml
    │   └── news.wxss
├── project.config.json
├── template
    ├── template.js
    ├── template.wxml
    └── template.wxss
└── utils
    └── util.js


/README.md:
--------------------------------------------------------------------------------
 1 | # tabbar
 2 | WeChat small program tabbar  
 3 | 1、在template.js按照对应的key配置对应数据，其中current表示是否 选择当前的tab，直接配置为0即可  
 4 | 2、在对应的js引用template文件夹中的templalte.js------>var template = require('../../template/template.js');  
 5 | 3、然后在onLoad生命周期中注册对应的tabbar-------> template.tabbar("tabBar", 0, this)//0表示第一个tabbar,1表示第二个tabbar如此类推  
 6 | 4、在对应的wxml中引入template.wxml------><import src="../../template/template.wxml"/>  
 7 | 5、使用模板-------------><template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>  
 8 |   
 9 | 注意：第5点data属性中格式必定为该格式，原因如下：   
10 | 1、与template.wxml中的绑定的tabBar对应   
11 | <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">......</block>   
12 | 2、template.js中使用that.setData({ bindData });表明bindData作为key   
13 | 3、index.js或其他页面js使用template.tabbar("tabBar", 0, this)来使用注册template,其中的"tabBar"对应bindData.tabBar中tabBar  
14 | 博客链接：https://blog.csdn.net/qq_29729735/article/details/78933721
15 |  
16 |  
17 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | //app.js
 2 | var template = require('template/template.js');  
 3 | App({
 4 |   onLaunch: function () {
 5 |     // 展示本地存储能力
 6 |     var logs = wx.getStorageSync('logs') || []
 7 |     logs.unshift(Date.now())
 8 |     wx.setStorageSync('logs', logs)
 9 | 
10 |     // 登录
11 |     wx.login({
12 |       success: res => {
13 |         // 发送 res.code 到后台换取 openId, sessionKey, unionId
14 |       }
15 |     })
16 |     // 获取用户信息
17 |     wx.getSetting({
18 |       success: res => {
19 |         if (res.authSetting['scope.userInfo']) {
20 |           // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
21 |           wx.getUserInfo({
22 |             success: res => {
23 |               // 可以将 res 发送给后台解码出 unionId
24 |               this.globalData.userInfo = res.userInfo
25 |               // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
26 |               // 所以此处加入 callback 以防止这种情况
27 |               if (this.userInfoReadyCallback) {
28 |                 this.userInfoReadyCallback(res)
29 |               }
30 |             }
31 |           })
32 |         }
33 |       }
34 |     })
35 |   },
36 |   globalData: {
37 |     userInfo: null,
38 |     template:template 
39 |   }
40 | })
41 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "pages":[
 3 |     "pages/index/index",
 4 |     "pages/news/news"
 5 |   ],
 6 |   "window":{
 7 |     "backgroundTextStyle":"light",
 8 |     "navigationBarBackgroundColor": "#fff",
 9 |     "navigationBarTitleText": "WeChat",
10 |     "navigationBarTextStyle":"black"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | @import "/template/template.wxss";
2 | 


--------------------------------------------------------------------------------
/imgs/bland.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/bland.png


--------------------------------------------------------------------------------
/imgs/bland_on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/bland_on.png


--------------------------------------------------------------------------------
/imgs/buy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/buy.png


--------------------------------------------------------------------------------
/imgs/buy_on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/buy_on.png


--------------------------------------------------------------------------------
/imgs/category.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/category.png


--------------------------------------------------------------------------------
/imgs/category_on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/category_on.png


--------------------------------------------------------------------------------
/imgs/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/home.png


--------------------------------------------------------------------------------
/imgs/home_on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/home_on.png


--------------------------------------------------------------------------------
/imgs/message.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/message.png


--------------------------------------------------------------------------------
/imgs/message_on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/message_on.png


--------------------------------------------------------------------------------
/imgs/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/search.png


--------------------------------------------------------------------------------
/imgs/search1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/search1.png


--------------------------------------------------------------------------------
/imgs/timg.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kristen154/tabbar/8ba1064ea507906139df4bb06fe8025c4bf08a7d/imgs/timg.gif


--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const app = getApp()
 3 | Page({
 4 |   data: {
 5 | 
 6 |   },
 7 |   onLoad: function () {
 8 |     app.globalData.template.tabbar("tabBar", 0, this)//0表示第一个tabbar  
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 | <import src="../../template/template.wxml"/>
2 | <template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/pages/news/news.js:
--------------------------------------------------------------------------------
 1 | //index.js
 2 | //获取应用实例
 3 | const app = getApp()
 4 | var template = require('../../template/template.js');
 5 | Page({
 6 |   data: {
 7 | 
 8 |   },
 9 | 
10 |   onLoad: function () {
11 |     template.tabbar("tabBar", 1, this)
12 |   },
13 | 
14 | })
15 | 


--------------------------------------------------------------------------------
/pages/news/news.json:
--------------------------------------------------------------------------------
1 | {"navigationBarTitleText": "news"}


--------------------------------------------------------------------------------
/pages/news/news.wxml:
--------------------------------------------------------------------------------
1 | <import src="../../template/template.wxml"/>
2 | <template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>


--------------------------------------------------------------------------------
/pages/news/news.wxss:
--------------------------------------------------------------------------------
1 | /* pages/news/news.wxss */


--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"description": "项目配置文件。",
 3 | 	"setting": {
 4 | 		"urlCheck": true,
 5 | 		"es6": true,
 6 | 		"postcss": true,
 7 | 		"minified": true,
 8 | 		"newFeature": true
 9 | 	},
10 | 	"compileType": "miniprogram",
11 | 	"libVersion": "1.7.0",
12 | 	"appid": "touristappid",
13 | 	"projectname": "tabbarset",
14 | 	"condition": {
15 | 		"search": {
16 | 			"current": -1,
17 | 			"list": []
18 | 		},
19 | 		"conversation": {
20 | 			"current": -1,
21 | 			"list": []
22 | 		},
23 | 		"miniprogram": {
24 | 			"current": -1,
25 | 			"list": []
26 | 		}
27 | 	}
28 | }


--------------------------------------------------------------------------------
/template/template.js:
--------------------------------------------------------------------------------
 1 | 
 2 | //初始化数据
 3 | function tabbarinit() {
 4 |  return [
 5 |       { "current":0,
 6 |         "pagePath": "/pages/index/index",
 7 |         "iconPath": "/imgs/home.png",
 8 |         "selectedIconPath": "/imgs/home_on.png",
 9 |         "text": "主页"
10 |       },
11 |       {
12 |         "current": 0,
13 |         "pagePath": "/pages/news/news",
14 |         "iconPath": "/imgs/message.png",
15 |         "selectedIconPath": "/imgs/message_on.png",
16 |         "text": "资讯"
17 | 
18 |       },
19 |       {
20 |         "current": 0,
21 |         "pagePath": "/pages/category/category",
22 |         "iconPath": "/imgs/category.png",
23 |         "selectedIconPath": "/imgs/category_on.png",
24 |         "text": "分类"
25 |       },
26 |       {
27 |         "current": 0,
28 |         "pagePath": "/pages/buy/buy",
29 |         "iconPath": "/imgs/buy.png",
30 |         "selectedIconPath": "/imgs/buy_on.png",
31 |         "text": "购物"
32 |       }
33 |     ]
34 | 
35 | }
36 | 
37 | /**
38 |  * tabbar主入口
39 |  * @param  {String} bindName 
40 |  * @param  {[type]} id       [表示第几个tabbar，以0开始]
41 |  * @param  {[type]} target   [当前对象]
42 |  */
43 | function tabbarmain(bindName = "tabdata", id, target) {
44 |   var that = target;
45 |   var bindData = {};
46 |   var otabbar = tabbarinit();
47 |   otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon
48 |   otabbar[id]['current'] = 1;
49 |   bindData[bindName] = otabbar
50 |   that.setData({ bindData });
51 | }
52 | 
53 | 
54 | module.exports = {
55 |   tabbar: tabbarmain
56 | }


--------------------------------------------------------------------------------
/template/template.wxml:
--------------------------------------------------------------------------------
 1 | <template name="tabBar">
 2 | <view class="tabBar">
 3 |   <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
 4 |     <view class="tabBar-item">
 5 |       <navigator open-type="redirect" url="{{item.pagePath}}">
 6 |         <view><image class="icon" src='{{item.iconPath}}'></image></view>
 7 |         <view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
 8 |       </navigator>  
 9 |     </view>
10 |   </block>
11 | </view>
12 | </template>


--------------------------------------------------------------------------------
/template/template.wxss:
--------------------------------------------------------------------------------
 1 | /* pages/template/template.wxss */
 2 | .icon{
 3 |   width:54rpx;
 4 |   height: 54rpx;
 5 | }
 6 | .tabBar{
 7 |   width:100%;
 8 |   position: fixed;
 9 |   bottom:0;
10 |   padding:10rpx;
11 |   margin-left:-4rpx;
12 |   background:#F7F7FA;
13 |   font-size:20rpx;
14 |   color:#8A8A8A;
15 |   box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;
16 | }
17 | 
18 |  .tabBar-item{
19 |   overflow: hidden;
20 |   float:left;
21 |   width:25%;
22 |   text-align: center;
23 | }
24 | /*当前字体颜色*/
25 | .tabBartext{
26 |   color:red;
27 | }


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------