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

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