目 錄

• 1 調查問卷
• • 題干
  • 答案
• 2、數字比較 （P36-40 5種方法實現比較功能）
• • 題干
  • 答案
• 3、音樂播放器中的標簽頁的切換
• • 題干
  • 答案
• 4、婚禮邀請函中的賓客信息頁面
• • 題干
  • 答案
• 5、婚禮地點頁面（map組件 書上P100）
• • 題干
  • 代碼
• 6、輪播圖
• 7、婚禮邀請函的底部標簽欄

1 調查問卷

題干

【本題10分】在小程序項目中利用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）redio-group （7）wx:for="{{sports}} （8）wx:key （9）checked="{{item.checked}}" （10）{{item.zm}}

2、數字比較 （P36-40 5種方法實現比較功能）

題干

【本題12分】在小程序項目的的index頁面中實現兩個數的比較如下圖1所示，在不改變index.wxml頁面結構的前提下，完成對應 的index.js實現如下功能：
在頁面本文框中輸入兩個數，單擊“比較”按鈕，在下方顯示如圖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;}

答案

//index.js const app = getApp() // 獲取應用實例 Page({/*** 頁面初始數據*/data:{num1:0,num2:0,result:""},/*** 事件處理函數*/numValue:function(e){this[e.currentTarget.id] = Number(e.detail.value)},compare:function(e){var str = '兩數相等'if(this.num1 > this.num2){str = '第一個數大'}else if(this.num1 < this.num2){str = '第二個數大'}this.setData({result:str})} })

3、音樂播放器中的標簽頁的切換

題干

【本題8分】小程序項目的的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)_______="changeTab" 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.currentTarget.id （8）e.detail.current

4、婚禮邀請函中的賓客信息頁面

題干

【本題10分】小程序項目的的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

5、婚禮地點頁面（map組件 書上P100）

題干

完成下列頁面

navi.png（直接剪切存下用）

代碼

在page/map/map.wxml 中編寫頁面結構

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

在map.wxss中編寫頁面樣式

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

map.js中編寫data數據和markertap()函數

//index.js const app = getApp() // 獲取應用實例 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:'北京市 海淀區'})} })

6、輪播圖

在page/index/info.wxml 文件中編寫

<swiper class="lunbotu" indicator-color="#fff" indicator-active-color="yellow" indicator-dots circular autoplay><swiper-item><image src="../../images/haizei1.gif"></image></swiper-item><swiper-item><image src="../../images/huoying1.png"></image></swiper-item><swiper-item><image src="../../images/guimie1.jpg"></image></swiper-item> </swiper>

在 index.wxss 中編寫樣式

.lunbotu{height:302rpx;margin-bottom:20px; } .lunbotu image{width:100%;height:100%; }

7、婚禮邀請函的底部標簽欄

app.json

"tabBar": {"color": "#FF000000","selectedColor": "#ff4c91","borderStyle": "white","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "images/invite.png","selectedIconPath": "images/invite.png","text": "邀請函"},{"pagePath": "pages/picture/picture","iconPath": "images/marry.png","selectedIconPath": "images/marry.png","text": "照片"},{"pagePath": "pagesideoideo","iconPath": "imagesideo.png","selectedIconPath": "imagesideo.png","text": "美好時光"},{"pagePath": "pages/map/map","iconPath": "images/map.png","selectedIconPath": "images/map.png","text": "婚禮地點"},{"pagePath": "pages/guest/guest","iconPath": "images/guest.png","selectedIconPath": "images/guest.png","text": "賓客信息"}]},

總結

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

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