小程序编程第6课

Myth丶恋晨 2023-02-19 02:26 4阅读 0赞

## 教程 ##

各位战友，今天是我们的第6课

这节课我们做一个：问好机器人

这个机器人能够根据你输入的时间，告诉你上午好，下午好，还是晚上好，如果你输错了，他还会提示你输错了。

现在我们来看看这个小程序的效果，当你输入8的时候，点击问好，然后就会弹出提示：上午好。当你输入15的时候，点击问好，然后就会弹出提示：下午好。当你输入21的时候，它就会弹出提示：晚上好。当你输入30的时候，它就会提示：输错了！

问好机器人演示

这个机器人，当你输入小于12的数字，它就告诉你上午好，当你输入大于等于12但小于18的数时，它就告诉你下午好。当你输入大于等于18但小于24时，它就提示你晚上好，当你输入大于等于24时，它就提示你：输错了！

用流程图来表示就是这样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70]

让我们看一看这节课的学习目标，这节课的目标是：理解if … else if …语句

现在我们开始做这个小程序

还是和之前一样，新建一个项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70 1]  
打开Index.js文件，删除第7行代码(下方这行)，保存一下

motto: 'Hello World',

打开index.wxml，删除第11行

<text class="user-motto">{ { motto}}</text>

然后再第10行后面增加如下两行代码并保存

打开index.js文件，在第52行末尾加上一个逗号，在第52行后面加上如下代码

bindInput: function (e) { 
    	this.setData({ 
    		time: Number(e.detail.value)
    	})
    },
    bindtap: function(e){ 
       
    }

然后保存一下

做这个问好机器人的核心是什么呢？

核心是上节课说的，利用条件判断语句来实现不同的弹窗提示

首先，我们定义一个变量来代表用户输入的时间

let time = this.data.time

this.data.time就是用户输入的数字

因为我们要有文字来提示用户，所以再定义一个tip变量，用来存放提示

let tip = ''

这里的tip变量被初始化为空字符串

现在我们就依照流程图来实现

首先判断用户输入的time是否小于12

if(time < 12){ 
    
    }

如果小于12，那么我们就把tip变量修改为

tip = '上午好'

否则呢？否则我们再判断用户time是否小于18

if(time<18){ 
      
    } else{ 
      
    }

如果小于18，那么我们就修改提示

tip = '下午好'

如果不小于18呢？

let time = this.data.time
     if (time < 12) { 
       tip = '上午好'
     } else { 
       if (time < 18) { 
         tip = '下午好'
       } else { 
         if (time < 24) { 
           tip = '晚上好'
         } else { 
           tip = '出错了'
         }
       }
     }

你可以看到，这个程序嵌套了很多个if else

这样非常难阅读，我们今天学习一个新的语句 if…else if…

if (条件1) 
    { 
        //语句1
    }
    else if (条件2)
    { 
        //语句2
    }

第一行的If很容易理解，这个else if怎么理解呢？

else if的意思是，直译过来就是，否则如果

用中文来形容，那就是，如果XXX，否则如果XXX

是不是感觉太难理解了，我们来看一看图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70 2]  
我们要实现的功能就是将对应的时间段提示对应的提示语，这实际上是数学中的分段函数。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70 3]  
我们的if…else if…语句就是为了解决这种分段函数的情况的

话不多说，我们先试一下

if (time < 12) { 
      tip = '上午好'
    } else if (time < 18) { 
      tip = '下午好'
    } else if (time < 24) { 
      tip = '晚上好'
    } else { 
      tip = '输错了'
    }

这样我们就实现了和刚才用 if else实现的功能，而且更方便阅读了

这个else if 就相当于上面线段的刻度，用来分割线段的

最后，我们要把这个提示展示给用户看

wx.showModal({ 
    	title: tip,
    	showCancel: false,
    	confirmText: '知道了'
    })

保存，试一下

当你输入8的时候，点击问好，然后就会弹出提示：上午好。当你输入15的时候，点击问好，然后就会弹出提示：下午好。当你输入21的时候，它就会弹出提示：晚上好。当你输入30的时候，它就会提示：输错了！

今天的作业：完善这个问好机器人，当你输入小于8的数字，它就告诉你早上好，当你输入8-11的数字时它就告诉你，上午好。当你输入11-13时，它就告诉你，中午好，当你输入13-18时，它就告诉你下午好，当你输入18—24时，它就提示你晚上好，当你输入大于24时，它就提示你：输错了！

## 附件 ##

index.js文件代码

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({ 
      data: { 
        time: 0,
        userInfo: { },
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      //事件处理函数
      bindViewTap: function () { 
        wx.navigateTo({ 
          url: '../logs/logs'
        })
      },
      onLoad: function () { 
        if (app.globalData.userInfo) { 
          this.setData({ 
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse) { 
          // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => { 
            this.setData({ 
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else { 
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({ 
            success: res => { 
              app.globalData.userInfo = res.userInfo
              this.setData({ 
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
        }
      },
      getUserInfo: function (e) { 
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo
        this.setData({ 
          userInfo: e.detail.userInfo,
          hasUserInfo: true
        })
      },
      bindInput: function (e) { 
        this.setData({ 
          time: Number(e.detail.value)
        })
      },
      bindtap: function (e) { 
        let time = this.data.time
        let tip = ''
        if (time < 12) { 
          tip = '上午好'
        } else if(time < 18) { 
          tip = '下午好'
        } else if(time < 24) { 
          tip = '晚上好'
        } else { 
          tip = '出错了'
        }
        wx.showModal({ 
          title: tip,
          showCancel: false,
          confirmText: '知道了'
        })
      }
    })

index.wxml代码

<view class="container">
      <view class="userinfo">
        <button wx:if="{ {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{ {userInfo.avatarUrl}}" mode="cover"></image>
          <text class="userinfo-nickname">{
       {userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <input bindinput="bindInput" type="number" placeholder="请输入时间"></input>
        <button bindtap="bindtap" type="primary">问好</button>
      </view>
    </view>

## 作业答案 ##

index.js文件

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({ 
      data: { 
        time: 0,
        userInfo: { },
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      //事件处理函数
      bindViewTap: function () { 
        wx.navigateTo({ 
          url: '../logs/logs'
        })
      },
      onLoad: function () { 
        if (app.globalData.userInfo) { 
          this.setData({ 
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse) { 
          // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => { 
            this.setData({ 
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else { 
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({ 
            success: res => { 
              app.globalData.userInfo = res.userInfo
              this.setData({ 
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
        }
      },
      getUserInfo: function (e) { 
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo
        this.setData({ 
          userInfo: e.detail.userInfo,
          hasUserInfo: true
        })
      },
      bindInput: function (e) { 
        this.setData({ 
          time: Number(e.detail.value)
        })
      },
      bindtap: function (e) { 
        let time = this.data.time
        let tip = ''
        if (time < 8) { 
          tip = '早上好'
        } else if(time < 11) { 
          tip = '上午好'
        } else if(time < 13) { 
          tip = '中午好'
        } else if(time < 18) { 
          tip = '下午好'
        } else if(time < 24) { 
          tip = '晚上好'
        } else { 
          tip = '出错了'
        }
        wx.showModal({ 
          title: tip,
          showCancel: false,
          confirmText: '知道了'
        })
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200618213243981.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200618213833525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200619003431294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200619003941394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ==,size_16,color_FFFFFF,t_70