微信小程序学习笔记(5) -- todos案例

左手的ㄟ右手 2023-02-20 14:00 80阅读 0赞

### 文章目录 ###

*  TODOS案例:
 *   *  项目介绍
     *  样式书写
     *   *  导航栏
         *  todos
         *  footer
     *  数据绑定
     *   *  抽象数据模型
         *  界面数据绑定
     *  界面交互操作
     *   *  新增
         *  新增逻辑优化
         *  切换任务完成状态
         *  剩余任务数量展示
         *  删除任务逻辑
         *  切换全部任务状态(全选)
         *  清空已完成任务
         *  细节优化和总结
         *   *  bindconfirm事件
             *  呈现问题--block
     *  真机演示

# TODOS案例: #

## 项目介绍 ##

[https://github.com/zce/weapp-todos][https_github.com_zce_weapp-todos]

## 样式书写 ##

### 导航栏 ###

效果：

![在这里插入图片描述][20200627233320305.png]  
具体代码:

/* pages/todos/todos.wxss */
    .container{ 
      border-top: 1rpx solid #E0E0E0;
    }
    .search{ 
      display: flex; 
      align-items: center;
      margin: 20rpx;
      padding: 20rpx;
      border: 1px solid #ccc;
      border-radius: 5rpx;
      box-shadow: 0 0 5rpx #E0E0E0;  
    }
    .search input{ 
      flex: 1;
      height: 40rpx;  
    }
    .search image{ 
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }

### todos ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]

<view class="todos">
          <view class="item">
            <icon type="success" />
            <text>Learning HTML</text>
             <icon type="clear" size="16"/>
          </view>
          <view class="item">
              <icon type="circle" />
              <text>Learning CSS</text>
              <icon type="clear" size="16"/>
          </view>
          <view class="item">
              <icon type="circle" />
              <text>Learning Javascript</text>
              <icon type="clear" size="16" />
          </view>
      </view>

.todos{
      margin: 20rpx;
      border: 1px solid #ccc;
      border-radius: 5rpx;
      box-shadow: 0 0 5rpx #E0E0E0;  
    }
    .todos .item{
      display: flex;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1rpx solid #E0E0E0;
      /* margin-bottom: -1px; */
    }
    .todos .item:last-child{
      border-bottom: 0;
    }
    .item text{
      flex: 1;
      margin-left: 20rpx;
      font-size: 30rpx;
      color: #444;
    }

### footer ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]

<view class="footers">
      <text>Toggle All</text>
      <text>2 items left</text>
      <text>Clear completed</text>
    </view>

.footers{ 
      display: flex;
      /* 内容对其方式 */
      justify-content: space-between;
      margin: 20rpx;
      font-size: 30rpx;
       color: #333;
    }
    .footers text{ 
      flex: 1;
    }

现在整体效果已经产生:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]

## 数据绑定 ##

### 抽象数据模型 ###

// pages/todos/todos.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
          //文本框数据模型
          search: '',
          //任务清单数据模型
          todos: [
            {name: 'Learning WEAPP',completed: false},
            {name: 'Learning JavaScript',completed: false},
            {name: 'Learning HTML',completed: false}
          ]
    
      }
    })

### 界面数据绑定 ###

// pages/todos/todos.js
    Page({ 
      /** * 页面的初始数据 */
      data: { 
          //文本框数据模型
          search: '',
          //任务清单数据模型
          todos: [
            { name: 'Learning WEAPP',completed: false},
            { name: 'Learning JavaScript',completed: true},
            { name: 'Learning HTML',completed: false}
          ]
    
      }
    })

<view class="container">
      <view class="search">
         <image src="../../images/plus.png"></image>
         <input type="text" placeholder="Anything here..." value="{ {search}}"/>
      </view>
      <view class="todos">
          <view class="item{ { item.completed ? ' completed' : '' }}" wx:for="{ { todos}}" >
            <icon type="{ {item.completed? 'success':'circle'}}" />
            <text>{
       {item.name}}</text>
             <icon type="clear" size="16"/>
          </view>    
      </view>
      <view class="footers">
        <text>Toggle All</text>
         <text>{
       { todos.length }} items left</text>
         <text>Clear completed</text>
      </view>
    </view>

页面效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]

## 界面交互操作 ##

### 新增 ###

目标1： 搜索框中添加的数据，加入到列表当中:

效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]

### 新增逻辑优化 ###

刚才的代码中，如果是input的内容为空，点击+号，还是会添加到todo的列表中:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]

逻辑优化: 只需要一行代码:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]

### 切换任务完成状态 ###

在列表项上添加事件，改变选中项的completed的状态，然后setData赋值即可:

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]

### 剩余任务数量展示 ###

> 实现目标有3点:

1.若未选中的item的项数大于1，则 应为items left

2.如果为1，则应为item left

3.若没有可选的项，则不显示任务数量

4.注意动态切换任务数量

> 步骤，主要有3点:

1.定义一个leftCount属性来显示剩余未选项

2.在输入框中的+号点击的时候，添加1

3切换列表的状态时，如果选中的列表项的completed为true则是+1.否则减1

<view class="container">
      <view class="header">
         <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
         <input type="text" placeholder="Anything here..." value="{
       {input}}" bindinput="inputChangeHandle"/>
      </view>
      <view class="todos">
          <view class="item{
       { item.completed ? ' completed' : '' }}" 
          wx:for="{
       { todos}}" bindtap="toggleTodoHandle" data-index="{
       { index }}">
            <icon type="{
       {item.completed? 'success':'circle'}}"  />
            <text>{
       {item.name}}</text>
             <icon type="clear" size="16"/>
          </view>    
      </view>
      <view class="footers">
        <text>Toggle All</text>
         <text wx:if="{
       { leftCount }}"> {
       { leftCount }} {
       {leftCount > 1 ? 'items' : 'item' }} left</text>  
         <text>Clear completed</text>
      </view>
    </view>

### 删除任务逻辑 ###

注意点：事件冒泡问题，用catchtap事件

<view class="container">
      <view class="header">
         <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
         <input type="text" placeholder="Anything here..." value="{ {input}}" bindinput="inputChangeHandle"/>
      </view>
      <view class="todos">
          <view class="item{ { item.completed ? ' completed' : '' }}" wx:for="{ { todos}}" bindtap="toggleTodoHandle" data-index="{ { index }}">
            <icon type="{ {item.completed? 'success':'circle'}}" />
            <text>{
       {item.name}}</text>
             <icon type="clear" size="16" catchtap="removeToDoHandle" data-index="{ { index }}"/>
          </view>    
      </view>
      <view class="footers">
        <text>Toggle All</text>
         <text wx:if="{ { leftCount }}"> {
       { leftCount }} {
       {leftCount > 1 ? 'items' : 'item' }} left</text>  
         <text>Clear completed</text>
      </view>
    </view>

// pages/todos/todos.js
    Page({ 
      /** * 页面的初始数据 */
      data: { 
          //文本框数据模型
          input: '',
          //任务清单数据模型
          todos: [
            { name: 'Learning WEAPP',completed: false},
            { name: 'Learning JavaScript',completed: true},
            { name: 'Learning HTML',completed: false}
          ],
          leftCount: 2
    
      },
      inputChangeHandle: function(e){ 
        //body
        console.log(e.detail.value);
        this.setData({ 
          input: e.detail.value
        });
      },
      //1.先让按钮点击时 执行一段代码
      //2. 拿到文本框里面的值
      // 2.1 由于小程序的数据绑定是单向的，
      // 必须要给文本框注册改变事件
      //3. 将这个值添加到列表中
      addTodoHandle: function(){  
         //当添加按钮点击事件发生时执行的函数
         if(!this.data.input)return
         console.log(this.data.input)     
         var todos =  this.data.todos;  
         todos.push({        
             name: this.data.input,
             completed: false
          })  
         //必须显式的通过setData去改变数据，这样界面才能得到变化
         this.setData({ 
          todos: todos,
           input:'',
           leftCount: this.data.leftCount + 1  
         });
      },
      toggleTodoHandle:function(e){ 
        //切换当前点中的item的完成状态
        console.log(e.currentTarget);
        var item = this.data.todos[e.currentTarget.dataset.index]
        console.log(item)
        item.completed = !item.completed
        //根据当前任务额完成状态决定增加一个或者减少一个
        var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
        console.log(this.data.todos)
        this.setData({ 
           todos: this.data.todos,
           leftCount: leftCount
        })
      },
      removeToDoHandle:function(e){ 
        var item = this.data.todos[e.currentTarget.dataset.index]
        this.data.leftCount =  item.completed ? this.data.leftCount : (this.data.leftCount - 1) ;
        this.data.todos.splice(e.currentTarget.dataset.index, 1)
        this.setData({ 
          todos: this.data.todos,
          leftCount: this.data.leftCount
       })
      }
    
    })

运行效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]  
显示已经删除:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 10]

### 切换全部任务状态(全选) ###

页面添加一个事件toggleAllHandle

<view class="container">
      <view class="header">
         <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
         <input type="text" placeholder="Anything here..." value="{
       {input}}" bindinput="inputChangeHandle"/>
      </view>
      <view class="todos">
          <view class="item{
       { item.completed ? ' completed' : '' }}" 
          wx:for="{
       { todos}}" bindtap="toggleTodoHandle" data-index="{
       { index }}">
            <icon type="{
       {item.completed? 'success':'circle'}}"  />
            <text>{
       {item.name}}</text>
             <icon type="clear" size="16" catchtap="removeToDoHandle" data-index="{
       { index }}"/>
          </view>    
      </view>
      <view class="footers">
        <text bindtap="toggleAllHandle">Toggle All</text>
         <text wx:if="{
       { leftCount }}"> {
       { leftCount }} {
       {leftCount > 1 ? 'items' : 'item' }} left</text>  
         <text>Clear completed</text>
      </view>
    </view>

js书写逻辑:

// pages/todos/todos.js
    Page({ 
      /** * 页面的初始数据 */
      data: { 
          //文本框数据模型
          input: '',
          //任务清单数据模型
          todos: [
            { name: 'Learning WEAPP',completed: false},
            { name: 'Learning JavaScript',completed: true},
            { name: 'Learning HTML',completed: false}
          ],
          leftCount: 2,
          allCompleted: false
    
      },
      inputChangeHandle: function(e){ 
        //body
        console.log(e.detail.value);
        this.setData({ 
          input: e.detail.value
        });
      },
      //1.先让按钮点击时 执行一段代码
      //2. 拿到文本框里面的值
      // 2.1 由于小程序的数据绑定是单向的，
      // 必须要给文本框注册改变事件
      //3. 将这个值添加到列表中
      addTodoHandle: function(){  
         //当添加按钮点击事件发生时执行的函数
         if(!this.data.input)return
         console.log(this.data.input)     
         var todos =  this.data.todos;  
         todos.push({        
             name: this.data.input,
             completed: false
          })  
         //必须显式的通过setData去改变数据，这样界面才能得到变化
         this.setData({ 
          todos: todos,
           input:'',
           leftCount: this.data.leftCount + 1  
         });
      },
      toggleTodoHandle:function(e){ 
        //切换当前点中的item的完成状态
        console.log(e.currentTarget);
        var item = this.data.todos[e.currentTarget.dataset.index]
        console.log(item)
        item.completed = !item.completed
        //根据当前任务额完成状态决定增加一个或者减少一个
        var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
        console.log(this.data.todos)
        this.setData({ 
           todos: this.data.todos,
           leftCount: leftCount
        })
      },
      removeToDoHandle:function(e){ 
        var item = this.data.todos[e.currentTarget.dataset.index]
        this.data.leftCount =  item.completed ? this.data.leftCount : (this.data.leftCount - 1) ;
        this.data.todos.splice(e.currentTarget.dataset.index, 1)
        this.setData({ 
          todos: this.data.todos,
          leftCount: this.data.leftCount
       })
      },
      toggleAllHandle: function(){ 
        //this在这里永远指向的是当前页面对象
        console.log(11)
        this.data.allCompleted = !this.data.allCompleted     
        var todos = this.data.todos  
        var that = this
        todos.forEach(function(item){ 
          item.completed = that.data.allCompleted 
        })
        this.setData({ 
          todos: this.data.todos,
          leftCount:  this.data.allCompleted? 0 : todos.length 
       })
      }
    })

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 11]  
全选：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 12]  
全不选:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 13]

### 清空已完成任务 ###

在页面定义个clearHandle方法:

<view class="container">
      <view class="header">
         <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
         <input type="text" placeholder="Anything here..." value="{
       {input}}" bindinput="inputChangeHandle"/>
      </view>
      <view class="todos">
          <view class="item{
       { item.completed ? ' completed' : '' }}" 
          wx:for="{
       { todos}}" bindtap="toggleTodoHandle" data-index="{
       { index }}">
            <icon type="{
       {item.completed? 'success':'circle'}}"  />
            <text>{
       {item.name}}</text>
             <icon type="clear" size="16" catchtap="removeToDoHandle" data-index="{
       { index }}"/>
          </view>    
      </view>
      <view class="footers">
        <text bindtap="toggleAllHandle">Toggle All</text>
         <text wx:if="{
       { leftCount }}"> {
       { leftCount }} {
       {leftCount > 1 ? 'items' : 'item' }} left</text>  
         <text bindtap="clearHandle">Clear completed</text>
      </view>
    </view>

// pages/todos/todos.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
          //文本框数据模型
          input: '',
          //任务清单数据模型
          todos: [
            {name: 'Learning WEAPP',completed: false},
            {name: 'Learning JavaScript',completed: true},
            {name: 'Learning HTML',completed: false}
          ],
          leftCount: 2,
          allCompleted: false
    
      },
      inputChangeHandle: function(e){
        //body
        console.log(e.detail.value);
        this.setData({
          input: e.detail.value
        });
      },
      //1.先让按钮点击时 执行一段代码
      //2. 拿到文本框里面的值
      // 2.1 由于小程序的数据绑定是单向的，
      //       必须要给文本框注册改变事件
      //3. 将这个值添加到列表中
      addTodoHandle: function(){ 
         //当添加按钮点击事件发生时执行的函数
         if(!this.data.input)return
         console.log(this.data.input)     
         var todos =  this.data.todos;  
         todos.push({       
             name: this.data.input,
             completed: false
          })  
         //必须显式的通过setData去改变数据，这样界面才能得到变化
         this.setData({
          todos: todos,
           input:'',
           leftCount: this.data.leftCount + 1  
         });
      },
      toggleTodoHandle:function(e){
        //切换当前点中的item的完成状态
        console.log(e.currentTarget);
        var item = this.data.todos[e.currentTarget.dataset.index]
        console.log(item)
        item.completed = !item.completed
        //根据当前任务额完成状态决定增加一个或者减少一个
        var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
        console.log(this.data.todos)
        this.setData({
           todos: this.data.todos,
           leftCount: leftCount
        })
      },
      removeToDoHandle:function(e){
        var item = this.data.todos[e.currentTarget.dataset.index]
        this.data.leftCount =  item.completed ? this.data.leftCount : (this.data.leftCount - 1) ;
        this.data.todos.splice(e.currentTarget.dataset.index, 1)
        this.setData({
          todos: this.data.todos,
          leftCount: this.data.leftCount
       })
      },
      toggleAllHandle: function(){
        //this在这里永远指向的是当前页面对象
        console.log(11)
        this.data.allCompleted = !this.data.allCompleted     
        var todos = this.data.todos  
        var that = this
        todos.forEach(function(item){
          item.completed = that.data.allCompleted 
        })
        this.setData({
          todos: this.data.todos,
          leftCount:  this.data.allCompleted? 0 : todos.length 
       })
      },
      clearHandle:function(){ 
        var todos = this.data.todos.filter(function(item){
          return !item.completed
        })
         this.setData({todos: todos})
      }
    })

效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 14]

点击clear Completed，只显示未完成的 任务:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 15]

### 细节优化和总结 ###

1：输入框中输入完成后，点击回车，就会添加

2：所有任务被清空后，不应该呈现列表和按钮

#### bindconfirm事件 ####

第一个问题的处理: bindconfirm事件

![在这里插入图片描述][20200627233706477.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 16]

#### 呈现问题–block ####

根据todos有没有数据，有数据就呈现todo列表和footer，没有就不显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 17]

<view class="container">
      <view class="header">
         <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
         <input type="text" placeholder="Anything here..." value="{
       {input}}" bindinput="inputChangeHandle" bindconfirm="addTodoHandle"/>
      </view>
      <block wx:if="{
       { todos.length }}">
      <view class="todos">
          <view class="item{
       { item.completed ? ' completed' : '' }}" 
          wx:for="{
       { todos}}" wx:key="{
       { index }}" bindtap="toggleTodoHandle" data-index="{
       { index }}">
            <icon type="{
       {item.completed? 'success':'circle'}}"  />
            <text>{
       {item.name}}</text>
             <icon type="clear" size="16" catchtap="removeToDoHandle" data-index="{
       { index }}"/>
          </view>    
      </view>
      <view class="footers">
        <text bindtap="toggleAllHandle">Toggle All</text>
         <text wx:if="{
       { leftCount }}"> {
       { leftCount }} {
       {leftCount > 1 ? 'items' : 'item' }} left</text>  
         <text bindtap="clearHandle">Clear completed</text>
      </view>
      </block>
       <view wx:else>
        <text>null</text>
       </view>
    </view>

看下效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 18]

会发现内容不见了，显示null，大功告成!  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 19]

## 真机演示 ##

点击预览:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 20]

出现个二维码，扫码就可在手机上看到效果.

--------------------

完

[https_github.com_zce_weapp-todos]: https://github.com/zce/weapp-todos
[20200627233320305.png]: https://img-blog.csdnimg.cn/20200627233320305.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627233336906.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627233350873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200627233402674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200627233418181.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200627233434117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200627233444208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200627233453478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200627233503586.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200627233520222.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200627233540417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200627233548801.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200627233604956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200627233615442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200627233624733.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200627233641220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200627233652544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200627233706477.png]: https://img-blog.csdnimg.cn/20200627233706477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200627233808449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200627233825791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200627233839390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200627233848548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20200627233900362.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70