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

来自CloudWiki
跳转至： 导航， 搜索
第93行： 第93行：
  
 
==配置文件==
 
==配置文件==
 +
页面级文件配置导航栏标题为“数值比较”，颜色为蓝色：
 +
 
  <nowiki>{
 
  <nowiki>{
 
   "navigationBarTitleText": "数值比较",
 
   "navigationBarTitleText": "数值比较",
 
   "navigationBarBackgroundColor": "#369"
 
   "navigationBarBackgroundColor": "#369"
 
}</nowiki>
 
}</nowiki>
 +
 +
开启了调试，运行程序后，就会在控制台中输出调试信息：
 +
 +
 +
<nowiki>
 +
{
 +
  "pages": ["pages/index/index"],
 +
  "debug": true
 +
}
 +
 +
</nowiki>
 +
 +
==页面逻辑==
 +
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>

2021年9月27日 (一) 13:52的版本

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

.class	.container	选择所有class="container"的组件
#id	#id	选择id="#id"的组件
element	view	选择所有view组件
element, element	view, text	选择所有view组件和所有text组件
::after	view::after	在view组件内的后面插入内容
::before	view::before	在view组件内的前面插入内容

选择器使用演示

element: 

view {
  margin: 20px;
}

类选择器： 

.container {
  margin: 20px;
}
after选择器:
view::after {
  content: "测试";
}


尺寸单位

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 在不同设备上 使用，效果都非常接近

样式导入

导入外部样式

@import "test.wxss";

全局样式

app.wxss: 

button {letter-spacing: 12rpx;}

配置文件

页面级文件配置导航栏标题为“数值比较”，颜色为蓝色： 

{
  "navigationBarTitleText": "数值比较",
  "navigationBarBackgroundColor": "#369"
}

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


{
  "pages": ["pages/index/index"],
  "debug": true
}

页面逻辑

Page()函数参数对象的属性： 

data	Object	页面的初始数据
onLoad	Function	生命周期回调函数，监听页面加载
onReady	Function	生命周期回调函数，监听页面初次渲染完成
onShow	Function	生命周期回调函数，监听页面显示
onHide	Function	生命周期回调函数，监听页面隐藏
onUnload	Function	生命周期回调函数，监听页面卸载
onPullDownRefresh	Function	页面事件处理函数，监听用户下拉动作
onReachBottom	Function	页面事件处理函数，页面上拉触底
onShareAppMessage	Function	页面事件处理函数，用户单击右上角的分享按钮
onPageScroll	Function	页面事件处理函数，页面滚动会连续触发
其他	Any	开发者可以添加任意的函数或者数据到data中，在页面的函数中可以通过this.*来访问。

onLoad、onReady、onShow函数为例进行演示： 

onLoad: function (options) {
  console.log('页面加载')
},
onReady: function () {
  console.log('页面初次渲染完成')
},
onShow: function () {
  console.log('页面显示')
},
取自“http://www.openbrains.net/mediawiki/index.php?title=小程序案例：比较数字大小&oldid=28371”