小程序入门学习10--云开发03

npm 安装 vant-weapp
添加编译模式

在这里插入图片描述

1 添加数据
addToDo.wxml

<form bindsubmit="onSubmit">

<input name="title"></input>
<button form-type="submit">提交</button>
</form>

addToDo.js

//初始化数据库
const db = wx.cloud.database();
//创建实例
const todos = db.collection('todos');
Page({
  onSubmit:function(event){
    console.log(event.detail.value.title)
    //新增数据
    todos.add({
      data:{
        title:event.detail.value.title
      }
    }).then(res=>{
      console.log(res)
      //展示toast
      wx.showToast({
        title: 'Success',
        icon: 'success'
      })
    })
  }
})

2 查看所有数据
index.wxml

<van-cell-group>
<!-- 列表项 -->
<block wx:for="{{tasks}}">
  <van-cell title="{{item.title}}"/>
</block>

 </van-cell-group>

index.js

const db = wx.cloud.database();
const todos = db.collection('todos');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //若task为null则无concat方法，报错：Cannot read property 'concat' of null
    tasks:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getData();    
  },

  onReady: function () {

  },
  onShow: function () {

  },
  //触底事件
  onReachBottom:function(){
    this.getData();
  },
  //下拉刷新事件对应"enablePullDownRefresh":true
  onPullDownRefresh:function(){
    this.getData(res=>{
      //保证数据更新完时 停止刷新
      wx.stopPullDownRefresh();
      //下拉刷新后回到第一条数据
      this.pageData.skip = 0;
    });
  },
  //获取数据
  getData:function(callback){
    //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=>{
        //跳转到第20条数据后
        this.pageData.skip=this.pageData.skip+20
        wx.hideLoading()
        //执行匿名函数
        callback();
      })
    })
  },
  //跳页
  pageData:{
    skip:0
  }
})

index.json

{
  "enablePullDownRefresh":true

}

3 查看对应数据详情
wxml

<van-cell-group>
<!-- border=false去除下划线 -->
   <van-cell  title="{{task.title}}" border="{{false}}" value="{{task.status==='in-progress'?'进行中':'已完成'}}"/>
</van-cell-group>

js

const db = wx.cloud.database()
const todos = db.collection('todos')
Page({

  data: {
    task:{}
  },
  //存放数据
  pageData:{},
  onLoad: function (options) {
    this.pageData.id = options.id
    //获取数据
    todos.doc(options.id).get().then(res=>{
      this.setData({
        //将结果赋值给data
        task:res.data
      })
    })
   
    
  },
  onReady: function () {

  }
})

4 添加图片及改动页面
addToDo.wxml

<form bindsubmit="onSubmit">
  <input name="title"></input>
  <block wx:if="{{image}}">
    <image src="{{image}}"></image>
  </block>
  <button bindtap="selectImage">选择图片</button>
  <button form-type="submit">提交</button>
</form>

addToDo.js

//初始化数据库
const db = wx.cloud.database();
//创建实例
const todos = db.collection('todos');
Page({
  data:{
    image:null
  },
  //上传图片
  selectImage:function(e){
    wx.chooseImage({
      //不使用function(res..)，避免this被覆盖
      success: res=> {
        console.log(res.tempFilePaths[0])
        wx.cloud.uploadFile({
          //云端路径 保证每次名字不同 `为反引号
          cloudPath:`${Math.floor(Math.random()*10000000)}.png`,
          //上传文件路径
          filePath: res.tempFilePaths[0]
        }).then(res=>{
          console.log(res.fileID)
          //数据保存到image
          this.setData({
            image:res.fileID
          })
        }).catch(err=>{
          console.error(err)
        })
      },
    })
  },
  onSubmit:function(event){
    console.log(event.detail.value.title)
    //新增数据
    todos.add({
      data:{
        title:event.detail.value.title,
        image:this.data.image
      }
    }).then(res=>{
      console.log(res._id)
      //展示toast
      wx.showToast({
        title: '添加成功',
        icon: 'success',
        //成功后跳转到详情页
        success:res2=>{
          wx.redirectTo({
            //反引号
            url:`../todoInfo/todoInfo?id=${res._id}`,
          })
        }
      })
    })
  }
})

todoInfo.wxml

<van-cell-group>
<!-- border=false去除下划线 -->
   <van-cell  title="{{task.title}}" border="{{false}}" value="{{task.status==='in-progress'?'进行中':'已完成'}}"/>
</van-cell-group>
<image wx:if="{{task.image}}" src="{{task.image}}"></image>

index.wxml

<!-- 跳转到添加页面 -->
<view class='plusBtn'>
  <navigator url="../addToDo/addToDo">
    <van-icon class=".plusIcon" name="plus" />
  </navigator>
</view>
<van-cell-group>
  <!-- 列表项 -->
  <block wx:for="{{tasks}}">
    <!-- 点击跳转到todoInfo -->
    <navigator url='../todoInfo/todoInfo?id={{item._id}}'>
      <van-cell title="{{item.title}}" />
    </navigator>
  </block>

</van-cell-group>

index.wxss

.plusBtn{
  position: fixed;
  z-index: 100;
  bottom:150rpx;
  right:375rpx;
  background-color:#ff0;
  border-radius: 100rpx;
  width:80rpx;
  height:80rpx;
  line-height:100rpx; 
}
.plusIcon{
  font-size:80rpx;
}

app.json

{
  "pages": [
    "pages/index/index",
    "pages/addToDo/addToDo",
    "pages/todoInfo/todoInfo"
    
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云待办",
    "navigationBarTextStyle": "black"
  },
    "usingComponents": {
      "van-button": "vant-weapp/button",
      "van-cell": "vant-weapp/cell/index",
      "van-cell-group": "vant-weapp/cell-group/index",
      "van-icon": "vant-weapp/icon/index"
    }
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
领取限量云产品优惠