完成首页布局

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "files.associations": {
-    "*.wxml": "html",
+    "*.wxml": "wxml",
     "*.wxss": "css"
   }
 }

app.js

@@ -3,10 +3,10 @@ App({
 
   },
   // options 路径对象 
-  onShow: function (options) {
-    console.log(options)
+  onShow: function () {
+    console.log()
   },
-  onHide: function (options) {
-    console.log(options)
+  onHide: function () {
+    console.log()
   }
 })

app.json

@@ -1,27 +1,36 @@
 {
   "pages": [
-    "pages/index/index",
-    "pages/home/home"
+    "pages/home/home",
+    "pages/message/message",
+    "pages/profile/profile"
   ],
   "window": {
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "WeChat",
-    "navigationBarTextStyle": "black"
+    "navigationBarBackgroundColor": "#3a4861",
+    "navigationBarTitleText": "本地生活",
+    "navigationBarTextStyle": "white"
   },
   "tabBar": {
+    "color": "#666",
+    "selectedColor": "#999",
+    "borderStyle": "black",
     "list": [
-      {
-        "pagePath": "pages/index/index",
-        "text": "index",
-        "iconPath": "assets/tabbar/board.png",
-        "selectedIconPath": "assets/tabbar/board-actived.png"
-      },
       {
         "pagePath": "pages/home/home",
         "text": "home",
-        "iconPath": "assets/tabbar/home.png",
-        "selectedIconPath": "assets/tabbar/home-actived.png"
+        "iconPath": "/assets/tabs/home.png",
+        "selectedIconPath": "/assets/tabs/home-active.png"
+      },
+      {
+        "pagePath": "pages/message/message",
+        "text": "message",
+        "iconPath": "/assets/tabs/message.png",
+        "selectedIconPath": "/assets/tabs/message-active.png"
+      },
+      {
+        "pagePath": "pages/profile/profile",
+        "text": "profile",
+        "iconPath": "/assets/tabs/profile.png",
+        "selectedIconPath": "/assets/tabs/profile-active.png"
       }
     ]
   }

app.wxss

@@ -1,10 +1,3 @@
-/**app.wxss**/
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 200rpx 0;
-  box-sizing: border-box;
+page {
+  background-color: '#f0f0f0'
 } 

jsconfig.json

@@ -0,0 +1,6 @@
+{
+	"compilerOptions": {
+		"target": "es2015",
+		"module": "commonjs"
+	}	
+}

pages/home/home.js

@@ -1,66 +1,29 @@
-// pages/home/home.js
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-    msg: 'home'
+
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-
+  onLoad: function(options) {
+    //Do some initialize when page load.
+
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
+  onReady: function() {
+    //Do some when page ready.
+
   },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
+  onShow: function() {
+    //Do some when page show.
+
   },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
+  onHide: function() {
+    //Do some when page hide.
+
   },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
+  onUnload: function() {
+    //Do some when page unload.
+
   },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  onPullDownRefresh: function() {
+    //Do some when page pull down.
+
   }
 })

pages/home/home.wxml

@@ -1,6 +1,48 @@
-<!--pages/home/home.wxml-->
-<!-- <text>pages/home/home.wxml</text> -->
+<swiper>
+  <swiper-item>
+    <image src="https://static.maizuo.com/pc/v5/h5PicUpload/062a965ab71db31fe0b7ad6f8c529935.jpg"/>
+  </swiper-item>
+  <swiper-item>
+    <image src="https://static.maizuo.com/pc/v5/h5PicUpload/062a965ab71db31fe0b7ad6f8c529935.jpg"/>
+  </swiper-item>
+</swiper>
 
-<text>
-  {{msg}}
-</text>
+<view class="grids">
+  <view class="item">
+    <image src="/assets/icons/grid-01.png" />
+    <text>美食</text>
+  </view>
+  <view class="item">
+    <image src="/assets/icons/grid-02.png" />
+    <text>美食</text>
+  </view>
+  <view class="item">
+    <image src="/assets/icons/grid-03.png" />
+    <text>美食</text>
+  </view>
+  <view class="item">
+    <image src="/assets/icons/grid-04.png" />
+    <text>美食</text>
+  </view>
+  <view class="item">
+    <image src="/assets/icons/grid-05.png" />
+    <text>美食</text>
+  </view>
+  <view class="item">
+    <image src="/assets/icons/grid-06.png" />
+    <text>美食</text>
+  </view>
+  <view class="item">
+    <image src="/assets/icons/grid-07.png" />
+    <text>美食</text>
+  </view>
+  <view class="item">
+    <image src="/assets/icons/grid-08.png" />
+    <text>美食</text>
+  </view>
+  <view class="item">
+    <image src="/assets/icons/grid-09.png" />
+    <text>美食</text>
+  </view>
+
+</view>

pages/home/home.wxss

@@ -1 +1,24 @@
-/* pages/home/home.wxss */
+.grids {
+  display: flex;
+  flex-wrap: wrap;
+  border-top: 1rpx solid #eee;
+  border-left: 1rpx solid #eee;
+  background-color: #fff;
+}
+
+.grids .item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 33.3333333333%;
+  height: 250rpx;
+  border-right: 1rpx solid #eee;
+  border-bottom: 1rpx solid #eee;
+  box-sizing: border-box;
+}
+
+.grids .item image {
+  width: 70rpx;
+  height: 70rpx;
+}

pages/message/message.js

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

pages/message/message.json

@@ -0,0 +1 @@
+{}

pages/message/message.wxml

@@ -0,0 +1,2 @@
+<!--pages/message/message.wxml-->
+<text>pages/message/message.wxml</text>