feat: finish custom tabbar

Author: LeeJim

README.md

@@ -1,4 +1,4 @@
-# tdesign-miniprogram-starter
+# Miniprogram Starter
 基于 TDesign 小程序组件库的基础模板
 
 ## 初始化
@@ -7,4 +7,11 @@
 npm install
 ```
 
-然后打开微信开发者工具，点击菜单栏 ”工具“ - “构建npm”，即可开启预览。
+然后打开微信开发者工具，点击菜单栏 ”工具“ - “构建npm”，即可开启预览。
+
+## 特性
+
+- [x] 支持 LESS （v0.0.1）
+- [x] 使用自定义 tabbar (v0.0.1)
+- [ ] 支持版本检测，并弹窗更新
+- [ ] 通过 GitHub Action 自动发布小程序

app.js

@@ -1,11 +1,6 @@
 // app.js
 App({
   onLaunch() {
-    // 展示本地存储能力
-    const logs = wx.getStorageSync('logs') || []
-    logs.unshift(Date.now())
-    wx.setStorageSync('logs', logs)
-
     // 登录
     wx.login({
       success: res => {

app.json

@@ -1,27 +1,35 @@
 {
-  "pages":[
+  "pages": [
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/explore/index",
+    "pages/my/index"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle":"black"
+    "navigationBarTextStyle": "black"
   },
   "tabBar": {
     "custom": true,
     "color": "#000000",
     "selectedColor": "#000000",
     "backgroundColor": "#000000",
-    "list": [{
-      "pagePath": "pages/index/index",
-      "text": "组件"
-    }, {
-      "pagePath": "pages/logs/logs",
-      "text": "接口"
-    }]
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/explore/index",
+        "text": "发现"
+      },
+      {
+        "pagePath": "pages/my/index",
+        "text": "我的"
+      }
+    ]
   },
   "style": "v2",
   "sitemapLocation": "sitemap.json"
-}
+}

custom-tab-bar/index.js

@@ -1,18 +1,45 @@
 
 Component({
   data: {
+    value: 'index',
     list: [{
       icon: 'home',
-      value: 'home',
+      value: 'index',
       label: '首页',
     },{
       icon: 'control-platform',
       value: 'explore',
       label: '发现',
     }, {
       icon: 'user',
-      value: 'user',
+      value: 'my',
       label: '我的'
     }]
   },
+  lifetimes: {
+    ready() {
+      const pages = getCurrentPages();
+      const curPage = pages[pages.length - 1];
+
+      if (curPage) {
+        const nameRe = /pages\/(\w+)\/index/.exec(curPage.route);
+
+        if (nameRe[1]) {
+          this.setData({
+            value: nameRe[1]
+          })
+        }
+      }
+    }
+  },
+  methods: {
+    handleChange(e) {
+      const { value } = e.detail;
+
+      // this.setData({ value });
+      wx.switchTab({
+        url: `/pages/${value}/index`,
+      })
+    }
+  }
 })

custom-tab-bar/index.wxml

@@ -1,4 +1,4 @@
-<t-tab-bar defaultValue="home">
+<t-tab-bar value="{{value}}" bind:change="handleChange">
   <t-tab-bar-item wx:for="{{list}}" wx:key="index" icon="{{item.icon}}" value="{{item.value}}">
     {{item.label}}
   </t-tab-bar-item>

pages/explore/index.js

@@ -0,0 +1,66 @@
+// pages/explore/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/explore/index.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "发现",
+  "usingComponents": {}
+}

pages/explore/index.less

@@ -0,0 +1 @@
+/* pages/explore/index.wxss */

pages/explore/index.wxml

@@ -0,0 +1,3 @@
+<view class="container">
+  Explore Page
+</view>

pages/index/index.json

@@ -1,3 +1,4 @@
 {
+  "navigationBarTitleText": "首页",
   "usingComponents": {}
 }