微信小程序开发实战（二）开发及测试

1 实战案例：比较数字大小

根据上节内容创建一个初始项目，项目名称为 compare
在 app.json 文件里修改内容为：

"pages": [
    "pages/index/index"
  ]

意思为新增一个 index 页面，会在 pages/index 目录下创建 index.js、index.json、index.wxml、index.wxss这4个文件。 .js 文件为逻辑文件， .json 文件为配置文件， .wxml 文件为页面文件，.wxss 文件为样式文件。

2 页面文件

此时，在 page/index/index.wxml 页面下添加内容类似（ pages/index/index.wxml ），保存并编译后会在左侧模拟区看到显示所添加的内容。证明测试成功，成功后，修改 index.wxml 文件内容为：

<view>
  <text>请输入第一个数字：</text>
  <input type="number"></input>
</view>

<view>
  <text>请输入第二个数字：</text>
  <input type="number"></input>
</view>

<button bindtap="compare">比较</button>

<view>
  <text>比较结果：</text>
</view>

此时页面会出现，但并不像预期那样好看，需要添加样式。

3 样式文件

修改 index.wxss 文件内容为：

view {
  margin: 50rpx;
}

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

button {
  width: 80%;
  margin: 50rpx;
  border: 2rpx solid #ccc;
}

可以看到尺寸单位用的是 rpx, 尺寸单位rpx（responsive pixel，响应式像素），通俗点说作用就是使不同设备间使用同一尺寸单位时效果可以相近，不至于因为不同设备的型号不同造成效果相差很大。
使用样式时同时也可以使用样式导入使页面风格统一且易维护。

3.1 外联样式表

首先在pages/index目录下创建test.wxss文件，作为外联的样式表。文件内容为：

button {
  color: #fff;
  background: #369;
}

然后修改 index.wxss 文件，添加代码：

@import "test.wxss";

即表示引用外联样式表

3.2 全局样式

修改 app.wxss文件内容为：

button {
  letter-spacing: 12rpx;
}

即定义了全局样式

4 配置文件

修改 index.json文件 内容为：

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

保存编译后可以看到左侧模拟区的效果为：