1.在小程序项目的的index页面中实现两个数的比较如下图1所示，在不改变index.wxml页面结构的前提下，完成对应的index.js实现如下功能：

(1)在页面本文框中输入两个数，单击“比较”按钮，在下方显示如图2所示信息(比较结果可以是：第1个数大、第2个数大、两个数相等)。
注意：将index.js文件的Page()函数中自己编写的代码粘贴到答题框中。

/*index.wxml页面结构代码如下：*/

<view>

    <text>请输入第1个数值：</text>
    <input id="num1"   type="number" bindinput="numValue" />

</view>

<view>

    <text>请输入第2个数值：</text>
    <input id="num2"  type="number"  bindinput="numValue" />

</view>

<button bindtap="compare">比较</button>

<view >

    <text>比较结果：{{result}}</text>

</view>

/*index.wxss页面样式代码*/
view,button{margin:30rpx;}

view.title{text-align: center;color:red;font-size: 50rpx;}

input{border: 1px solid #ccc;margin-top: 10px;height: 80rpx;}

button{background-color: blue;}

在这里插入图片描述

答案

Page({

    data: {
        num1:0,
        num2:0,
        result:""
    },
    numValue:function(e)
    {
        if(e.currentTarget.id=="num1")
        {
            this.num1=Number(e.detail.value)
        }
       if(e.currentTarget.id=="num2")
       {
          this.num2=Number(e.detail.value)
       }
    },
    compare:function()
    {
        var str=""
        if(this.num1>this.num2)
        {
          str="第一个数比较大"
        }
        else if(this.num1<this.num2)
        {
          str="第二个数比较大"
        }else if(this.num1==this.num2)
        {
          str="两个数相等"
        }
        this.setData({
          result:str
        })
    }
})

另一种答案

Page({

    data: {
        num1:0,
        num2:0,
        result:""
    },
    numValue:function(e)
    {
        this[e.currentTarget.id]=Number(e.detail.value)
    },
    compare:function()
    {
        var str="两个数相等"
        if(this.num1>this.num2)
        {
          str="第一个数比较大"
        }
        else if(this.num1<this.num2)
        {
          str="第二个数比较大"
        }
        this.setData({
          result:str
        })
    }
})

2.小程序项目中利用index.js中给出的数据，补充完整index.wxml中的代码，渲染出如下图所示的效果。

注意：标清填空编号，按照编号顺序将自己填写的代码写到答题框中。

/*index.js中Page()函数代码如下：*/

Page({

  data:{

    name:'王五',
    gender:[
      {name:'男',value:'0',checked:false},
      {name:'女',value:'1',checked:true}
    ],

    sports:[
      {zm:'跑步',value:'pb',checked:false},
      {zm:'打篮球',value:'dlq',checked:true},
      {zm:'踢足球',value:'tzq',checked:false},
      {zm:'跳绳',value:'ts',checked:true}
    ]

  }

})

/*index.wxss页面样式代码如下：*/

view{margin:30rpx;}

input{border: 1px solid #ccc;margin-top: 10px;height: 80rpx;}

button{background-color: blue;}

/*index.wxml页面结构代码如下：*/

<view class="container">

  <form>

    <view class="nn">
      <text>姓名:</text>
      <input type="text" name="name" ____(1)_______ />
    </view>

    <view class="ss">
      <text>性别:</text>
      <______(2)_______name="gender">
          
        <label _____(3)______    wx:key="value">
          <radio value="{{item.value}}" _____(4)_______ />______(5)______
        </label>

      </_____(6)_______>

    </view>

    <view class="zz">

      <text>喜欢的运动:</text>
        
      <checkbox-group name="sports">         
        <label _____(7)_______ _____(8)______="*this">
          <checkbox value="{{item.value}}" ______(9)_________ />_____(10)______
        </label>
      </checkbox-group>

    </view>

  </form>

</view>

《》《》在这里插入图片描述

答案

(1) value="{{name}}"
(2) radio-group
(3) wx:for="{{gender}}"
(4) checked="{{item.checked}}"
(5) {{item.name}}
(6) radio-group
(7) wx:for="{{sports}}"
(8) wx:key
(9) checked="{{item.checked}}"
(10){item.zm}}

wxml完整代码

<view class="container">

<form>

  <view class="nn">
    <text>姓名:</text>
    <input type="text" name="name" value="{{name}}" />
  </view>

  <view class="ss">
    <text>性别:</text>
    
    <radio-group name="gender">
      <label wx:for="{{gender}}"    wx:key="value">
        <radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
      </label>
    </radio-group>
  </view>

  <view class="zz">
    <text>喜欢的运动:</text>

    <checkbox-group name="sports">
      <label wx:for="{{sports}}" wx:key="*this">
        <checkbox value="{{item.value}}" checked="{{item.checked}}"/>{{item.zm}}
      </label>
    </checkbox-group>
  </view>

</form>

</view>

3.小程序项目的的index页面运行后效果如下图所示，补充完整index.wxml和index.js中的代码，完成实现如下功能：

(1)单击页面上面标签上的文字，文字颜色变为黄色，线条变为红的，同时下面的显示相应的颜色块；

(2)在页面颜色块上滑动时，标签上相应文字变为黄色，线条变为红的。

注意：标清填空编号，按照编号顺序将自己填写的代码写到答题框中。

/*index.wxml页面结构代码如下：*/

<view class="tab">

  <view class="tab-item {{item==0?'active':''}}" bindtap="changeItem" id="0">粉色</view>
  <view class="tab-item _____(1)________ bindtap="changeItem" ____(2)______>绿色</view>
  <view class="tab-item ______(3)_______ bindtap="changeItem" _____(4)________>蓝色</view>

</view>

<swiper current="___(5)____"  _____(6)_______="changTab" circular="true">

  <swiper-item>
    <view style="background:pink;"></view>
  </swiper-item>

  <swiper-item>
    <view style="background:green;"></view>
  </swiper-item>

  <swiper-item>
    <view style="background:blue;"></view>
  </swiper-item>

</swiper>

/*index.wxss页面样式代码如下：*/

.tab {display: flex;background-color:#000;color:#fff;}

.tab-item {flex: 1;font-size: 10pt;text-align: center;line-height: 72rpx;border-bottom: 6rpx solid #eee;}

.active{color: yellow;border-bottom-color:red;}

swiper{height:400rpx;}

swiper view{height:100%;}

/*index.js代码如下：*/

Page({

  data:{

      item:0
  },

  changeItem(e){
  
    this.setData({
     item:_____(7)________
    })

  },

  changeTab(e){

    this.setData({
      item:____(8)______
    })

  }

})

在这里插入图片描述

答案

(1){{item==1?'active':''}}
(2)id="1"
(3){{item==2?'active':''}}
(4)id="2"
(5){{item}}
(6)bindchange
(7)e.target.id
(8)e.detail.current

wxml完整代码

<view class="tab">

<view class="tab-item {{item==0?'active':''}}" bindtap="changeItem" id="0">粉色</view>
<view class="tab-item {{item==1?'active':''}}" bindtap="changeItem" id="1">绿色</view>
<view class="tab-item {{item==2?'active':''}}" bindtap="changeItem" id="2">蓝色</view>

</view>

<swiper current="{{item}}"  bindchange="changTab" circular="true">

<swiper-item>
  <view style="background:pink;"></view>
</swiper-item>

<swiper-item>
  <view style="background:green;"></view>
</swiper-item>

<swiper-item>
  <view style="background:blue;"></view>
</swiper-item>

</swiper>

js完整代码

Page({

    data:{
        item:0
    },
  
    changeItem(e){
      this.setData({
       item:e.target.id
      })
    },
    
    changTab(e){
      this.setData({
        item:e.detail.current
      })
  
    }
  
  })

4.小程序项目的的index页面运行后效果如下图1所示，补充完整index.wxml和index.js中的代码，完成实现如下功能：

(1)页面中参加婚礼人数利用picker组件可以进行人数的选择如图2；

(2)单击“提交”按钮，当姓名不为空且手机号长度为13位是显示提交成功，否则显示信息错误提示如图3。

注意：标清填空编号，按照编号顺序将自己填写的代码写到答题框中。

/*index.wxml页面结构代码如下：*/

<form _______(1)_____="formSubmit">

    <view class="content">

        <view>
            <input name="xm" type="text"  placeholder="输入您的姓名:" placeholder-class="phcolor" />
        </view>

        <view>
            <input name="phone" type="text"  placeholder="输入您的手机号:" placeholder-class="phcolor" />
        </view>

        <view>
            <picker name="num"  _____(2)_______="pickerChange"   range="_____(3)_______">
                参加婚礼人数：_______(4)__________
            </picker>

        </view>

        <button form-type="____(5)_____" >提交</button>

    </view>

</form>

/*index.wxss页面样式代码如下：*/

page{background-color: #eee;}

.content{width: 80vw;margin:10vw;}

.content>view{font-size:2.8vh;border:1px solid #ff4c91;border-radius:10rpx;padding:1.5vh 40rpx;margin-bottom:1.5vh;color: #ff4c91;}

.content button{font-size:3vh;line-height: 5.5vh;background-color: #ff4c91;color:#fff;}

.content picker{padding: 0.7vh 0;}

.content .phcolor{color: #ff4c91;}

/*index.js代码如下：*/

Page({

  data: {

    picker: {
      arr: ['1', '2', '3', '4', '5', '6'],
      index: 0
    }

  },

  pickerChange: function(e) {

    this.setData({
      '_____(6)_______': e.detail.value
    })

  },

  formSubmit: function(e) {

    var name = ______(7)_________
    var phone = ______(8)___________
    
    if(name&&phone.length==13)
    {
      ______(9)________({
        title: '提交成功',
        icon: 'success',
        duration: 1500
      })

    }

    else{
      ______(10)_______({
      	title: '信息错误',
        icon: 'error',
        duration: 1500
      })

    }

  }

})

在这里插入图片描述

答案

(1)bindsubmit
(2)bindchange
(3){{picker.arr}}
(4){{picker.arr[picker.index]}}
(5)submit
(6)picker.index
(7)e.detail.value.xm
(8)e.detail.value.phone
(9)wx.showToast
(10)wx.showToast

wxml完整代码

<form bindsubmit="formSubmit">

<view class="content">

    <view>
        <input name="xm" type="text"  placeholder="输入您的姓名:" placeholder-class="phcolor" />
    </view>

    <view>
        <input name="phone" type="text"  placeholder="输入您的手机号:" placeholder-class="phcolor" />
    </view>

    <view>
        <picker name="num"  bindchange="pickerChange"   range="{{picker.arr}}">
            参加婚礼人数：{{picker.arr[picker.index]}}
        </picker>
    </view>

    <button form-type="submit" >提交</button>

</view>

</form>

js完整代码

Page({

    data: {
      picker: {
        arr: ['1', '2', '3', '4', '5', '6'],
        index: 0
      } 
    },
  
    pickerChange: function(e) {
      this.setData({
        'picker.index': e.detail.value
      })
    },
  
    formSubmit: function(e) {
  
      var name = e.detail.value.xm
      var phone = e.detail.value.phone
  
      if(name&&phone.length==13)
      {
        wx.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 1500  
        })
  
      }
  
      else{  
        wx.showToast({ 
          title: '信息错误',  
          icon: 'error',  
          duration: 1500  
        }) 
      } 
      
    }  
  })

补充

两个数的比较多种方法实现


1、为两个input组件绑定不同事件处理函数

index.wxml

<view>
<text>请输入第一个数字：</text>
<input  type="number" bindchange="num1change"/>
</view>

<view>
<text>请输入第二个数字：</text>
<input type="number" bindchange="num2change" />
</view>

<button bindtap="compare">比较大小</button>
<text>结果:{{result}}</text>

index.js

Page({

    data: {
        num1:0,
        num2:0,
        result:""
    },
    num1change:function(e)
    {
        this.num1=Number(e.detail.value)
    },
    num2change:function(e)
    {
        this.num2=Number(e.detail.value)
    },
    compare:function()
    {
        var str="两个数相等"
        if(this.num1>this.num2)
        {
          str="第一个数比较大"
        }
        else if(this.num1<this.num2)
        {
          str="第二个数比较大"
        }
        this.setData({
          result:str
        })
    }
})

2、为两个input组件绑定相同事件处理函数

第一种方法

index.wxml

<view>
<text>请输入第一个数字：</text>
<input id="num1" type="number" bindchange="change"/>
</view>

<view>
<text>请输入第二个数字：</text>
<input id="num2" type="number" bindchange="change" />
</view>

<button bindtap="compare">比较大小</button>
<text>结果:{{result}}</text>

index.js

Page({

    data: {
        num1:0,
        num2:0,
        result:""
    },
   change:function(e)
    {
        this[e.currentTarget.id]=Number(e.detail.value)
    },
    compare:function()
    {
        var str="两个数相等"
        if(this.num1>this.num2)
        {
          str="第一个数比较大"
        }
        else if(this.num1<this.num2)
        {
          str="第二个数比较大"
        }
        this.setData({
          result:str
        })
    }
})

第二种方法

index.wxml

<view>
<text>请输入第一个数字：</text>
<input data-id="num1" type="number" bindchange="change"/>
</view>

<view>
<text>请输入第二个数字：</text>
<input data-id="num2" type="number" bindchange="change" />
</view>

<button bindtap="compare">比较大小</button>
<text>结果:{{result}}</text>

index.js

Page({

    data: {
        num1:0,
        num2:0,
        result:""
    },
   change:function(e)
    {
        this[e.target.dataset.id]=Number(e.detail.value)
    },
    compare:function()
    {
        var str="两个数相等"
        if(this.num1>this.num2)
        {
          str="第一个数比较大"
        }
        else if(this.num1<this.num2)
        {
          str="第二个数比较大"
        }
        this.setData({
          result:str
        })
    }
})

注：这两种方法的不同之处是一个使用的是id属性另一个是data-id属性

id属性通过e.currentTarget.id获取绑定事件的id属性值

data-id属性通过e.target.dataset.id获取绑定事件的data-id的属性值


3、通过表单获取input组件的值

index.wxml

<form bindsubmit="formCompare">
    <view>
        <text>请输入第一个数字：</text>
        <input name="num1" type="number" />
    </view>

    <view>
        <text>请输入第二个数字：</text>
        <input name="num2" type="number" />
    </view>

    <button form-type="submit">比较大小</button>
</form>
<view>
    <text>结果:{{result}}</text>
</view>

index.js

Page({

    data: {
        num1:0,
        num2:0,
        result:""
    },
    formCompare:function(e)
    {
        var str="两个数相等"
        this.num1=Number(e.detail.value.num1)
        this.num2=Number(e.detail.value.num2)
        if(this.num1>this.num2)
        {
          str="第一个数比较大"
        }
        else if(this.num1<this.num2)
        {
          str="第二个数比较大"
        }
        this.setData({
          result:str
        })
    }
})

表单验证

index.wxml

<view>
    <input name="name" bindblur="nameChange" placeholder="输入你的姓名"/>
</view>
<view>
    <input name="phone" bindblur="phoneChange" placeholder="输入你的手机号码"/>
</view>

index.js

Page({

   nameChange:function(e){
       this.checkName(e.detail.value)
   },
   phoneChange:function(e){
       this.checkPhone(e.detail.value)
   },
   checkName:function(data){
        var reg=/^[\u4E00-\u9FA5A-Za-z]+$/;
        return this.check(data,reg,'姓名输入错误！')
   },
   checkPhone:function(data){
        var reg=/^(((13)|(15)|(17)|(18))\d{9})$/
        return this.check(data,reg,'手机号输入有误！')
   },
   check:function(data,reg,errMsg){
       if(!reg.test(data)){
           wx.showToast({title:errMsg,icon:'none',duration:1500})
           return false
       }
       return true
   }
})

map

1、获取当前位置信息

index.wxml

<button bindtap="buttonTap">查看我的位置</button>

index.js

Page({

    buttonTap:function(){
        wx.getLocation({
          type:'gcj02',
          success:function(res){
              wx.openLocation({
                latitude: res.latitude,
                longitude: res.longitude,
              })
          }
        })
    }
})

主要了解逻辑文件js中的方法

2、设置固定位置信息

index.wxml

<map latitude="{{latitude}}"  longitude="{{longitude}}"  markers="{{markers}}"  
bindmarkertap="markertap" />

index.wxss

map{
	width:100vw;
	height:100vh;
}

index.js

Page({
  data: {
  	latitude:40.06021, 
  	longitude: 116.3433,
    markers: [{
    	iconPath:'/images/navi.png', 
    	id:0,      	
    	latitude:40.06021, 
    	longitude: 116.3433,
    	width:50,
    	height:50
    }]      
  },
  markertap: function() {
   wx.openLocation({
      latitude:this.data.latitude,
      longitude:this.data.longitude,
      name:'xx大酒店',
      address:'北京市 海淀区'
    })
  }
})
# 微信小程序 # 小程序
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

HAS2024：华为云以系统性创新加速千行万业智能化升级

avatar 华为云开发者联盟
cover

数仓的两种轻量级数据交换格式：json与jsonb

avatar 华为云开发者联盟
cover

如何使用云数据库GaussDB管理平台进行实例安装？

avatar 华为云开发者联盟