mpvue+云开发仿爱彼迎微信小程序

前言

技术栈

vue + vuex + 小程序云开发

源码地址github.com/Beichenlove…

成果展示

由于要最近要学习React（头秃...）这里我只完成了主页、日期的选择及一个主题民宿页面

一、项目演示

主页

日期选择                                                  

民宿详情页

二、项目结构

├─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"    i
    ndicator-active-color="grey"    i
    nterval="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 = new Date()    //当前月份    
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 = new Date(state.currentYear, state.currentMonth, 0).getDate();    
//获取第一天的周几   
var nowDate = state.currentYear + '-' + state.currentMonth + '-' + 1    
state.currentFirstDay = new Date(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 = new Date(obj.year, obj.month, 0).getDate();      
        var firstDay = new Date(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)     
    })   
 }

总结

第一次使用mpvue的开发体验还是很不错的，虽然在开发期间遇到了不少的坑，

但基本都能在网上找到解决方案，这样的一次练手确实收获不少。编程之路漫漫...

最后用尼采的一句话

谁终将声震人间，必长久深自缄默；谁终将点燃闪电，必长久如云漂泊

送给所有编程路上努力前行的各位，同时也欢迎大家与我交流，我看到了都会一一回复（如果可以，再求个赞~）