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

创建小程序

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>

2. 创建名为todos的数据库集合

3. 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"
    },

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

4. 优化函数表达

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