#小程序云开发挑战赛#-tusake Today--404
·应用场景
该小程序会将当天的天气提供给用户,用户还可以再小程序中设置一天的行程
·目标用户
主要面向办公人士
·实现思路
通过云开发中的云函数以及数据库等功能来为相应模块提供信息,同时方便后期添加修改信息
·架构图
·效果图
·主要代码
//history
Page({
data:{
historyData:[],
nowDate:'',
flag:0
},
callFunction:function(){
this.setData({
flag:1
})
console.log("ok");
wx.cloud.callFunction({
name:"queryData"
}).then(res=>{
console.log(res)
this.setData({
historyData:res.result.data
})
})
},
onLoad(){
let nowDate=this.getTime()
this.setData({
nowDate:nowDate,
})
},
//获取时间函数
getTime(){
let date=new Date()
let month=date.getMonth()+1
if(month<10){
month= '0' +month
}
let day=date.getDate()
if(day<10){
day= '0' +day
}
let monthDay=month+'月'+day+'日'
console.log(monthDay)
return monthDay
},
})
//todo1
const db=wx.cloud.database();
const todos=db.collection('toDos');
Page({
data: {
task:{},
},
pageData:{
},
onLoad:function(options){//options为跳转前页面传来的id
this.pageData.id=options.id
todos.doc(options.id).get().then(res=>{
console.log(res);
this.setData({
task:res.data
})
})
},
//展示小地图的函数
viewLocation:function(){
wx.openLocation({
latitude: this.data.task.location.latitude,
longitude: this.data.task.location.longitude,
name: this.data.task.location.name,
address: this.data.task.location.address
})
},
//完成任务函数
finishTask:function(){
console.log(this.data.task._id);
let id=this.data.task._id
wx.cloud.callFunction({
name:'updataData',
data:{
//将这条list所对应的_id(数据库)传给云函数让其处理
id:this.data.task._id
},
}).then(console.log)
},
//删除任务函数
deleteTask:function(){
let id=this.data.task._id
wx.cloud.callFunction({
name:'deleteData',
data:{
id:this.data.task._id
},
}).then(console.log)
}
})
//todo2
const db=wx.cloud.database();
const todos=db.collection('toDos');
Page({
data:{
tasks:[],
image:'',
},
pageData:{//collection.skip()方法是在多条数据的情况下为了实现分页方法
skip:0,
locationOnobj:{}
},
//-----------------onXXX方法都是生命周期函数-----------------------
onLoad:function(options){
this.getData()
},
//加载到页面底部的函数
onReachBottom:function(){
this.getData()
},
//下拉刷新函数
onPullDownRefresh:function(){
this.getData(res=>{
wx.stopPullDownRefresh();
this.pageData.skip=0;
})
},
//提交表单信息到云端数据库
onSubmit:function(event){
todos.add({
data:{
status:'进行中',
title:event.detail.value.title,
image:this.data.image,
location:this.pageData.locationOnobj
}
}).then(res=>{
console.log(res)
wx.showToast({
title:"添加成功",
icon:"success",
success:res2=>{
wx.redirectTo({
url: `../toDoInfo/toDoInfo?id=${res._id}`,
})
}
})
})
},
//----------------------以上为 生命周期函数----------------------
//获取云端数据库数据
getData:function(callback){
if(!callback){
callback=res=>{}
}
wx.showLoading({
title: '数据加载中',
})
todos.skip(this.pageData.skip).get().then(res=>{
let oldData=this.data.tasks;
this.setData({
tasks:oldData.concat(res.data)
},res=>{
this.pageData.skip=this.pageData.skip+10
wx.hideLoading()
callback();
})
})
},
//选择地址的函数
chooseLocation:function(e){
wx.chooseLocation({
success:res=>{
console.log(res);
let locationOnobj={
latitude:res.latitude,
longitude:res.longitude,
name:res.name,
address:res.address,
}
this.pageData.locationOnobj=locationOnobj
}
})
},
//选择图片函数
selectImage:function(e){
wx.chooseImage({
success:res=>{
console.log(res.tempFilePaths[0]);
wx.cloud.uploadFile({//将图片传到云端
cloudPath:`${Math.floor(Math.random()*10000)}.png`,//云端的图片路径名称(名称要随机生成避免重复)
filePath:res.tempFilePaths[0]//图片的根路径
}).then(res=>{
this.setData({
image:res.fileID
})
}).catch(err=>{
console.error(err)
})
}
})
},
})
//天气
Page({
data: {
address: "暂无",
latitude: "暂无",
longitude: "暂无",
weather: "暂无",
number: null
},
chooselocation: function () {
wx.chooseLocation({
latitude: 0,
longitude: 0,
success: (result) => {
wx.showLoading({
title: 'Loading',
})
let i = Math.floor(Math.random() * 10)
this.setData({
address: result.address,
latitude: result.latitude,
longitude: result.longitude,
})
wx.hideLoading()
},
fail: () => {
this.setData({
address: "出现错误"
})
},
})
wx.cloud.callFunction({
name:"getWeather"
}).then(res=>{
let i = Math.floor(Math.random()*100)%res.result.data[0].weather.length;
this.setData({
weather:res.result.data[0].weather[i],
number:i
})
})
},
})
·视频展示
腾讯视频:https://v.qq.com/x/page/q315339jwmz.html
·源码展示
github:https://github.com/tusake/wx
·体验版
·参赛人员
两只随处可见的大学生