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

2021年10月13日 (三) 01:10的版本 （查看源代码） Cloud17（讨论 | 贡献） （→‎编写页面） ←上一编辑		2021年10月26日 (二) 09:56的版本 （查看源代码） Cloud17（讨论 | 贡献） 下一编辑→
第116行：		第116行：
	可以看到使用rpx 在不同设备上 使用，效果都非常接近		可以看到使用rpx 在不同设备上 使用，效果都非常接近
−	==页面逻辑==
−	===生命周期回调函数===
−	Page()函数参数对象的属性：
−
−	<nowiki>
−	data Object 页面的初始数据
−	onLoad Function 生命周期回调函数，监听页面加载
−	onReady Function 生命周期回调函数，监听页面初次渲染完成
−	onShow Function 生命周期回调函数，监听页面显示
−	onHide Function 生命周期回调函数，监听页面隐藏
−	onUnload Function 生命周期回调函数，监听页面卸载
−	onPullDownRefresh Function 页面事件处理函数，监听用户下拉动作
−	onReachBottom Function 页面事件处理函数，页面上拉触底
−	onShareAppMessage Function 页面事件处理函数，用户单击右上角的分享按钮
−	onPageScroll Function 页面事件处理函数，页面滚动会连续触发
−	其他 Any 开发者可以添加任意的函数或者数据到data中，在页面的函数中可以通过this.*来访问。</nowiki>
−
−	onLoad、onReady、onShow函数为例进行演示：
−
−	<nowiki>
−	onLoad: function (options) {
−	console.log('页面加载')
−	},
−	onReady: function () {
−	console.log('页面初次渲染完成')
−	},
−	onShow: function () {
−	console.log('页面显示')
−	},
−	</nowiki>
−
−	====值得一提====
−	单击“…”会在底部弹出一个菜单，在菜单中有一项“转发”，单击转发就会触发onShareAppMessage事件。单击“”可以在前台、后台之间切换。
−
−	====options====
−	在onLoad函数中，有一个参数options,
−
−	表示打开当前页面路径中的参数，
−
−	它可以在当前页面被其他页面打开的情况下接收一些参数。
−
−	pages/index/index.js:
		+	==实现比较功能==
		+	===添加数据===
	<nowiki>		<nowiki>
−	onReady: function() {	+	data: {
−	wx.navigateTo({	+	num1:0,
−	url: '/pages/test/test?name1=value1&name2=value2'	+	num2:0,
−	})	+	result:null
−	},	+	},</nowiki>
−	</nowiki>
−
−	pages/test/test.js:
−
−	<nowiki>onLoad: function (options) {
−	console.log(options)
−	},</nowiki>
−
−	===页面处理函数===
−	pages/index/index.js中使用这3个页面处理函数：
−
−	<nowiki>onPullDownRefresh: function () {console.log('此时用户下拉触顶')},
−	onReachBottom: function () {console.log('此时用户上拉触底')},
−	onPageScroll: function (options) {
−	console.log('此时用户正在滚动页面')
−	console.log('滚动距离：' + options.scrollTop)
−	},
−	</nowiki>
−	===组件处理函数===
−	组件事件处理函数用于为组件绑定事件：
−
−	<nowiki>
−	<button bindtap="compare">比较</button>
−	compare: function (e) {
−	console.log('比较按钮被单击了')
−	console.log(e)
−	},
−	</nowiki>
−
−	====e.target和e.currentTarget====
−	对比e.target和e.currentTarget：
−
−	<nowiki>
−	<view bindtap="viewtap" id="outer">
−	outer
−	<view id="inner">inner</view>
−	</view>
−	viewtap: function(e) {
−	console.log(e.target.id + '-' + e.currentTarget.id)
−	},
−
−	</nowiki>
−
−	====常用的冒泡事件====
−	冒泡事件是指当一个组件上的事件被触发后，事件会向父节点传递，而非冒泡事件不会向父节点传递。一些组件还拥有一些专门的事件，如form组件的submit事件、input组件的input事件等
−
−	<nowiki>
−	属性 类型
−	touchstart 手指触摸动作开始
−	touchmove 手指触摸后移动
−	touchcancel 手指触摸动作被打断，如来电提醒，弹窗
−	touchend 手指触摸动作结束
−	tap 手指触摸后马上离开
−	longpress 手指触摸后，超过350ms再离开。如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</nowiki>
−
−	[[文件:wexin21092801.png|600px]]
−
−	==注册程序==
−	在app.js文件中调用App()函数：
−
−	<nowiki>
−	onLaunch: function(options) {console.log('onLaunch执行')},
−	onShow: function (options) {console.log('onShow执行')},
−	onHide: function() {console.log('onHide执行')},
−	onError: function(error) {console.log('onError执行')},
−	onPageNotFound: function (options) {console.log('onPageNotFound执行')}
−
−	</nowiki>
−
−	[[文件:wexin2021092801.png|600px]]
−
−	onLaunch()和onShow()函数触发后返回的字段：
−
−	*path：打开小程序的路径。
−	*query：打开小程序的query。
−	*scene：打开小程序的场景值。
−	*shareTicket：获取到shareTicket。
−	*referrerInfo：获取来源于小程序、公众号的AppId等
−
−	App()函数中还可以保存一些在所有页面中共享的数据：
−
−	注册数据：
−
−	<nowiki>
−	App({
−	num: 123,
−	test: function() {console.log('test')}
−	})
−
−	</nowiki>
−
−	打印数据：
−
−	<nowiki>
−	onReady: function () {
−	var app = getApp()
−	console.log(app.num)
−	app.test()
−	},
−
−	</nowiki>
−
−	==实现比较功能==
	===为两个input组件绑定不同事件处理函数===		===为两个input组件绑定不同事件处理函数===

---

2021年10月26日 (二) 09:56的版本

效果

文件配置

全局文件配置

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

{
  "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：

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>

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

通过id和dataset获取元素：

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

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

在页面中直接进行比较

在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="formCompare">
</form>

事件处理函数：

formCompare: function(e) {
  var str = '两数相等'
  var num1 = Number(e.detail.value.num1)
  var num2 = Number(e.detail.value.num2)
  …
this.setData({result: str})
},