diff --git a/package-lock.json b/package-lock.json
index 2834cea..6da2cd7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5073,6 +5073,11 @@
         "asap": "~2.0.3"
       }
     },
+    "promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -6314,6 +6319,22 @@
         }
       }
     },
+    "wepy-async-function": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/wepy-async-function/-/wepy-async-function-1.4.7.tgz",
+      "integrity": "sha512-ZkV2SAguBvwBGaYsABlvd0z8JC65jbC3enE/lHp15XK3wlAsDM9hwK6+rG21oDPDBVyNb628bl3hxc/fK9txTg==",
+      "requires": {
+        "promise-polyfill": "^6.0.2",
+        "regenerator-runtime": "^0.10.3"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
     "wepy-eslint": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/wepy-eslint/-/wepy-eslint-1.5.4.tgz",
diff --git a/package.json b/package.json
index c40dffe..1d597dd 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
   "license": "MIT",
   "dependencies": {
     "@wepy/core": "^2.0.0-alpha.9",
-    "miniprogram-slide-view": "0.0.3"
+    "miniprogram-slide-view": "0.0.3",
+    "wepy-async-function": "^1.4.7"
   },
   "devDependencies": {
     "@wepy/cli": "^2.0.0-alpha.20",
diff --git a/project.config.json b/project.config.json
index a5779cf..8e0895d 100644
--- a/project.config.json
+++ b/project.config.json
@@ -7,10 +7,49 @@
 		"minified": false
 	},
 	"compileType": "miniprogram",
-	"appid": "wx1cd266053e0941ea",
+	"appid": "wxe14508f78c680461",
 	"projectname": "douban-mini-program",
 	"miniprogramRoot": "weapp/",
 	"simulatorType": "wechat",
 	"simulatorPluginLibVersion": {},
-	"condition": {}
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"list": []
+		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": [
+				{
+					"id": -1,
+					"name": "登录页",
+					"pathName": "pages/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": 1,
+					"name": "首页",
+					"pathName": "pages/home/home",
+					"query": "",
+					"scene": null
+				}
+			]
+		}
+	}
 }
\ No newline at end of file
diff --git a/src/app.json b/src/app.json
new file mode 100644
index 0000000..df13318
--- /dev/null
+++ b/src/app.json
@@ -0,0 +1,24 @@
+{
+  "pages": ["pages/index"],
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于小程序位置接口获取城市参数"
+    }
+  },
+  "subpackages": [
+    {
+      "root": "pages/home",
+      "name": "首页",
+      "pages": [
+        "home"
+      ]
+    }
+  ],
+  "window": {
+    "navigationStyle": "default",
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTitleText": "weChat",
+    "navigationBarTextStyle": "black"
+  }
+}
\ No newline at end of file
diff --git a/src/app.wpy b/src/app.wpy
index 87b3e4f..69e4cc3 100644
--- a/src/app.wpy
+++ b/src/app.wpy
@@ -1,12 +1,5 @@
 <style lang="less">
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-}
+  
 </style>
 
 <script>
@@ -52,16 +45,4 @@ wepy.app({
   }
 });
 </script>
-<config>
-{
-    pages: [
-      'pages/index'
-    ],
-    window: {
-      backgroundTextStyle: 'light',
-      navigationBarBackgroundColor: '#fff',
-      navigationBarTitleText: 'WeChat',
-      navigationBarTextStyle: 'black'
-    }
-}
-</config>
+<config src="./app.json"></config>
diff --git a/src/assets/css/home.less b/src/assets/css/home.less
new file mode 100644
index 0000000..d568081
--- /dev/null
+++ b/src/assets/css/home.less
@@ -0,0 +1,102 @@
+.home-container {
+  .header-wrapper {
+    background-color: #42BD55;
+    height: 100rpx;
+    display: flex;
+    align-items: center;
+    padding: 0 20rpx;
+    .search-wrapper {
+      background-color: white;
+      width: 100%;
+      height: 50rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 10rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #C6C6C6;
+      image {
+        width: 32rpx;
+        height: 32rpx;
+        margin-right: 10rpx;
+      }
+    }
+  }
+  .group {
+    height: 386rpx;
+    margin-bottom: 10rpx;
+    .group-header {
+      padding: 0 35rpx;
+      height: 90rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 28rpx;
+      margin-bottom: 4rpx;
+      .title {
+        font-weight: bold;
+      }
+      .more {
+        color: #42BD55;
+        display: flex;
+        align-items: center;
+        .arrow {
+          border: 2rpx solid #42BD55;
+          border-left: none;
+          border-bottom: none;
+          width: 10rpx;
+          height: 10rpx;
+          transform: rotate(45deg);
+          margin-left: 5rpx;
+        }
+      }
+    }
+    .collectionView {
+      // display: flex;
+      // flex-direction: row;
+      // justify-content: flex-start;
+      // overflow-x: auto;
+      white-space: nowrap;
+      .cell {
+        margin-left: 30rpx;
+        display: inline-block;
+        width: 160rpx;
+        .item-icon {
+          width: 100%;
+          height: 210rpx;
+          border-radius: 6rpx;
+        }
+        .item-title {
+          font-size: 24rpx;
+          font-weight: bold;
+          margin-top: 4rpx;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .item-scoreWrapper {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          color: #A6A6A6;
+          font-size: 20rpx;
+          image {
+            width: 20rpx;
+            height: 20rpx;
+          }
+          .item-score {
+            margin-left: 4rpx;
+          }
+        }
+        .item-noScore {
+          font-size: 20rpx;
+          color: #A6A6A6;
+        }
+        &.cell:last-of-type {
+          margin-right: 30rpx;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/imgs/bg_mine_login.png b/src/assets/imgs/bg_mine_login.png
new file mode 100644
index 0000000..4bf9fbb
Binary files /dev/null and b/src/assets/imgs/bg_mine_login.png differ
diff --git a/src/assets/imgs/ic_cat_book.png b/src/assets/imgs/ic_cat_book.png
new file mode 100644
index 0000000..4e68db8
Binary files /dev/null and b/src/assets/imgs/ic_cat_book.png differ
diff --git a/src/assets/imgs/ic_cat_movie.png b/src/assets/imgs/ic_cat_movie.png
new file mode 100644
index 0000000..d10463a
Binary files /dev/null and b/src/assets/imgs/ic_cat_movie.png differ
diff --git a/src/assets/imgs/ic_cat_music.png b/src/assets/imgs/ic_cat_music.png
new file mode 100644
index 0000000..754593a
Binary files /dev/null and b/src/assets/imgs/ic_cat_music.png differ
diff --git a/src/assets/imgs/ic_launcher.png b/src/assets/imgs/ic_launcher.png
new file mode 100644
index 0000000..ae837b3
Binary files /dev/null and b/src/assets/imgs/ic_launcher.png differ
diff --git a/src/assets/imgs/ic_search.png b/src/assets/imgs/ic_search.png
new file mode 100644
index 0000000..7c4d386
Binary files /dev/null and b/src/assets/imgs/ic_search.png differ
diff --git a/src/assets/imgs/ic_tab_home_active.png b/src/assets/imgs/ic_tab_home_active.png
new file mode 100644
index 0000000..791dc39
Binary files /dev/null and b/src/assets/imgs/ic_tab_home_active.png differ
diff --git a/src/assets/imgs/ic_tab_home_normal.png b/src/assets/imgs/ic_tab_home_normal.png
new file mode 100644
index 0000000..2293d29
Binary files /dev/null and b/src/assets/imgs/ic_tab_home_normal.png differ
diff --git a/src/assets/imgs/ic_tab_profile_active.png b/src/assets/imgs/ic_tab_profile_active.png
new file mode 100644
index 0000000..62cb89e
Binary files /dev/null and b/src/assets/imgs/ic_tab_profile_active.png differ
diff --git a/src/assets/imgs/ic_tab_profile_normal.png b/src/assets/imgs/ic_tab_profile_normal.png
new file mode 100644
index 0000000..ac7a3af
Binary files /dev/null and b/src/assets/imgs/ic_tab_profile_normal.png differ
diff --git a/src/assets/imgs/ic_tab_subject_active.png b/src/assets/imgs/ic_tab_subject_active.png
new file mode 100644
index 0000000..bb3a164
Binary files /dev/null and b/src/assets/imgs/ic_tab_subject_active.png differ
diff --git a/src/assets/imgs/ic_tab_subject_normal.png b/src/assets/imgs/ic_tab_subject_normal.png
new file mode 100644
index 0000000..b0dbdcc
Binary files /dev/null and b/src/assets/imgs/ic_tab_subject_normal.png differ
diff --git a/src/assets/imgs/nav_back.png b/src/assets/imgs/nav_back.png
new file mode 100644
index 0000000..f92f2be
Binary files /dev/null and b/src/assets/imgs/nav_back.png differ
diff --git a/src/assets/imgs/nav_home.png b/src/assets/imgs/nav_home.png
new file mode 100644
index 0000000..af5f769
Binary files /dev/null and b/src/assets/imgs/nav_home.png differ
diff --git a/src/assets/imgs/rating_star_small_half.png b/src/assets/imgs/rating_star_small_half.png
new file mode 100644
index 0000000..9cae33e
Binary files /dev/null and b/src/assets/imgs/rating_star_small_half.png differ
diff --git a/src/assets/imgs/rating_star_small_off.png b/src/assets/imgs/rating_star_small_off.png
new file mode 100644
index 0000000..ca6890f
Binary files /dev/null and b/src/assets/imgs/rating_star_small_off.png differ
diff --git a/src/assets/imgs/rating_star_small_on.png b/src/assets/imgs/rating_star_small_on.png
new file mode 100644
index 0000000..d08048b
Binary files /dev/null and b/src/assets/imgs/rating_star_small_on.png differ
diff --git a/src/assets/imgs/upsdk_cancel_normal.png b/src/assets/imgs/upsdk_cancel_normal.png
new file mode 100644
index 0000000..8b50897
Binary files /dev/null and b/src/assets/imgs/upsdk_cancel_normal.png differ
diff --git a/src/pages/home/home.wpy b/src/pages/home/home.wpy
new file mode 100644
index 0000000..5446361
--- /dev/null
+++ b/src/pages/home/home.wpy
@@ -0,0 +1,148 @@
+<style lang="less">
+  @import '../../assets/css/home.less';
+</style>
+
+<template>
+  <div class="home-container">
+    <div class="header-wrapper">
+      <div class="search-wrapper">
+        <image src="../../assets/imgs/ic_search.png" mode="aspectFill" />
+        搜索
+      </div>
+    </div>
+    <div v-for="movieItem in homeData" class="group">
+      <div class="group-header">
+        <view class="title">{{ movieItem.title }}</view>
+        <view class="more">
+          查看更多
+          <view class="arrow"></view>
+        </view>
+      </div>
+      <scroll-view scroll-x="true" class="collectionView">
+        <div class="cell" v-for="movie in movieItem.movies">
+          <image class="item-icon" :src="movie.images.small" mode="aspectFill" />
+          <div class="item-title">{{ movie.title }}</div>
+          <div v-if="movie.rating.average > 0" class="item-scoreWrapper">
+            <image v-for="item in movie.stars.on" src="../../assets/imgs/rating_star_small_on.png" />
+            <image v-if="movie.stars.half" src="../../assets/imgs/rating_star_small_half.png" />
+            <image v-for="item in movie.stars.off" src="../../assets/imgs/rating_star_small_off.png" />
+            <div class="item-score">{{ movie.rating.average }}</div>
+          </div>
+          <div v-else class="item-noScore">暂无评分</div>
+        </div>
+      </scroll-view>
+    </div>
+  </div>
+</template>
+
+<script>
+  import wepy from '@wepy/core'
+  
+  wepy.page({
+    data: {
+      homeData: [
+        {
+          url: 'v2/movie/in_theaters',
+          title: '影院热映',
+          movies: []
+        },
+        {
+          url: 'v2/movie/new_movies',
+          title: '新片榜',
+          movies: []
+        },
+        {
+          url: 'v2/movie/weekly',
+          title: '口碑榜',
+          movies: []
+        },
+        {
+          url: 'v2/movie/us_box',
+          title: '北美票房榜',
+          movies: []
+        },
+        {
+          url: 'v2/movie/top250',
+          title: 'Top250',
+          movies: []
+        },
+      ]
+    },
+    methods: {},
+    onLoad() {
+      this.loadCity((city) => {
+        this.loadHomeData(0, {city: city})
+      })
+      this.loadHomeData(1)
+      this.loadHomeData(2)
+      this.loadHomeData(3)
+      this.loadHomeData(4)
+    },
+    methods: {
+      loadCity(success) {
+        // 1.首先获取当前经纬度
+        wx.getLocation().then(res => {
+          console.log(res.latitude, res.longitude)
+          // 2.通过百度API使用经纬度获取城市
+          //http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194
+          wx.request({
+            url: 'https://api.map.baidu.com/reverse_geocoding/v3/',
+            data: {
+              output: 'json',
+              coordtype: 'wgs84ll',
+              location: `${res.latitude},${res.longitude}`,
+              ak: 'MbZCXKm5A2YwoLMypYhtg8SPC7Poojkg'
+            },
+            success: (res) => {
+              console.log(res.data.result.addressComponent.city)
+              success && success(res.data.result.addressComponent.city)
+            },
+            fail: (err) => {
+              console.log(err)
+            }
+          })
+        }).catch(err => {
+          console.log(err)
+        })
+      },
+      loadHomeData(index, params) {
+        // 3.根据城市获取豆瓣首页信息
+        wx.request({
+          url: `https://douban.uieee.com/${this.homeData[index].url}`,
+          data: params,
+          header: {
+            'content-type': 'json'
+          },
+          success: (res) => {
+            console.log(res)
+            let movies = res.data.subjects
+            for (let i = 0; i < movies.length; i++) {
+              let movie = movies[i].subject || movies[i]
+              this.updateMovieStars(movie)
+              this.homeData[index].movies.push(movie)
+            }
+            console.log(this.homeData)
+          },
+          fail: (err) => {
+            console.log(err)
+          }
+        })
+      },
+      updateMovieStars(movie) {
+        let stars = movie.rating.stars
+        movie.stars = {}
+        movie.stars.on = parseInt(stars / 10)
+        movie.stars.half = stars - movie.stars.on * 10 > 0
+        movie.stars.off = 5 - movie.stars.on - movie.stars.half
+      }
+    }
+  })
+</script>
+
+<config>
+{
+  navigationBarTitleText: '首页',
+  navigationBarBackgroundColor: "#42BD55",
+  navigationBarTextStyle: "white"
+}
+</config>
\ No newline at end of file
diff --git a/src/pages/index.wpy b/src/pages/index.wpy
index c41be0b..bf2ed3e 100644
--- a/src/pages/index.wpy
+++ b/src/pages/index.wpy
@@ -1,9 +1,78 @@
 <style lang="less">
+  .login-container {
+    padding: 0 40rpx;
+    .image-wrapper {
+      display: flex;
+      justify-content: center;
+      padding: 80rpx 0;
+      image {
+        width: 140rpx;
+        height: 140rpx;
+      }
+    }
+    .login-area {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 30rpx;
+      font-weight: 300;
+      .wx-login {
+        color: #ffffff;
+        background-color: #41BD55;
+        height: 80rpx;
+        line-height: 80rpx;
+        width: 100%;
+        text-align: center;
+        border-radius: 10rpx;
+      }
+      .douban-login {
+        margin-top: 26rpx;
+        color: #41BD55;
+        background-color: #ffffff;
+        height: 80rpx;
+        line-height: 80rpx;
+        width: 100%;
+        text-align: center;
+        border-radius: 15rpx;
+        border: 1rpx solid #41BD55;
+      }
+    }
+    .agree-wrapper {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      height: 200rpx;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 22rpx;
+      font-weight: 350;
+      .agree-desc {
+        color: #A4A4A4;
+        margin-right: 10rpx;
+      }
+      .agree-btn {
+        color: #41BD55;
+      }
+    }
+  }
 
 </style>
 
 <template>
-  <div>
+  <div class="login-container">
+    <div class="image-wrapper">
+      <image src="../assets/imgs/ic_launcher.png" mode="aspectFill" />
+    </div>
+    <div class="login-area">
+      <div class="wx-login" @tap="wxLogin">微信登录</div>
+      <div class="douban-login" @tap="doubanLogin">已有豆瓣帐号登录</div>
+    </div>
+    <div class="agree-wrapper">
+      <span class="agree-desc">登录表示同意</span>
+      <div class="agree-btn" @tap="openAgree">豆瓣使用协议/隐私协议</div>
+    </div>
   </div>
 </template>
 
@@ -18,6 +87,15 @@
     data: {
     },
     methods: {
+      wxLogin() {
+        console.log('使用微信进行登录')
+      },
+      doubanLogin() {
+        console.log('使用豆瓣已有帐号进行登录')
+      },
+      openAgree() {
+        console.log('打开登录协议')
+      }
     },
   });
 </script>