实验五 智能手机互联网程序设计(微信程序方向)实验报告

  • 请完成数值比较任务;

二、实验步骤与结果(给出对应的代码或运行结果截图)

index.js

Page({

/**

* 页面的初始数据

*/

data: {

num1:0,

num2:0,

num3:""

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

input_num1(e){

this.setData({

num1:e.detail.value

})

},

input_num2(e){

this.setData({

num2:e.detail.value

})

},

btn_tap(){

if(this.data.num1===this.data.num2){

this.setData({

num3:"两个数一样大"

})

}

if(this.data.num1<this.data.num2){

this.setData({

num3:"第一个数小于第二个数"

})

}

if(this.data.num1>this.data.num2){

this.setData({

num3:"第一个数大于第二个数"

})

}

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

index.wxml

<!--demo-1/demo-1.wxml-->

<form bindsubmit="">

<view>

<text>输入第一个数:</text>

<input type="text" bindinput="input_num1"/>

</view>

<view>

<text>输入第一个数:</text>

<input type="text" bindinput="input_num2"/>

</view>

<button form-type="submit" bind:tap="btn_tap">确定</button>

</form>

<view>

<text>比较结果:{{num3}}</text>

</view>

index.wxss

/* demo-1/demo-1.wxss */

view{

margin: 50rpx; /* 设置所有view组件的外边距为50rpx */

}

input{

width: 600rpx;/* 设置输入框的宽度为600rpx */

margin: 20rpx;/* 设置输入框顶部的外边距为20rpx */

border-bottom: 2rpx solid #ccc;/* 设置输入框底部边框为2rpx宽的灰色(#ccc)实线 */

}

button{

margin: 50rpx;/* 设置按钮的外边距为50rpx */

padding: 20rpx;/* 设置按钮内文字的字母间距为20rpx */

}

button {

color: #fff; /* 设置按钮文字颜色为白色(#fff) */

background-color: #360; /* 设置按钮背景颜色为深绿色 (#360)*/

}

三、问题总结与体会

思路为

  1. WXML

构建WXML框架

首先,将页面分为两大部分:表单输入部分和结果显示部分。在表单输入部分,用户可以输入两个数字;在结果显示部分,将展示这两个数字的比较结果。

使用<form>组件构建输入界面;使用<view>组件构建显示结果部分

在<form>内部,使用两个<view>组件分别包裹输入元素,使用<button>组件包裹提交按钮。

<form> -> <view>*2 & <button>

第一个<view>中包含一个<text>组件和一个<input>组件,<text>用于显示"请输入第1个数字:",<input>组件用于绑定用户输入的第一个数字,通过bindinput="input_num1"实现输入监听。

<view> -> <text> & <input bindinput="input_num1" />

第二个<view>中同样包含一个<text>组件和一个<input>组件,<text>用于显示"请输入第2个数字:",<input>组件用于绑定用户输入的第二个数字,通过bindinput="input_num2"实现输入监听。

<view> -> <text> & <input bindinput="input_num2" />

在<form>组件的末尾,使用<button>组件添加一个提交按钮。该按钮通过form-type="submit"定义为提交类型,通过bind:tap="tap_btn"实现点击事件的监听,按钮文本为"确定"。

使用<view>组件显示比较结果

在<view>组件中,使用<text>组件显示比较结果。其中,{{num3}}是用来动态显示比较结果的数据绑定表达式,<text>的内容为"比较结果:",后接动态数据。

2.WXSS

view{

/* 设置所有view组件的外边距为50rpx */

}

input{

/* 设置输入框的宽度为600rpx */

/* 设置输入框顶部的外边距为20rpx */

/* 设置输入框底部边框为2rpx宽的灰色(#ccc)实线 */

}

button{

/* 设置按钮的外边距为50rpx */

/* 设置按钮内文字的字母间距为20rpx */

}

button {

/* 设置按钮文字颜色为白色(#fff) */

/* 设置按钮背景颜色为深绿色 (#360)*/

}

3.JS

首先需要在data中定义绑定的数据:

data: {

num1:0,

num2:0,

num3:""

},

然后对绑定的事件进行描绘

// 定义处理第一个输入框数据的函数

事件绑定名称(e){

this.setData({

// 将输入的值设置为num1的值(根据注释补全代码)

})

},

// 定义处理第二个输入框数据的函数

事件绑定名称(e){

this.setData({

// 将输入的值设置为num2的值(根据注释补全代码)

})

},

// 定义点击按钮时的处理函数

事件绑定名称{

// 判断两个数是否相等

if(this.data.num1==this.data.num2){

this.setData({

// 如果相等,则设置num3为"两数相等"(根据注释补全代码)

})

}

// 判断第一个数是否小于第二个数

if (this.data.num1<this.data.num2) {

this.setData({

// 如果第一个数小于第二个数,设置num3为字符串"第二个数大"(根据注释补全代码)

})

}

// 判断第一个数是否大于第二个数

if (this.data.num1>this.data.num2) {

this.setData({

// 如果第一个数大于第二个数,设置num3为字符串"第一个数大"(根据注释补全代码)

})

}

},

相关推荐
陈思杰系统思考Jason9 小时前
系统思考—深层结构
百度·微信·微信公众平台·新浪微博·微信开放平台
ysdysyn1 天前
C# winfrom实现微信(其他应用)自动跟随C#窗口,拖动页面自动恢复到固定位置
开发语言·微信·c#·winform
程序员入门进阶1 天前
基于微信的追星小程序+ssm(lw+演示+源码+运行)
微信·小程序
2401_844139032 天前
Java爱情交友婚恋系统小程序源码
微信·微信小程序·小程序·微信公众平台·交友·微信开放平台
somgl3 天前
Wecom酱搭建企业微信发送消息
微信
悟空码字5 天前
使用免费的微信机器人,实现消息推送实时通知
微信·消息推送·群机器人
悟空码字5 天前
使用微信免费的内容安全识别接口,UGC场景开发检测违规内容功能
微信·ugc·内容安全识别
EasyCVR6 天前
GA/T1400视图库平台EasyCVR视频分析设备平台微信H5小程序:智能视频监控的新篇章
微信·小程序·音视频
SCRM_huke6 天前
微信商家转账到零钱完整开通说明
微信·微信小程序·小程序·微信开放平台
二喵看世界7 天前
今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 11月1日,星期五
经验分享·笔记·其他·微信·课程设计·微信公众平台·微信开放平台