“小程序案例：比较数字大小”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（→‎实现比较功能）
 
（未显示同一用户的20个中间版本）
第1行： 第1行：
−
==WXML代码==
+
 
 +
==效果==
 +
 
 +
[[文件:wexin2021100901.png|400px]]
 +
 
 +
==文件配置==
 +
===全局文件配置===
 +
开启了调试，运行程序后，就会在控制台中输出调试信息：
 +
 
 +
<nowiki>
 +
{
 +
  "pages": [
 +
    "pages/index/index",
 +
    "pages/test/test"
 +
  ],
 +
  "debug": true,
 +
  "window": {
 +
    "navigationBarTitleText": "数值比较",
 +
    "navigationBarBackgroundColor": "#369"
 +
  },
 +
  "sitemapLocation": "sitemap.json"
 +
}</nowiki>
 +
===页面级文件配置===
 +
导航栏标题为“数值比较”，颜色为蓝色：
 +
 
 +
设置下拉框的样式
 +
 
 
  <nowiki>
 
  <nowiki>
−
<view><text>请输入第1个数字：</text><input type="number" /></view>
+
{
−
<view><text>请输入第2个数字：</text><input type="number" /></view>
+
  "navigationBarTitleText": "数值比较",
 +
  "navigationBarBackgroundColor": "#369",
 +
  "enablePullDownRefresh": true,
 +
  "backgroundColor":"#ACDA64",
 +
  "backgroundTextStyle":"light"
 +
}</nowiki>
 +
 
 +
==编写页面==
 +
===WXML代码===
 +
 
 +
<nowiki>
 +
<view>
 +
  <text>请输入第1个数字：</text>
 +
  <input type="number" />
 +
</view>
 +
<view>
 +
  <text>请输入第2个数字：</text>
 +
  <input type="number" />
 +
</view>
 
<button>比较</button>
 
<button>比较</button>
−
<view><text>比较结果：</text></view></nowiki>
+
<view>
 +
  <text>比较结果：</text>
 +
</view></nowiki>
  
 
input组件的可选值：
 
input组件的可选值：
第22行： 第68行：
 
[[文件:wexin2021092701.png]]
 
[[文件:wexin2021092701.png]]
  
−
==WXSS==
+
===WXSS文件===
  
 
  <nowiki>
 
  <nowiki>
−
.class .container 选择所有class="container"的组件
+
view {
−
#id #id 选择id="#id"的组件
+
  margin: 50rpx;
−
element view 选择所有view组件
+
}
−
element, element view, text 选择所有view组件和所有text组件
+
input {
−
::after view::after 在view组件内的后面插入内容
+
  /* width: 600rpx; */
−
::before view::before 在view组件内的前面插入内容</nowiki>
+
  width: 300px; /* 此处将原来的600rpx改为300px */
−
 
+
   margin-top: 20rpx;
−
===选择器使用演示===
+
   border-bottom: 2rpx solid #ccc;
−
element:
 
−
 
 
−
  <nowiki>view {
 
−
   margin: 20px;
 
−
}</nowiki>
 
−
 
 
−
类选择器：
 
−
 
 
−
<nowiki>
 
−
.container {
 
−
   margin: 20px;
 
 
}
 
}
−
</nowiki>
 
  
−
::after选择器:
+
button {
−
 
+
  margin: 50rpx;
−
<nowiki>view::after {
+
  color: #fff;
−
   content: "测试";
+
   background: #369;
 
}</nowiki>
 
}</nowiki>
  
−
 
+
====尺寸单位====
−
==尺寸单位==
 
 
rpx 和px :
 
rpx 和px :
  
第83行： 第116行：
 
可以看到使用rpx 在不同设备上 使用，效果都非常接近
 
可以看到使用rpx 在不同设备上 使用，效果都非常接近
  
−
==样式导入==
 
−
===导入外部样式===
 
−
<nowiki>@import "test.wxss";</nowiki>
 
  
−
===全局样式===
 
−
app.wxss:
 
  
−
  <nowiki>button {letter-spacing: 12rpx;}</nowiki>
+
==实现比较功能==
 +
===添加数据===
 +
  <nowiki>
 +
data: {
 +
    num1:0,
 +
    num2:0,
 +
    result:null
 +
  },</nowiki>
 +
 
 +
===为两个input组件绑定不同事件处理函数===
 +
 
 +
给两个input组件 绑定不同事件num1Change、num2Change：
 +
 
 +
事件绑定：
 +
 
 +
<nowiki>
 +
<input type="number" bindchange="num1change“/>
 +
<input type="number" bindchange="num2change" />
 +
</nowiki>
  
−
==配置文件==
+
事件处理函数：
−
页面级文件配置导航栏标题为“数值比较”，颜色为蓝色：
 
  
−
  <nowiki>{
+
  <nowiki>
−
   "navigationBarTitleText": "数值比较",
+
num1change: function (e) {
−
   "navigationBarBackgroundColor": "#369"
+
   this.num1 = Number(e.detail.value)
−
}</nowiki>
+
},
 +
num2change: function (e) {
 +
   this.num2 = Number(e.detail.value)
 +
},
 +
</nowiki>
  
−
开启了调试，运行程序后，就会在控制台中输出调试信息：
+
比较功能：
  
 +
事件处理函数：
  
 
  <nowiki>
 
  <nowiki>
−
{
+
compare: function() {
−
   "pages": ["pages/index/index"],
+
  var str = '两数相等'
−
   "debug": true
+
  if (this.num1 > this.num2) {
−
}
+
    str = '第1个数大'
 +
  } else if (this.num1 < this.num2) {
 +
    str = '第2个数大'
 +
   }
 +
   this.setData({result: str})
 +
},
 +
</nowiki>
 +
 
 +
事件绑定：
  
 +
<nowiki>
 +
<button bindtap="compare">
 +
比较</button>
 
</nowiki>
 
</nowiki>
  
−
==页面逻辑==
+
数据绑定：
−
Page()函数参数对象的属性：
 
  
 
  <nowiki>
 
  <nowiki>
−
data Object 页面的初始数据
+
<view>
−
onLoad Function 生命周期回调函数，监听页面加载
+
  <text>比较结果：{{result}}</text>
−
onReady Function 生命周期回调函数，监听页面初次渲染完成
+
</view></nowiki>
−
onShow Function 生命周期回调函数，监听页面显示
+
 
−
onHide Function 生命周期回调函数，监听页面隐藏
+
===为两个input组件绑定相同事件处理函数===
−
onUnload Function 生命周期回调函数，监听页面卸载
+
 
−
onPullDownRefresh Function 页面事件处理函数，监听用户下拉动作
+
通过id获取元素：
−
onReachBottom Function 页面事件处理函数，页面上拉触底
 
−
onShareAppMessage Function 页面事件处理函数，用户单击右上角的分享按钮
 
−
onPageScroll Function 页面事件处理函数，页面滚动会连续触发
 
−
其他 Any 开发者可以添加任意的函数或者数据到data中，在页面的函数中可以通过this.*来访问。</nowiki>
 
  
−
onLoad、onReady、onShow函数为例进行演示：
+
<nowiki>
 +
<input id="num1" type="number" bindchange="change" />
 +
<input id="num2" type="number" bindchange="change" />
 +
</nowiki>
  
 
  <nowiki>
 
  <nowiki>
−
onLoad: function (options) {
+
change: function(e) {
−
   console.log('页面加载')
+
   this[e.currentTarget.id] =  Number(e.detail.value)
 
},
 
},
−
onReady: function () {
+
</nowiki>
−
   console.log('页面初次渲染完成')
+
 
 +
通过dataset获取元素：
 +
<nowiki>
 +
<input data-id="num1" type="number" bindchange="change2" />
 +
<input data-id="num2" type="number" bindchange="change2" />
 +
</nowiki>
 +
 
 +
 
 +
<nowiki>
 +
change: function(e) {
 +
   this[e.target.dataset.id] =  Number(e.detail.value)
 
},
 
},
−
onShow: function () {
+
</nowiki>
−
   console.log('页面显示')
+
===在页面中直接进行比较===
 +
 
 +
在text组件上处理计算逻辑：
 +
 
 +
事件处理函数：
 +
 
 +
<nowiki>
 +
change3: function (e) {
 +
   var data = {}
 +
  data[e.target.dataset.id] = Number(e.detail.value)
 +
  this.setData(data)
 
},
 
},
 +
</nowiki>
 +
 +
页面数据比较：
 +
 +
<nowiki>
 +
<text>比较结果：
 +
{{num1 > num2 ? '第1个数大' :
 +
  (num1 < num2 ? '第2个数大' :
 +
'两数相等')}}</text>
 +
</nowiki>
 +
 +
===通过条件渲染的方式比较大小===
 +
 +
 +
<nowiki>
 +
<text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
 +
  <text wx:if="{{num1 < num2}}">比较结果：第2个数大</text>
 +
  <text wx:if="{{num1 == num2}}">比较结果：两数相等</text>
 +
 +
</nowiki>
 +
 +
<nowiki>
 +
<text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
 +
  <text wx:elif="{{num1 < num2}}">比较结果：第2个数大</text>
 +
  <text wx:else>比较结果：两数相等</text>
 +
 +
</nowiki>
 +
 +
===通过表单获取input组件的值===
 +
form组件的bindsubmit属性用于绑定表单提交事件，在表单中，为两个input组件加上了name属性，表单提交时就会自动收集带有name属性的组件的值，
 +
 +
第10行代码 比较按钮添加了form-type属性，值为submit表示按钮用于提交表单。
 +
 +
表单组件：
 +
 +
<nowiki>
 +
<!--pages/test2/index.wxml-->
 +
<form bindsubmit="formCompare">
 +
    <view>
 +
      <text>请输入第1个数字：</text>
 +
      <input name="num1" type="number" />
 +
    </view>
 +
    <view>
 +
      <text>请输入第2个数字：</text>
 +
      <input name="num2" type="number"  />
 +
    </view>
 +
    <button form-type="submit">比较</button>
 +
  </form>
 +
<view>
 +
  <text>比较结果：{{result}}</text>
 +
</view>
 +
 +
</nowiki>
 +
 +
事件处理函数：
 +
 +
<nowiki>
 +
  formCompare: function(e) {
 +
    var str = '两数相等'
 +
    var num1 = Number(e.detail.value.num1)
 +
    var num2 = Number(e.detail.value.num2)
 +
    if (num1 > num2) {
 +
      str = '第1个1数大'
 +
    } else if (num1 < num2) {
 +
      str = '第2个数大'
 +
    }
 +
    this.setData({result: str})
 +
 
 +
  },
 
</nowiki>
 
</nowiki>

2021年10月27日 (三) 08:11的最新版本

效果

Wexin2021100901.png

文件配置

全局文件配置

开启了调试，运行程序后，就会在控制台中输出调试信息： 

{
  "pages": [
    "pages/index/index",
    "pages/test/test"
  ],
  "debug": true,
  "window": {
    "navigationBarTitleText": "数值比较",
    "navigationBarBackgroundColor": "#369"
  },
  "sitemapLocation": "sitemap.json"
}

页面级文件配置

导航栏标题为“数值比较”，颜色为蓝色：

设置下拉框的样式 

{
  "navigationBarTitleText": "数值比较",
  "navigationBarBackgroundColor": "#369",
  "enablePullDownRefresh": true,
  "backgroundColor":"#ACDA64",
  "backgroundTextStyle":"light"
}

编写页面

WXML代码

<view>
  <text>请输入第1个数字：</text>
  <input type="number" />
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number" />
</view>
<button>比较</button>
<view>
  <text>比较结果：</text>
</view>

input组件的可选值： 

text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

注： 

 <view>和<text>属于双边标签，由开始标签和结束标签两部分构成，<input>属于单边标签，只有“开始标签”，且结尾用“/>”表示。值得一提的是，<input>也可以写成双边标签，如“<input></input>”

设input组件type属性值为number：

Wexin2021092701.png

WXSS文件

view {
  margin: 50rpx;
}
input {
  /* width: 600rpx; */
  width: 300px;  /* 此处将原来的600rpx改为300px */
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}

button {
  margin: 50rpx;
  color: #fff;
  background: #369;
}

尺寸单位

rpx 和px :

使用rpx: 

view {margin: 50rpx;}
input {
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {margin: 50rpx;}

使用px: 

view {margin: 50rpx;}
input {
/* 此处将原来的600rpx改为300px */
  width: 300px; margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {margin: 50rpx;}

可以看到使用rpx 在不同设备上 使用，效果都非常接近


实现比较功能

添加数据

 data: {
     num1:0,
     num2:0,
     result:null
  },

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

给两个input组件 绑定不同事件num1Change、num2Change：

事件绑定： 

<input type="number" bindchange="num1change“/>
<input type="number" bindchange="num2change" />

事件处理函数： 

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 = '第1个数大'
  } else if (this.num1 < this.num2) {
    str = '第2个数大'
  }
  this.setData({result: str})
},

事件绑定： 

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

数据绑定： 

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

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

通过id获取元素： 

<input id="num1" type="number" bindchange="change" />
<input id="num2" type="number" bindchange="change" />


change: function(e) {
  this[e.currentTarget.id] =  Number(e.detail.value)
},

通过dataset获取元素： 

<input data-id="num1" type="number" bindchange="change2" />
<input data-id="num2" type="number" bindchange="change2" />




change: function(e) {
  this[e.target.dataset.id] =  Number(e.detail.value)
},

在页面中直接进行比较

在text组件上处理计算逻辑：

事件处理函数： 

change3: function (e) {
  var data = {}
  data[e.target.dataset.id] = Number(e.detail.value)
  this.setData(data)
},

页面数据比较： 

 <text>比较结果：
{{num1 > num2 ? '第1个数大' : 
   (num1 < num2 ? '第2个数大' :
 '两数相等')}}</text>

通过条件渲染的方式比较大小

<text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
  <text wx:if="{{num1 < num2}}">比较结果：第2个数大</text>
  <text wx:if="{{num1 == num2}}">比较结果：两数相等</text>



 <text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
  <text wx:elif="{{num1 < num2}}">比较结果：第2个数大</text>
  <text wx:else>比较结果：两数相等</text>

通过表单获取input组件的值

form组件的bindsubmit属性用于绑定表单提交事件，在表单中，为两个input组件加上了name属性，表单提交时就会自动收集带有name属性的组件的值，

第10行代码 比较按钮添加了form-type属性，值为submit表示按钮用于提交表单。

表单组件： 

<!--pages/test2/index.wxml-->
<form bindsubmit="formCompare">
    <view>
      <text>请输入第1个数字：</text>
      <input name="num1" type="number" />
    </view>
    <view>
      <text>请输入第2个数字：</text>
      <input name="num2" type="number"  />
    </view>
    <button form-type="submit">比较</button>
  </form>
<view>
  <text>比较结果：{{result}}</text>
</view>

事件处理函数： 

  formCompare: function(e) {
    var str = '两数相等'
    var num1 = Number(e.detail.value.num1)
    var num2 = Number(e.detail.value.num2)
    if (num1 > num2) {
      str = '第1个1数大'
    } else if (num1 < num2) {
      str = '第2个数大'
    }
    this.setData({result: str}) 
  
  },
取自“http://www.openbrains.net/mediawiki/index.php?title=小程序案例：比较数字大小&oldid=28548”