微信小程序实战-第2章 微信小程序开发基础

微信小程序实战-第2章 微信小程序开发基础

2.1 【案例1】比较数字大小

2.1.1案例分析

比较数字大小实现效果：
实现步骤：

• 输入第1个数；
• 输入第2个数；
• 单击比较按钮；
  
  比较数值大小实现的技术知识点总结：

2.1.2创建项目

项目创建流程：

• 创建一个空白项目
• 创建app.json文件
• 新增一个index页面
  
  
  开发者工具会自动创建pages/index目录：

Index页面

{
   
   
  "pages":[
    "pages/index/index"
  ]
}

2.1.3页面组件

值得一提:

input组件type属性值为number：

2.1.4页面样式

不同设备的rpx与px换算关系：

rpx单位规定了任何手机屏幕的宽度都为750rpx（逻辑像素）。
目标： 为了方便开发人员适配各种手机屏幕

**物理像素：**指屏幕上实际有多少个像素。
**逻辑像素：**是指CSS中使用的像素单位。

对比WXSS中的rpx运行效果展示：

view {
   
   margin: 50rpx;}
input {
   
   
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {
   
   margin: 50rpx;}

对比WXSS中的px运行效果展示：

view {
   
   margin: 50rpx;}
input {
   
   
/* 此处将原来的600rpx改为300px */
  width: 300px; margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {
   
   margin: 50rpx;}

全局样式和导入外部样式：

2.1.5配置文件

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

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

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

2.1.6页面逻辑

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

onLoad: function (options) {
   
   
  console.log('页面加载')
},
onReady: function () {
   
   
  console.log('页面初次渲染完成')
},