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

来自CloudWiki
跳转至： 导航， 搜索
（→‎注册程序）
（→‎实现比较功能）
 
（未显示同一用户的14个中间版本）
第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组件绑定不同事件处理函数===
−
页面级文件配置导航栏标题为“数值比较”，颜色为蓝色：
 
  
−
<nowiki>{
+
给两个input组件 绑定不同事件num1Change、num2Change：
−
  "navigationBarTitleText": "数值比较",
+
 
−
  "navigationBarBackgroundColor": "#369"
+
事件绑定：
−
}</nowiki>
 
  
−
开启了调试，运行程序后，就会在控制台中输出调试信息：
+
<nowiki>
 +
<input type="number" bindchange="num1change“/>
 +
<input type="number" bindchange="num2change" />
 +
</nowiki>
  
 +
事件处理函数：
  
 
  <nowiki>
 
  <nowiki>
−
{
+
num1change: function (e) {
−
   "pages": ["pages/index/index"],
+
   this.num1 = Number(e.detail.value)
−
   "debug": true
+
},
−
}
+
num2change: function (e) {
−
 
+
   this.num2 = Number(e.detail.value)
 +
},
 
</nowiki>
 
</nowiki>
  
−
==页面逻辑==
+
比较功能：
−
===生命周期回调函数===
 
  
−
Page()函数参数对象的属性：
+
事件处理函数：
  
 
  <nowiki>
 
  <nowiki>
−
data Object 页面的初始数据
+
compare: function() {
−
onLoad Function 生命周期回调函数，监听页面加载
+
  var str = '两数相等'
−
onReady Function 生命周期回调函数，监听页面初次渲染完成
+
  if (this.num1 > this.num2) {
−
onShow Function 生命周期回调函数，监听页面显示
+
    str = '第1个数大'
−
onHide Function 生命周期回调函数，监听页面隐藏
+
  } else if (this.num1 < this.num2) {
−
onUnload Function 生命周期回调函数，监听页面卸载
+
    str = '第2个数大'
−
onPullDownRefresh Function 页面事件处理函数，监听用户下拉动作
+
  }
−
onReachBottom Function 页面事件处理函数，页面上拉触底
+
  this.setData({result: str})
−
onShareAppMessage Function 页面事件处理函数，用户单击右上角的分享按钮
+
},
−
onPageScroll Function 页面事件处理函数，页面滚动会连续触发
+
</nowiki>
−
其他 Any 开发者可以添加任意的函数或者数据到data中，在页面的函数中可以通过this.*来访问。</nowiki>
 
  
−
onLoad、onReady、onShow函数为例进行演示：
+
事件绑定：
  
 
  <nowiki>
 
  <nowiki>
−
onLoad: function (options) {
+
<button bindtap="compare">
−
  console.log('页面加载')
+
比较</button>
−
},
 
−
onReady: function () {
 
−
  console.log('页面初次渲染完成')
 
−
},
 
−
onShow: function () {
 
−
  console.log('页面显示')
 
−
},
 
 
</nowiki>
 
</nowiki>
  
−
====值得一提====
+
数据绑定：
−
单击“…”会在底部弹出一个菜单，在菜单中有一项“转发”，单击转发就会触发onShareAppMessage事件。单击“”可以在前台、后台之间切换。
 
  
−
====options====
+
<nowiki>
−
在onLoad函数中，有一个参数options,
+
<view>
 +
  <text>比较结果：{{result}}</text>
 +
</view></nowiki>
  
−
表示打开当前页面路径中的参数，
+
===为两个input组件绑定相同事件处理函数===
  
−
它可以在当前页面被其他页面打开的情况下接收一些参数。
+
通过id获取元素：
  
−
pages/index/index.js:
+
<nowiki>
 +
<input id="num1" type="number" bindchange="change" />
 +
<input id="num2" type="number" bindchange="change" />
 +
</nowiki>
  
 
  <nowiki>
 
  <nowiki>
−
onReady: function() {
+
change: function(e) {
−
   wx.navigateTo({
+
   this[e.currentTarget.id] =  Number(e.detail.value)
−
    url: '/pages/test/test?name1=value1&name2=value2'
 
−
  })
 
 
},
 
},
 
</nowiki>
 
</nowiki>
  
−
pages/test/test.js:
+
通过dataset获取元素：
 +
<nowiki>
 +
<input data-id="num1" type="number" bindchange="change2" />
 +
<input data-id="num2" type="number" bindchange="change2" />
 +
</nowiki>
  
−
<nowiki>onLoad: function (options) {
 
−
  console.log(options)
 
−
},</nowiki>
 
  
−
===页面处理函数===
+
<nowiki>
−
pages/index/index.js中使用这3个页面处理函数：
+
change: function(e) {
 +
  this[e.target.dataset.id] =  Number(e.detail.value)
 +
},
 +
</nowiki>
 +
===在页面中直接进行比较===
  
−
  <nowiki>onPullDownRefresh: function () {console.log('此时用户下拉触顶')},
+
在text组件上处理计算逻辑：
−
onReachBottom: function () {console.log('此时用户上拉触底')},
+
 
−
onPageScroll: function (options) {
+
事件处理函数：
−
   console.log('此时用户正在滚动页面')
+
 
−
   console.log('滚动距离：' + options.scrollTop)
+
  <nowiki>
 +
change3: function (e) {
 +
  var data = {}
 +
   data[e.target.dataset.id] = Number(e.detail.value)
 +
   this.setData(data)
 
},
 
},
 
</nowiki>
 
</nowiki>
  
−
===组件处理函数===
+
页面数据比较：
−
组件事件处理函数用于为组件绑定事件：
 
  
 
  <nowiki>
 
  <nowiki>
−
<button bindtap="compare">比较</button>
+
<text>比较结果：
−
compare: function (e) {
+
{{num1 > num2 ? '第1个数大' :  
−
  console.log('比较按钮被单击了')
+
  (num1 < num2 ? '第2个数大' :
−
  console.log(e)
+
'两数相等')}}</text>
−
},
 
 
</nowiki>
 
</nowiki>
  
−
====e.target和e.currentTarget====
+
===通过条件渲染的方式比较大小===
−
对比e.target和e.currentTarget：
+
 
  
 
  <nowiki>
 
  <nowiki>
−
<view bindtap="viewtap" id="outer">
+
<text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
−
  outer
+
   <text wx:if="{{num1 < num2}}">比较结果：第2个数大</text>
−
   <view id="inner">inner</view>
+
  <text wx:if="{{num1 == num2}}">比较结果：两数相等</text>
−
</view>
 
−
viewtap: function(e) {
 
−
  console.log(e.target.id + '-' + e.currentTarget.id)
 
−
},
 
  
 
</nowiki>
 
</nowiki>
  
−
====常用的冒泡事件====
+
<nowiki>
−
冒泡事件是指当一个组件上的事件被触发后，事件会向父节点传递，而非冒泡事件不会向父节点传递。一些组件还拥有一些专门的事件，如form组件的submit事件、input组件的input事件等
+
<text wx:if="{{num1 > num2}}">比较结果：第1个数大</text>
 +
  <text wx:elif="{{num1 < num2}}">比较结果：第2个数大</text>
 +
  <text wx:else>比较结果：两数相等</text>
 +
 
 +
</nowiki>
  
−
<nowiki>
+
===通过表单获取input组件的值===
−
属性 类型
+
form组件的bindsubmit属性用于绑定表单提交事件，在表单中，为两个input组件加上了name属性，表单提交时就会自动收集带有name属性的组件的值，
−
touchstart 手指触摸动作开始
 
−
touchmove 手指触摸后移动
 
−
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
 
−
touchend 手指触摸动作结束
 
−
tap 手指触摸后马上离开
 
−
longpress 手指触摸后，超过350ms再离开。如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</nowiki>
 
  
−
[[文件:wexin21092801.png|600px]]
+
第10行代码 比较按钮添加了form-type属性，值为submit表示按钮用于提交表单。
  
−
==注册程序==
+
表单组件：
−
在app.js文件中调用App()函数：
 
  
 
  <nowiki>
 
  <nowiki>
−
onLaunch: function(options) {console.log('onLaunch执行')},
+
<!--pages/test2/index.wxml-->
−
onShow: function (options) {console.log('onShow执行')},
+
<form bindsubmit="formCompare">
−
onHide: function() {console.log('onHide执行')},
+
    <view>
−
onError: function(error) {console.log('onError执行')},
+
      <text>请输入第1个数字：</text>
−
onPageNotFound: function (options) {console.log('onPageNotFound执行')}
+
      <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>
  
−
[[文件:wexin2021092801.png|600px]]
+
事件处理函数：
  
−
onLaunch()和onShow()函数触发后返回的字段：
+
<nowiki>
−
 
+
  formCompare: function(e) {
−
*path：打开小程序的路径。
+
    var str = '两数相等'
−
*query：打开小程序的query。
+
    var num1 = Number(e.detail.value.num1)
−
*scene：打开小程序的场景值。
+
    var num2 = Number(e.detail.value.num2)
−
*shareTicket：获取到shareTicket。
+
    if (num1 > num2) {
−
*referrerInfo：获取来源于小程序、公众号的AppId等
+
      str = '第1个1数大'
 +
    } else if (num1 < num2) {
 +
      str = '第2个数大'
 +
    }
 +
    this.setData({result: str})
 +
 
 +
  },
 +
</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”