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

来自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}) 
  
  },