微信小程序大题
1.在小程序项目的的index页面中实现两个数的比较如下图1所示，在不改变index.wxml页面结构的前提下，完成对应的index.js实现如下功能：(1)在页面本文框中输入两个数，单击“比较”按钮，在下方显示如图2所示信息(比较结果可以是：第1个数大、第2个数大、两个数相等)。注意：将index.js文件的Page()函数中自己编写的代码粘贴到答题框中。/*index.wxml页面结构代码如下
·
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:'北京市 海淀区'
})
}
})
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)