小程序todo开发(腾讯云大学的笔记)

本文详细介绍小程序开发流程,包括创建项目、管理版本、界面设计与数据库操作。通过实例展示如何使用Vant UI组件库优化界面,实现表单数据提交及数据展示功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建小程序

  1. 删除冗余文件,只留下index的页面。
  2. 创建git仓库
  3. 右键miniprogram文件夹,在终端中打开,输入npm i vant-weapp -S --production的命令。
  4. npm init -y生成一个page文件
  5. 详情中选择支持npm模块,在工具中选择创建npm模块

最终呈现效果:

  • 目录栏
    在这里插入图片描述

开始开发

  1. wxss设置按钮格式用npm包的样式"usingComponents": { "van-button":"vant-weapp/button" }
  2. wxml 中创建按钮
    n-button type="primary">按钮</van-button>显示结果
    在这里插入图片描述

版本管理

  1. 提交修改,只要创建了一个页面都要

创建表单

  1. wxml
<form bindsubmit="onSubmit">
<input name="title"></input>
<button form-type='submit' type="primary">提交</button>
</form>
  1. 创建名为todos的数据库集合

  2. js:创建实例,接受form事件,添加数据并且返回成功的信号。

onSubmit:function(event){
  todos.add({
    data:{
      title:event.detail.value.title
    }
  }).then(res=>{
    wx.showToast({
      title: 'success',
      icon:'success'
    })
  }

  )
}

编写界面

  1. 引入vant样式,设置为基本组件。
    在这里插入图片描述
  • 引入结果:

      "usingComponents": {
        "van-button":"vant-weapp/button",
        "van-cell": "vant-weapp/cell",
      "van-cell-group": "vant-weapp/cell-group"
      },
  1. 复制cell基础使用方式,拷贝代码至wxml。
    点击查看cell的基础用法
  2. 接收表单
    js:
  • 创建数据库实例

    const db=wx.cloud.database();
    const todos =db.collection('todos');
  • 设置关键字tasks。

  • 在这里插入图片描述

    wxml:

  • 可以使用view,或者block,建议使用block去渲染,因为不用重新生成。

  • {{tasks}}代表关键字

  • 是没有对称结构的

<van-cell-group>
<block wx:for ="{{tasks}}">
 <van-cell title="{{item.title}}"/>
</block>
</van-cell-group>
  1. 优化函数表达

    • 创建getdata函数,避免重复调用。

    • showloading显示正在加载。

    • 运用callback使得数据没有渲染完成之前不显示,增强使用人群体验。

    • 上拉刷新,下拉到底加载分屏

    • 将tasks设置为数组来支持concat的调用

       /**
         * 页面的初始数据
         */
        data: {
                tasks:[]
        },
      
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
          this.getData();
        
        },
      onReachBottom:function(){
      this.getData();
      
      },
      onPullDownRefresh:function(){
         this.getData(res=>{
      wx.stopPullDownRefresh();
       });
      },
      //callback是为了让刷新完成之后再给到页面才更新
       getData:function(callback){
         if(!callback)
         {
           callback=res=>{}
         }
         wx.showLoading(
           {title:'数据加载中'}
         )
        todos.skip(this.pageDate.skip).get().then(res =>{
          let oldData=this.data.tasks;
         this.setData(
            { tasks:oldData.concat(res.data)},res=>{
              this.pageDate.skip=this.pageDate.skip+20
              wx.hideLoading()
              callback();
            }
          )
      })
       },
       pageDate:{
         skip:0
       }

查看todos实现详情

创建todoinfor页面,在index.wxml创建一个navigator用来跳转到这个界面.

<van-cell-group>
<block wx:for ="{{tasks}}">
<navigator url="../todoinfor/todoinfor">
 <van-cell title="{{item.title}}"/>
 </navigator>
</block>
</van-cell-group>
<navigator url='../todoinfor/todoinfor?id={{item._id}}'>

更改使得页面id具有某种参数,新建编译模式,复制页面参数(使得每次打开的都是同一个页面进行开发)

利用options获得页面id

  onLoad: function (options) {
console.log(options);
  },

在todoinfor的js里设置数据库,并且获得数据。

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

pageData:{},
 data:{
     task:{},
 },
  
  onLoad: function (options) {

    this.pageData.id=options.id;
    todos.doc(options.id).get().then(res=>{
      this.setData({
        task:res.data
        })
    } )
  },

再使用cell显示

<van-cell-group>
  <van-cell title="{{task.title}}" border="{{ true }}"
  value="{{task.status==='yes'?'down':'undo'}}" />
</van-cell-group>

添加图片上传

在index.wxml中创建图标(app.json中的icon配置记得要加上)

<view class='plusBtn'>
<navigator url="../todo/todo">
<van-icon class="plusIcon" name="plus"/>
</navigator>
</view>
.plusBtn{
  position: fixed;
  z-index: 100;
  bottom: 100rpx;
  right:375rpx;
  background-color: #ff0000;
  border-radius: 100rpx;
  width:80rpx;
}
.plusIcon{
  font-size:80rpx;
}

就得到了极限丑陋的一个可以跳转到todos页面丑无比的图标

r>


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


就得到了极限丑陋的一个可以跳转到todos页面丑无比的图标


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值