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.xmvar phone = e.detail.value.phoneif(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:'北京市 海淀區'})} })

總結

以上是生活随笔為你收集整理的微信小程序大题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。