需求：请求后端接口数据，（每个月的打卡情况），并且将数据展示在日历里面
步骤
1：找到官网教程文档，实现一个静态的展示页面，https://ext.dcloud.net.cn/plugin?id=56
<template> <view> <uni-calendar :insert="true" :lunar="true" :start-date="'2019-3-2'" :end-date="'2019-5-20'" @change="change" ></uni-calendar> </view> </template> <script> import uniCalendar from '@/components/uni-calendar/uni-calendar.vue' export default { components: { uniCalendar }, data() { return {}; }, methods: { change(e) { console.log(e); } } }; </script>
大概是这样的，如果有不懂的地方可以查看官方文档说明
2：用于展示打开情况，我这里选择了用红色点标记，在view里面写上:selected="selected"，并且在data里面定义要展示的数据
<template> <view> <uni-calendar :insert="true" :lunar="true" :selected="selected" :start-date="'2019-3-2'" :end-date="'2019-5-20'" @change="change" ></uni-calendar> </view> </template> <script> import uniCalendar from '@/components/uni-calendar/uni-calendar.vue' export default { components: { uniCalendar }, data() { return { selected: [{ date: '2019-12-1' }, { date: '2019-12-3' }, { date: '2019-12-4' }, { date: '2019-12-6' }] }; }, methods: { change(e) { console.log(e); } } }; </script>
这个时候，就可以看到自己想要标记的日期了，但是这些都是前端静态展示，实际项目中，需要请求接口数据，并且渲染
3：将data()数据写在前端的模拟接口里面，前面在uni-app项目里使用node服务实现模拟接口https://www.jianshu.com/p/de04ec824928，现在就可以派上用场了
将数据写入文件，并且运行node --inspect server.js，可以看到接口可以访问了
let data = { "selected": [{ "date": '2019-12-1' }, { "date": '2019-12-3' }, { "date": '2019-12-4' }, { "date": '2019-12-6' }] } module.exports = { data: data }
4：写一个请求uni.request，请求接口，并且将接口返回数据赋值到自己在data里面定义的空数组中。
完整示例代码：
<template> <view> <uni-calendar :insert="true" :lunar="true" :selected="selected" :start-date="'2019-3-2'" :end-date="'2019-5-20'" @change="change"></uni-calendar> </view> </template> <script> import uniCalendar from '@/components/uni-calendar/uni-calendar.vue' export default { components: { uniCalendar }, data() { return { selected: [], }; }, onLoad() { this.getList(); }, methods: { getList() { uni.request({ url: 'http://localhost:3000/data3', success: (res) => { console.log(res.data); this.selected = res.data.selected; } }); }, change(e) { console.log(e); }, } }; </script>
OK,显示成功了，撒花~
