小程序-比较数字大小

这里通过比较数字大小的案例，来学习小程序的一些基础知识。

包括页面组件，页面样式，页面逻辑的编写，

了解配置文件中常见配置的含义，利用事件，数据绑定，条件渲染，表达等方式实现小程序的页面交互。

效果图如下：

 首先创建项目。

1.页面组件

小程序中使用WXML（WeiXin Markup Language）来实现页面的结构。

例如<view>标签用于定义视图容器，与HTML中的<div>标签作用类似。

常见的组件

官方组件文档

input组件的type属性

 <page>标签时最外层的标签，它是一个根节点，用户编写的所有结构代码都在根节点的下面。

2.页面样式

WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式。

WXSS具有CSS大部分特性，并在CSS基础上做了一些扩充和修改。

2.1 选择器

WXSS的选择器

 2.2 尺寸单位

微信小程序在WXSS中加入了新的尺寸单位rpx(responsive pixel, 响应式像素)。

移动端网页像素单位的换算难点在于它有物理像素和逻辑像素两种单位，

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

为了换算方便，rpx单位规定了任何手机屏幕的宽度都为750rpx（逻辑像素），由小程序内部负责将逻辑像素转换为当前手机中的物理像素。

2.3 样式导入

在WXSS中可以使用@import语句导入外联样式表，在@import后面写上需要导入的外联样式表的路径即可，用“；”表示语句结束。

示例：在index.wxss文件中导入test.wxss文件，如下

@import "test.wxss";

2.4 全局样式

如果多个页面中有些重复的相同的样式，可以在项目根目录下创建全局样式文件app.wxss，

将公共的样式写在全局样式文件中。

注意：当公共样式文件（app.wxss）和页面样式文件（pages/index/index.wxss）发生样式冲突时，页面样式的优先级高，会覆盖公共样式。

3 配置文件

小程序的每一个页面均可以使用json文件对页面的效果进行配置。

页面的配置分为页面级和应用级，在本项目中，pages/index/index.json时页面级配置文件，

而app.json是应用级配置文件。

3.1 页面级配置文件

在页面级配置文件中可以更改页面的导航栏样式，控制页面是否允许上下滚动。

常用的页面级配置

 若将enablePullDownRefresh设为true,页面可以下拉刷新，当下拉刷新操作执行时，就可以触发下拉刷新事件 onPullDownRefresh，在pages/index/index.js文件中可以找到该事件的处理函数。

onReachBottomDistance主要用于开发自动加载更多的功能，就是当页面中内容非常长的时候，为了加快加载速度，并不是一次性加载所有的数据，

而是先加载一部分数据将页面填满，直到出现滚动条，页面可以向上滚动。

当用户上拉时，如果快要到达底部，就立即加载后面的数据。因此，onReachBottomDistance的指越大，加载的时机越提前。

如果达到给定的值，就会触发上拉触底事件onReachBottom,在pages/index/index.js文件中可以找到该事件的处理函数。

3.2 应用级配置文件

 项目根目录下app.json就是应用级配置文件。

app.json文件

 window的值是一个对象，可以将上面页面级配置写在windows中，作为应用级配置使用功能，从而一次设置多个页面，

且优先级低于页面级配置；

debug开启后可以在控制台中输出调试信息，帮助开发者快速定位到一些常见的问题。

networkTimeout可以设置网络请求过程中的超时时间。