小程序todo开发（腾讯云大学的笔记）

最新推荐文章于 2024-04-29 00:38:22 发布

wzc_w_z_c_

最新推荐文章于 2024-04-29 00:38:22 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wzc_w_z_c_/article/details/105967860

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

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

创建小程序

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

最终呈现效果：

开始开发

wxss设置按钮格式用npm包的样式"usingComponents": { "van-button":"vant-weapp/button" }
wxml 中创建按钮
n-button type="primary">按钮</van-button>显示结果

版本管理

提交修改，只要创建了一个页面都要

创建表单

wxml

<form bindsubmit="onSubmit">
<input name="title"></input>
<button form-type='submit' type="primary">提交</button>
</form>

创建名为todos的数据库集合
js：创建实例，接受form事件，添加数据并且返回成功的信号。

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

  )
}

编写界面

引入vant样式，设置为基本组件。

引入结果：

  "usingComponents": {
    "van-button":"vant-weapp/button",
    "van-cell": "vant-weapp/cell",
  "van-cell-group": "vant-weapp/cell-group"
  },

复制cell基础使用方式，拷贝代码至wxml。
点击查看cell的基础用法
接收表单
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>

优化函数表达

创建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页面丑无比的图标

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


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