知乎-微信小程序 demo: 底部 tab 及对应一级页面的UI 搭建

RebeccaHanjw · Oct 18, 2016 · fbf9cf5 · fbf9cf5
1 parent ce37627
commit fbf9cf5
Show file tree

Hide file tree

Showing 53 changed files with 1,462 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,30 @@
+//app.js
+App({
+  onLaunch: function () {
+    //调用API从本地缓存中获取数据
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+  },
+  getUserInfo:function(cb){
+    var that = this
+    if(this.globalData.userInfo){
+      typeof cb == "function" && cb(this.globalData.userInfo)
+    }else{
+      //调用登录接口
+      wx.login({
+        success: function () {
+          wx.getUserInfo({
+            success: function (res) {
+              that.globalData.userInfo = res.userInfo
+              typeof cb == "function" && cb(that.globalData.userInfo)
+            }
+          })
+        }
+      })
+    }
+  },
+  globalData:{
+    userInfo:null
+  }
+})
diff --git a/app.json b/app.json
@@ -0,0 +1,52 @@
+{
+  "pages":[
+    "pages/index/index",
+    "pages/discovery/discovery",
+    "pages/notify/notify",
+    "pages/chat/chat",
+    "pages/more/more"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#0068C4",
+    "navigationBarTitleText": "知乎",
+    "navigationBarTextStyle":"white"
+  },
+  "tabBar": {
+    "color": "#626567",
+    "selectedColor": "#2A8CE5",
+    "backgroundColor": "#FBFBFB",
+    "borderStyle": "white",
+    "list": [{
+      "pagePath": "pages/index/index",
+      "text": "",
+      "iconPath": "images/index.png",
+      "selectedIconPath": "images/index_focus.png"
+    }, {
+      "pagePath": "pages/discovery/discovery",
+      "text": "",
+      "iconPath": "images/discovery.png",
+      "selectedIconPath": "images/discovery_focus.png"
+    }, {
+      "pagePath": "pages/notify/notify",
+      "text": "",
+      "iconPath": "images/ring.png",
+      "selectedIconPath": "images/ring_focus.png"
+    }, {
+      "pagePath": "pages/chat/chat",
+      "text": "",
+      "iconPath": "images/chat.png",
+      "selectedIconPath": "images/chat_focus.png"
+    }, {
+      "pagePath": "pages/more/more",
+      "text": "",
+      "iconPath": "images/burger.png",
+      "selectedIconPath": "images/burger_focus.png"
+    }]
+  },
+  "networkTimeout": {
+    "request": 10000,
+    "downloadFile": 10000
+  },
+  "debug": true
+}
diff --git a/app.wxss b/app.wxss
@@ -0,0 +1,126 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  /*padding: 200rpx 0;*/
+  box-sizing: border-box;
+  background: #F0F4F3;
+}
+
+.container.withtab{
+  margin: 105rpx 0 0 0;
+  /*top: 105rpx;*/
+}
+.flex-wrp{
+  display: flex;
+}
+.flex-tab{
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  align-items: stretch;
+}
+.flex-item{
+  flex-grow: 1;
+  text-align: center;
+}
+.top-tab{
+  width: 750rpx;
+  height: 100rpx;
+  background: #298DE5;
+  color: #8CCEFD;
+  font-size: 28rpx;
+  line-height: 100rpx;
+  box-shadow: 0 2px 2px #bebebe;
+  margin: 0 0 8rpx 0;
+  position: fixed;
+  top: 0;
+}
+.toptab.active{
+  color: #ffffff;
+  border-bottom: solid 2px #ffffff;
+}
+.container{
+  padding: 0;
+  font-size: 14rpx;
+  color: #000;
+}
+.container .feed-item{
+  width: 690rpx;
+  padding: 30rpx 30rpx 20rpx;
+  margin: 7rpx 0 6rpx 0;
+  background: #ffffff;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  box-shadow: 0 2px 5px #eeeeee;
+}
+.container .feed-item .feed-source{
+  width: 690rpx;
+  left: 0;
+  height: 50rpx;
+}
+.container .feed-item .feed-source .avatar{
+  position: relative;
+  display: inline-block;
+}
+.container .feed-item .feed-source a{
+  display: inline-block;
+  height: 40rpx;
+}
+.container .feed-item .feed-source .avatar image{
+  /*position: absolute;*/
+  display: inline-block;
+  width: 45rpx;
+  height: 45rpx;
+  border-radius: 45rpx;
+  top: 10rpx;
+  vertical-align: middle;
+}
+.container .feed-item .feed-source text{
+  /*position: absolute;*/
+  display: inline-block;
+  height: 40rpx;
+  line-height: 40rpx;
+  vertical-align: middle;
+  margin: 0 0 0 15rpx;
+  color: #a0acac;
+  font-size: 16rpx;
+}
+.container .feed-item .feed-source .item-more{
+  display: inline-block;
+  width: 40rpx;
+  height: 45rpx;
+  float: right;
+}
+.container .feed-item .feed-content{
+  padding: 10rpx 0 0 0;
+}
+.container .feed-item .feed-content .question text{
+  font-size: 28rpx;
+  font-weight: 600px;
+  line-height: 40rpx;
+  text-space: 5rpx;
+}
+.container .feed-item .feed-content .answer-body{
+  padding: 10rpx 0 0 0;
+  /*height: 10rpx;*/
+  font-size: 24rpx;
+  line-height: 28rpx;
+  color: #5b5b5b;
+}
+.container .feed-item .feed-content .answer-actions{
+  width: 690rpx;
+  padding: 10rpx 0  0;
+  color: #a0acac;
+}
+.container .feed-item .feed-content .answer-actions view{
+  display: inline-block;
+  vertical-align: text-bottom;
+  padding: 0 10rpx 0 0;
+  font-size: 24rpx;
+}
+.container .feed-item .feed-content .answer-actions .dot ::after{
+  content: "•";
+}
diff --git a/images/1444983318907-_DSC1826.jpg b/images/1444983318907-_DSC1826.jpg
diff --git a/images/24213.jpg b/images/24213.jpg
diff --git a/images/24280.jpg b/images/24280.jpg
diff --git a/images/allread.png b/images/allread.png
diff --git a/images/book.png b/images/book.png
diff --git a/images/burger.png b/images/burger.png
diff --git a/images/burger_focus.png b/images/burger_focus.png
diff --git a/images/chat.png b/images/chat.png
diff --git a/images/chat_focus.png b/images/chat_focus.png
diff --git a/images/discovery.png b/images/discovery.png
diff --git a/images/discovery_focus.png b/images/discovery_focus.png
diff --git a/images/draft.png b/images/draft.png
diff --git a/images/eye.png b/images/eye.png
diff --git a/images/icon1.jpeg b/images/icon1.jpeg
diff --git a/images/icon8.jpg b/images/icon8.jpg
diff --git a/images/icon9.jpeg b/images/icon9.jpeg
diff --git a/images/index.png b/images/index.png
diff --git a/images/index_focus.png b/images/index_focus.png
diff --git a/images/lighting.png b/images/lighting.png
diff --git a/images/live.png b/images/live.png
diff --git a/images/more.png b/images/more.png
diff --git a/images/recent.png b/images/recent.png
diff --git a/images/ring.png b/images/ring.png
diff --git a/images/ring_focus.png b/images/ring_focus.png
diff --git a/images/search.png b/images/search.png
diff --git a/images/star.png b/images/star.png
diff --git a/images/zhi.png b/images/zhi.png
diff --git a/pages/answer/answer.js b/pages/answer/answer.js
@@ -0,0 +1,29 @@
+//index.js
+//获取应用实例
+var app = getApp()
+Page({
+  data: {
+    motto: '知乎--微信小程序版',
+    userInfo: {}
+  },
+  //事件处理函数
+  bindViewTap: function() {
+    wx.navigateTo({
+      url: '../more/more'
+    })
+  },
+  onLoad: function () {
+    console.log('onLoad')
+    var that = this
+    //调用应用实例的方法获取全局数据
+    app.getUserInfo(function(userInfo){
+      //更新数据
+      that.setData({
+        userInfo:userInfo
+      })
+    })
+  },
+  tapName: function(event){
+    console.log(event)
+  }
+})