init project

app.js

@@ -0,0 +1,39 @@
+//app.js
+App({
+  onLaunch: function () {
+    // // 展示本地存储能力
+    // var logs = wx.getStorageSync('logs') || []
+    // logs.unshift(Date.now())
+    // wx.setStorageSync('logs', logs)
+
+    // // 登录
+    // wx.login({
+    //   success: res => {
+    //     // 发送 res.code 到后台换取 openId, sessionKey, unionId
+    //   }
+    // })
+    // // 获取用户信息
+    // wx.getSetting({
+    //   success: res => {
+    //     if (res.authSetting['scope.userInfo']) {
+    //       // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+    //       wx.getUserInfo({
+    //         success: res => {
+    //           // 可以将 res 发送给后台解码出 unionId
+    //           this.globalData.userInfo = res.userInfo
+
+    //           // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+    //           // 所以此处加入 callback 以防止这种情况
+    //           if (this.userInfoReadyCallback) {
+    //             this.userInfoReadyCallback(res)
+    //           }
+    //         }
+    //       })
+    //     }
+    //   }
+    // })
+  },
+  globalData: {
+    serverpath:"http://api.jasonre.cn"
+  }
+})

app.json

@@ -0,0 +1,12 @@
+{
+  "pages":[
+    "pages/index/index",
+    "pages/logs/logs"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fede18",
+    "navigationBarTitleText": "第一好车",
+    "navigationBarTextStyle":"black"
+  }
+}

app.wxss

@@ -0,0 +1,9 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+} 

common/pathmap.js

@@ -0,0 +1,10 @@
+export default{
+  "login":"/api/login",
+  "phonecode":"/api/get_yzm",
+  "logout":"/api/logout",
+  "banner":"/api/home_banner",
+  "recommended":"/api/home_recommended",
+  "like":"/api/home_guess_likes",
+  "goodcar":"/api/good_car",
+  "goodcardetail":"/api/good_car_detail",
+}

common/request.js

@@ -0,0 +1,18 @@
+var app = getApp();
+export const get=(url,data,callback,failback)=>{
+  wx.request({
+    url: app.globalData.serverpath+url,
+    method: "GET",
+    header: {
+      "Content-Type": "json"
+    },
+    data:data,
+    success: function (res){
+      console.debug(res);
+      callback && callback(res);
+    },
+    fail: function (error){
+      failback && failback(error)
+    }
+  })
+} 

pages/index/banner.wxml

@@ -0,0 +1,24 @@
+<template name="banner">
+  <view class="banner">
+    <swiper 
+      class='banner_t' 
+      autoplay='true' 
+      interval='2000' 
+      duration='300' 
+      bindchange='switchTab'
+      circular='true'
+    >
+      <block wx:for="{{banner}}" wx:key="key">
+        <swiper-item>
+          <image class='banner_item' src="{{item.banner_img}}"/>
+        </swiper-item>
+      </block>      
+    </swiper>
+    <view class="tab">
+      <block wx:for="{{banner}}" wx:key="key">
+        <view wx:if="{{item.selected}}" class='tab-item selected'></view>
+        <view wx:else class="tab-item"></view>
+      </block>
+    </view>
+  </view>
+</template>

pages/index/cardetail.wxml

@@ -0,0 +1,17 @@
+<template name="cardetail">
+  <view class="car_b">
+    <view class="car_img" style="background-image:url({{car.img}})"/>
+    <view class="car_info">
+      <view class="car_t">{{car.title}}</view>
+      <view class="car_time">
+        {{car.license_time}}年上牌|{{car.mileage}}万公里
+      </view>
+      <view class="car_p">
+        售价：{{car.sale_price}}
+      </view>
+      <view class="car_characteristic">
+        <view class="car_characteristic_i">11111</view>
+      </view>
+    </view>
+  </view>
+</template>

pages/index/goodcar.wxml

@@ -0,0 +1,24 @@
+<template name="goodcar">
+  <view class="goodcar">
+    <view class="goodcar_t" style="background-image:url(../../img/goodcar.png)">
+    </view>
+    <swiper 
+      class='banner_g' 
+      autoplay='true' 
+      interval='2000'
+      duration='300' 
+      vertical='true'
+      display-multiple-items='2'
+      bindchange='switchTab'
+      circular='true'
+    >
+      <block wx:for="{{goodcars}}" wx:key="key">
+        <swiper-item>
+          <view class="goodcar_item">
+            {{item.title}}
+          </view>
+        </swiper-item>
+      </block>
+    </swiper>
+  </view>
+</template>

pages/index/index.js

@@ -0,0 +1,90 @@
+//index.js
+//获取应用实例
+import {get} from "../../common/request.js"
+import pathmap from "../../common/pathmap"
+const app = getApp()
+
+Page({
+  data: {
+    banner:[],
+    goodcars:[],
+    recommended:[],
+    like:[]
+  },
+  //事件处理函数
+  bindViewTap: function() {
+    wx.navigateTo({
+      url: '../logs/logs'
+    })
+  },
+  onLoad: function () {
+    var _self = this;
+    this.loadBanner();
+    this.loadGoodCar();
+    this.loadRecommendedCar();
+    this.loadLikeCar();
+  },
+  loadBanner: function () {
+    var _self = this;
+    get(pathmap.banner, {
+      terminal: 0
+    }, function (json) {
+      _self.setData({
+        banner: json.data
+      })
+    })
+  },
+  loadGoodCar:function(){
+    var _self = this;
+    get(pathmap.goodcar, {
+      offset: 0,
+      limit:3
+    }, function (json) {
+      _self.setData({
+        goodcars: json.data.list
+      })
+    })
+  },
+  loadRecommendedCar:function(e){
+    var _self = this;
+    get(pathmap.recommended, {
+      offset: 0,
+      limit: 9
+    }, function (json) {
+      _self.setData({
+        recommended: json.data.list
+      })
+    })
+  },
+  loadLikeCar:function(){
+    var _self = this;
+    get(pathmap.like, {
+      offset: 0,
+      limit: 10
+    }, function (json) {
+      _self.setData({
+        like: json.data.list
+      })
+    })
+  },
+  switchTab: function (e) {
+    var banner = this.data.banner;
+    var i, item;
+    for (i = 0; item = banner[i]; ++i) {
+      item.selected = e.detail.current == i;
+    }
+    this.setData({
+      banner: banner
+    });
+  },
+  switchReTab:function(e){
+    var recommended = this.data.recommended;
+    var i, item;
+    for (i = 0; item = recommended[i]; ++i) {
+      item.selected = e.detail.current == i;
+    }
+    this.setData({
+      recommended: recommended
+    });
+  }
+})

pages/index/index.wxml

@@ -0,0 +1,140 @@
+<!--index.wxml-->
+<import src="banner.wxml"/>
+<import src="goodcar.wxml"/>
+<import src="cardetail.wxml"/>
+<import src="likecardetail.wxml"/>
+<view class="conent">
+  <template is="banner" data="{{banner:banner}}"/>
+  <view class="nav_list">
+    <view class="nav_item">
+      <navigator class="nav_item_link" url="">
+        <view class="nav_item_img">
+          <image src="../../img/buy.png"/>
+        </view>
+        <view class="nav_item_t">我要买车</view>
+      </navigator>
+    </view>
+    <view class="nav_item">
+      <navigator class="nav_item_link" url="">
+        <view class="nav_item_img">
+          <image src="../../img/sell.png"/>
+        </view>
+        <view class="nav_item_t">我要卖车</view>
+      </navigator>
+    </view>
+    <view class="nav_item">
+      <navigator class="nav_item_link" url="">
+        <view class="nav_item_img">
+          <image src="../../img/assess.png"/>
+        </view>
+        <view class="nav_item_t">我要估价</view>
+      </navigator>
+    </view>
+    <view class="nav_item">
+      <navigator class="nav_item_link" url="">
+        <view class="nav_item_img">
+          <image src="../../img/loan.png"/>
+          </view>
+        <view class="nav_item_t">我要贷款</view>
+      </navigator>
+    </view>
+  </view>
+  <template is="goodcar" data="{{goodcars:goodcars}}"/>
+
+  <view class='brand'>
+    <view class='brand_r'>
+      <view class="brand_item">
+        <navigator class="brand_item_link" url="">
+          <view class="brand_item_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brand_item_name">11111</view>
+        </navigator>
+      </view>
+      <view class="brand_item">
+        <navigator class="brand_item_link" url="">
+          <view class="brand_item_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brand_item_name">11111</view>
+        </navigator>
+      </view>
+      <view class="brand_item">
+        <navigator class="brand_item_link" url="">
+          <view class="brand_item_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brand_item_name">11111</view>
+        </navigator>
+      </view>
+      <view class="brand_item">
+        <navigator class="brand_item_link" url="">
+          <view class="brand_item_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brand_item_name">11111</view>
+        </navigator>
+      </view>
+    </view>
+    <view class='brand_r'>
+      <view class="brand_item">
+        <navigator class="brand_item_link" url="">
+          <view class="brand_item_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brand_item_name">11111</view>
+        </navigator>
+      </view>
+      <view class="brand_item">
+        <navigator class="brand_item_link" url="">
+          <view class="brand_item_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brand_item_name">11111</view>
+        </navigator>
+      </view>
+      <view class="brand_item">
+        <navigator class="brand_item_link" url="">
+          <view class="brand_item_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brand_item_name">11111</view>
+        </navigator>
+      </view>
+      <view class="brand_item">
+        <navigator class="brand_item_link" url="">
+          <view class="brand_item_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brand_item_name">11111</view>
+        </navigator>
+      </view>
+    </view>
+    <view class="brand_more">查看更多好车</view>
+  </view>
+  <view class="recommend">
+    <view class="recommend_t">
+      <image class="recommend_img" src="../../img/recommend.png"/>
+      <view class="recommend_w">RECOMMENDATIONS</view>
+    </view>
+    <view class="recommend_sw">
+      <swiper 
+        class='recommend_list' 
+        autoplay='true' 
+        interval='3000' 
+        duration='300' 
+        bindchange='switchReTab'
+        circular='true'
+      >
+        <block wx:for="{{recommended}}" wx:key="key">
+          <swiper-item>
+            <template is="cardetail" data="{{car:item}}"/>
+          </swiper-item>
+        </block>      
+      </swiper>
+      <view class="recommended_tab">
+        <block wx:for="{{banner}}" wx:key="key">
+          <view wx:if="{{item.selected}}" class='recommended_tab-item recommend_selected'></view>
+          <view wx:else class="recommended_tab-item"></view>
+        </block>
+      </view>
+    </view>
+  </view>
+  <view class="recommend">
+    <view class="recommend_t">
+      <image class="recommend_img" src="../../img/like.png"/>
+      <view class="recommend_w">GUESS YOU LIKE</view>
+    </view>
+  </view>
+  <view class="like_cart_c">
+    <block wx:for="{{recommended}}" wx:key="key">
+      <template is="likecardetail" data="{{car:item}}"/>
+    </block>
+  </view>
+  <view class="show_more">加载更多></view>
+  <image class="bottom_banner" src="../../img/banner.png"></image>
+</view>

pages/index/index.wxss

@@ -0,0 +1,292 @@
+
+/*******topbanner*********/
+
+.conent{
+  background-color:#F9F9F9;
+}
+.banner{
+  position:relative;
+}
+.banner_t{
+  position:relative;
+  height: 380rpx;
+  width: 100%;
+}
+.banner_item{
+  width:100%;
+  height: 100%;
+}
+.tab{
+  position: absolute;
+  bottom:10rpx;
+  display: flex;
+  text-align: center;
+  justify-content:center;
+  align-items:center;
+  width:100%;
+}
+.tab-item{
+  width:8rpx;
+  height: 8rpx;
+  border-radius:4rpx;
+  background-color: rgba(255, 230, 0, 0.5);
+  margin:0rpx 10rpx;
+}
+.selected{  
+  background-color: rgba(255, 230, 0, 1);
+}
+
+/*******nav*********/
+.nav_list{
+  display: flex;
+  padding: 0rpx 20rpx;
+  height: 180rpx;
+  background: white;
+}
+.nav_item{
+  flex: 1;
+  display: block;
+}
+.nav_item_link{
+  text-align: center;
+  margin:0rpx auto;
+}
+.nav_item_img{
+  display: inline-block;
+  width:82rpx;
+  height: 82rpx;
+  margin-top:28rpx;
+  border-radius: 28rpx;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.21);
+  background-repeat: no-repeat;
+  background-size: 70rpx;
+  background-position: center;
+}
+.nav_item_img image{
+  width:70rpx;
+  height: 70rpx;
+  margin:6rpx;
+}
+.nav_item_t{
+  height: 24rpx;
+  line-height: 36rpx;
+  color: rgba(56, 55, 53, 1);
+  font-size: 24rpx;
+}
+
+/*******goodcar*********/
+.goodcar{
+  height: 98rpx;
+  width:100%;
+  display: flex;
+  margin-top:20rpx;
+  background-color:white;
+}
+.goodcar_t{
+  width:98px;
+  background-repeat:no-repeat;
+  background-position: center;
+  background-size:55rpx 55rpx;
+}
+.banner_g{
+  position: relative;
+  height: 100%;
+  flex:1;
+}
+.goodcar_item{
+  height: 49rpx;
+  line-height: 49rpx;
+  font-size: 24rpx;
+}
+/*******brand*********/
+.brand{
+  margin-top:16rpx;
+}
+.brand_r{
+  display: flex;
+  flex-wrap:wrap;
+  margin: 0rpx -4rpx 4rpx;
+}
+.brand_item{
+  height: 150rpx;
+  flex: 1;
+  background: white;
+  margin:4rpx 4rpx 0rpx 0rpx;
+}
+.brand_item_link{
+  text-align: center;
+}
+.brand_item_img{
+  height: 114rpx;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 70%;
+}
+.brand_item_name{
+  height: 36rpx;
+  line-height: 36rpx;
+  color: rgba(56, 55, 53, 1);
+  font-size: 20rpx;
+}
+.brand_more{
+  margin:0px auto;
+  width: 500rpx;
+  height: 68rpx;
+  line-height: 68rpx;
+  text-align: center;
+  background-color: rgba(255, 230, 0, 1);
+}
+/**********recommend**********/
+.recommend{
+  margin-top:20rpx;
+  background: white;
+}
+.recommend_t{
+  padding:64rpx 0rpx 60rpx;
+
+}
+.recommend_img{
+  height: 32rpx;
+  display: block;
+  margin:0px auto;
+  width:176rpx;
+}
+.recommend_w{
+  height: 16rpx;
+  line-height: 19rpx;
+  color: rgba(56, 55, 53, 1);
+  letter-spacing: 3rpx;
+  font-size: 16rpx;
+  text-align: center;
+  font-family: PerpetuaTitlingMT-Light;
+}
+.recommend_sw{
+  position: relative;
+}
+.recommend_list{
+  height: 200rpx;
+}
+.recommended_tab{
+  position: absolute;
+  bottom:10rpx;
+  display: flex;
+  text-align: center;
+  justify-content:center;
+  align-items:center;
+  width:100%;
+}
+.recommended_tab-item{
+  width:8rpx;
+  height: 8rpx;
+  border-radius:4rpx;
+  background-color: rgba(155, 155, 155, 1);
+  margin:0rpx 10rpx;
+}
+.recommend_selected{
+  background-color: rgba(58, 55, 53, 0.95);
+}
+/************cardetail***********/
+.car_b{
+  height: 200rpx;
+  width:100%;
+  display: flex
+}
+.like_cart_c{
+  margin-top:-20rpx;
+}
+.likecar_b{
+  height: 200rpx;
+  width:100%;
+  display: flex;
+  margin-top:20rpx;
+  border-top:1px solid #F9F9F9;
+  background: white;
+}
+.car_img{
+  display: block;
+  width:336rpx;
+  height:100%;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center;
+}
+.likecar_img{
+  display: block;
+  width:290rpx;
+  height:100%;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center;
+}
+.car_info{
+  padding:10rpx 0rpx 0rpx 40rpx;
+  align-items:center;
+}
+.car_t{
+  height: 36rpx;
+  line-height: 36rpx;
+  color: rgba(56, 55, 53, 1);
+  font-size: 26rpx;
+  text-align: left;
+}
+.car_time{
+  height: 30rpx;
+  line-height: 30rpx;
+  color: rgba(135, 135, 135, 1);
+  font-size: 20rpx;
+  text-align: left;
+}
+ .car_store{
+  height: 28rpx;
+  line-height: 28rpx;
+  color: rgba(245, 166, 35, 1);
+  font-size: 20rpx;
+  text-align: center;
+  display: inline-block;
+  border:1px solid rgba(245, 166, 35, 1);
+  border-radius: 8rpx;
+} 
+.car_p{
+  height: 33rpx;
+  line-height: 33rpx;
+  color: rgba(33, 36, 37, 1);
+  font-size: 28rpx;
+  font-family: NotoSansHans-Medium;
+}
+.car_characteristic{
+  height: 60rpx;
+}
+.car_characteristic_i{
+  display: inline-block;
+  height: 34rpx;
+  line-height: 34rpx;
+  border-radius: 6rpx;
+  font-size: 18rpx;
+  padding:0rpx 5rpx;
+  background-color: rgba(255, 230, 0, 1);
+  color: rgba(56, 55, 53, 1);
+}
+.car_guide_p{
+  height: 33rpx;
+  line-height: 33rpx;
+  color: rgba(104, 104, 104, 1);
+  font-size: 22rpx;
+  text-align: left;
+}
+.car_guidep{
+  display: inline;
+  text-decoration:line-through;
+}
+.show_more{
+  line-height: 68rpx;
+  height: 68rpx;
+  color: rgba(135, 135, 135, 1);
+  font-size: 24rpx;
+  text-align: center;
+  background: white;
+}
+/*******bottom*********/
+.bottom_banner{
+  width: 100%;
+  height:240rpx;
+}

pages/index/likecardetail.wxml

@@ -0,0 +1,18 @@
+<template name="likecardetail">
+  <view class="likecar_b">
+    <view class="likecar_img" style="background-image:url({{car.img}})"/>
+    <view class="car_info">
+      <view class="car_t">{{car.title}}</view>
+      <view class="car_time">
+        {{car.license_time}}年上牌|{{car.mileage}}万公里
+        <view class="car_store">{{car.store_name}}</view>
+      </view>
+      <view class="car_p">
+        {{car.sale_price}}
+      </view>
+      <view class="car_guide_p">
+        新手指导价：<view class="car_guidep">{{car.guide_price}}</view>
+      </view>
+    </view>
+  </view>
+</template>

pages/logs/logs.js

@@ -0,0 +1,15 @@
+//logs.js
+const util = require('../../utils/util.js')
+
+Page({
+  data: {
+    logs: []
+  },
+  onLoad: function () {
+    this.setData({
+      logs: (wx.getStorageSync('logs') || []).map(log => {
+        return util.formatTime(new Date(log))
+      })
+    })
+  }
+})

pages/logs/logs.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "查看启动日志"
+}

pages/logs/logs.wxml

@@ -0,0 +1,6 @@
+<!--logs.wxml-->
+<view class="container log-list">
+  <block wx:for="{{logs}}" wx:for-item="log">
+    <text class="log-item">{{index + 1}}. {{log}}</text>
+  </block>
+</view>

pages/logs/logs.wxss

@@ -0,0 +1,8 @@
+.log-list {
+  display: flex;
+  flex-direction: column;
+  padding: 40rpx;
+}
+.log-item {
+  margin: 10rpx;
+}

project.config.json

@@ -0,0 +1,36 @@
+{
+	"description": "项目配置文件。",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": false,
+		"es6": true,
+		"postcss": false,
+		"minified": false,
+		"newFeature": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.0.9",
+	"appid": "wxe2f74610ded49787",
+	"projectname": "wx",
+	"isGameTourist": false,
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}

utils/util.js

@@ -0,0 +1,19 @@
+const formatTime = date => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
+}
+
+const formatNumber = n => {
+  n = n.toString()
+  return n[1] ? n : '0' + n
+}
+
+module.exports = {
+  formatTime: formatTime
+}