技术栈

小程序·云开发 + vue + vuex

成果展示

目前作者只完成了主页、日期的选择及一个主题民宿页面，这附上源码地址：https://github.com/BeichenloveNancy/mpvue-airbnb/tree/master/mpvue/my-project

一、项目演示

主页

二、项目结构

├─src
│  │  app.json
│  │  App.vue
│  │  main.js
│  │
│  ├─components · 抽离出的组件
│  │      calendar.vue       // 日期
│  │      discount.vue       // 优惠活动
│  │      facility.vue       // 设备
│  │      location.vue       // 定位
│  │      preference.vue     // 推荐
│  │      ratings.vue        // 评分
│  │      search.vue         // 搜索房源(未开发）
│  │      service.vue        // 详情页活动
│  │
│  ├─pages · 页面
│  │  ├─home
│  │  ├─houseMain
│  │  ├─mine
│  │  └─selectDate
│  ├─store · vuex数据管理
│  │  │  index.js
│  │  │  types.js
│  │  └─modules
│  │          date.js
│  │
│  └─utils · 工具类函数
│          index.js
│          map.js
│
└─static
    ├─dist-ivew       //vant组件
    ├─functions       //云函数
    │  └─getHouse
    │          config.json
    │          index.js
    │          package.json
    └─images

​

功能详情

路由跳转我们用 wx.navigateTo 实现路由跳转，其中 router 为点击事件，

router(id,city)
{   if(id==1 && city== "苏州")
{        const url = "../../pages/houseMain/main";
 wx.navigateTo({        url      });
}

重写指示点

这里使用了小程序视图容器中滑块滚动触发的 bindChange 事件,mpvue 要使用@Click 或 v-on:Click 来监听点击事件，这里与原生小程序开发还是有所不同

<swiper
autoplay="true"
indicator-color="#fff"
indicator-active-color="grey"
interval="4000"
circular="true"
duration="500"
@change="currentHandle($event)">
 <block v-for="(item,index) in advData" :key="index">
   <swiper-item>
    <img :src="item.PicUrl" alt="" width="100%">
    <div class="title">
     <div class="extra">{{item.extra}}</div>
     <div class="desc">{{item.desc}}</div>
    </div>
   </swiper-item>
 </block>
</swiper>
<div class="swp-dot">
 <div :class="current === index?'dot m-r active': 'dot m-r '"
 v-for="(item,index) in advData" :key="index">
 </div>
</div>

​

mpvue 引入 vant 组件

我们可以使用下列命令安装 vant

# 通过 npm 安装
npm i vant -S

# 通过 yarn 安装
yarn add van

同时将 node_modules 下的 vant-weapp 下的 dist 目录复制到 static 下的 vant 目录即可调用，接着在 app.json 按以下代码进行配置使用：

"usingComponents": {
"van-action-sheet": "static/dist/action-sheet/index",
 "van-button": "static/dist/button/index"
},

注意勾选微信小程序开发工具本地设置中的 es6 转 es5(不勾会报错)

​

日期选择部分逻辑

初始化当前月，实现默认选中当前的月份

var date = newDate()    //当前月份
state.currentDay = date.getDate()    // 默认结束为第二天
state.currentMonth = date.getMonth() + 1
state.currentYear = date.getFullYear()
state.temStartDay = date.getDate()
state.temStartMonth = state.currentMonth
state.temStartYear = state.currentYear
state.temEndDay = date.getDate() + 1
state.temEndMonth = state.currentMonth
state.temEndYear = state.currentYear    //默认开始为当前日期
state.temStart = state.currentMonth + '月' +state.currentDay +'日'//默认结束为第二天
state.temEnd = state.currentMonth + '月' + (state.currentDay+1) +'日'
state.startDay = state.temStart    state.endDay = state.temEnd    //当前月份的天数
state.currentDayNum = newDate(state.currentYear, state.currentMonth, 0).getDate();
//获取第一天的周几
var nowDate = state.currentYear + '-' + state.currentMonth + '-' + 1
state.currentFirstDay = newDate(nowDate).getDay();

一年内月份的展示

[types.NEXT_YEAR](state) {
    let showYear = state.currentYear
    let showMonth = state.currentMonth
    for(let i = 0; i < 12; i++){
        let obj = {        year: showYear,        month:showMonth      }
        showMonth++
        if(showMonth > 12){        showMonth = 1        showYear = showYear+1      }
        var monthDays = newDate(obj.year, obj.month, 0).getDate();
        var firstDay = newDate(obj.year + '-' + obj.month + '-' + 1).getDay();
        state.eachMonthDays.push(monthDays) //天数
        state.eachMonthFirstDay.push(firstDay) //第一天是周几
        state.nextYear.push(obj)
     }
}

月份前星期的空缺，这里我们只需要知道，某个月的 1 号是星期几，就能把整个日历渲染出来 相关代码:

[types.FULL_CONTENT](state){
    for(let n = 0; n<state.nextYear.length;n++){
    let wrapper = []
    if (state.eachMonthFirstDay[n] > 0) {
        for (let i = 0; i < state.eachMonthFirstDay[n]; i++) {
            wrapper.push(" ");}
         }
        for (let j = 1; j <= state.eachMonthDays[n]; j++) {
            wrapper.push(j);
        }
        state.content.push(wrapper)
     }
 },

​

民宿地址详情

<map
    @click="searchAddress"
    id="map"
    longitude="120.6020740000"
    latitude="31.3119640000"
    :markers="markers"
    scale="14"
    style="width: 100%; height: 200px;"
    :enable-zoom ="enablezoom"
    :enable-scroll="enablescroll"
    :enable-rotate="enablerotate"></map>

​

云开发

这里我们使用云开发来获取各城市名宿数据

首先在 main.js 中完成云能力初始化

import Vue from'vue'
import App from'./App'
import store from'./store/index'
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'wx.cloud.init({  env: '云开发环境ID'})
const app = new Vue(App)app.$mount()

我们使用以下调用获取默认环境的数据库的引用

const db = cloud.database() 这里我把数据放在一张名为“houseInfo"的表里，我们通过数据库引用上的 collection 方法获取一个集合的引用，并进行条件查询

const listHouse = await db
  .collection("houseInfo")
  .where({
    cityId: event.cityId,
  })
  .get();
return {
  houseList,
  listHouse,
};

接下来我们对数据库进行操作,通过以下代码使用 onLoad 生命周期函数获取到数据并进行页面渲染

getList(){
    wx.cloud.callFunction({
    name: 'getHouse',
    data:{ cityId: 1}
    })
    .then(res=>
    {this.houseList = res.result.houseList.data
    this.listHouse = res.result.listHouse.data
    console.log(res.result.listHouse.data)
    })
 }

​

云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web 应用、移动应用。
​
技术文档：https://www.cloudbase.net/
微信搜索：腾讯云云开发，获取项目最新进展