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

iPhone 5
iPhone 6
✎ 2.1 【案例1】比较数字大小
4 页面样式
全局样式和导入外部样式：
button { color: #fff; background: #369;
} @import "test.wxss"; button {letter-spacing: 12rpx;}
导入外部样式 全局样式
✎ 2.1 【案例1】比较数字大小
5 配置文件
页面级配置文件：
属性
navigationBarBackgroundColor navigationBarTextStyle navigationBarTitleText backgroundColor backgroundTextStyle
1 案例分析
比较数值大小实现的技术知识点总结：
事件
数据绑定
技术
条件渲染 表单组件
✎ 2.1 【案例1】比较数字大小
2 创建项目
项目创建流程： ① 创建一个空白项目 ② 创建app.json文件 ③ 新增一个index页面
单击按钮创建文件
✎ 2.1 【案例1】比较数字大小
2 创建项目
开发者工具会自动创建pages/index目录：
<button>比较</button>
<view><text>比较结果：</text></view>
view组件
✎ 2.1 【案例1】比较数字大小
3 页面组件
input组件type属性值：
可选值 text
number idcard digit
说明 文本输入键盘 数字输入键盘 身份证输入键盘 带小数点的数字键盘
说明 选择所有class="container"的组件 选择id="#id"的组件 选择所有view组件 选择所有view组件和所有text组件 在view组件内的后面插入内容 在view组件内的前面插入内容
✎ 2.1 【案例1】比较数字大小
4 页面样式
选择器使用演示：
class选择器
.container { margin: 20px;
}
element选择器
view { margin: 20px;
}
::after选择器
view::after { content: "测试";
}
✎ 2.1 【案例1】比较数字大小
4 页面样式
不同设备的rpx与px换算关系：
rpx单位规定了任何手机屏幕的宽度都为750rpx（逻辑像素）。
目标：为了方便开发人员适配各种手机屏幕
3 页面组件
input组件type属性值为number：
✎ 2.1 【案例1】比较数字大小
4 页面样式
WXSS文件中的选择器：
选择器 .class #id element element, element ::after ::before
示例 .container
#id view view, text view::after view::before
Index页面
{ "pages":[ "pages/index/index" ]
}
✎ 2.1 【案例1】比较数字大小
3 页面组件
页面组件及功能：
标签 <view> <text> <button> <image> <form>
功能 视图容器 文本域
按钮 图片 表单
标签 <icon> <checkbox> <radio> <input> <progress>
第2章 微信小程序开发基础
微信 小程序
• 【案例1】比较数值大小 • 【案例3】计算器
• 【案例2】调查问卷
✎
学习目标
1
掌握小程序项目的基本结构
及配置文件的编写
掌握WXML、WXSS和
4
条件渲染、列表渲染的
基本语法
2 掌握Page()、App()函
数和常用组件的使用
掌握小程序与服务器交
互的实现 3
iPhone 5
iPhone 6
✎ 2.1 【案例1】比较数字大小
4 页面样式
对比WXSS中的px运行效果展示：
vieΒιβλιοθήκη Baidu {margin: 50rpx;} input { /* 此处将原来的600rpx改为300px */
width: 300px; margin-top: 20rpx; border-bottom: 2rpx solid #ccc; } button {margin: 50rpx;}
1px
1px
iphone6物理分辨率为 750px×1334px
iphone6的逻辑分辨率为 375px×667px
✎ 2.1 【案例1】比较数字大小
4 页面样式
对比WXSS中的rpx运行效果展示：
view {margin: 50rpx;} input {
width: 600rpx; margin-top: 20rpx; border-bottom: 2rpx solid #ccc; } button {margin: 50rpx;}
默认 √ -
✎ 2.1 【案例1】比较数字大小
3 页面组件
值得一提
<view>和<text>属于双边标签，由开始标签和结束标签两部分构成，<input>属于单边标签， 只有“开始标签”，且结尾用“/>”表示。值得一提的是，<input>也可以写成双边标签，如 “<input></input>”。
✎ 2.1 【案例1】比较数字大小
设备
屏幕宽度
rpx换算px
iPhone5
320
1rpx=0.42px
iPhone6
375
1rpx=0.5px
iPhone6 Plus
414
1rpx=0.552px
px换算rpx 1px=2.34rpx
1px=2rpx 1px=1.81rpx
✎ 2.1 【案例1】比较数字大小
4 页面样式
物理像素：指屏幕上实际有多少个像素。 逻辑像素：是指CSS中使用的像素单位。
✎
目录
【案例1】比较数字大小
☞点击查看本节相关知识点
【案例2】调查问卷
☞点击查看本节相关知识点
【案例3】计算器
☞点击查看本节相关知识点
✎ 2.1 【案例1】比较数字大小
1 案例分析
比较数字大小实现效果： 实现步骤： ① 输入第1个数； ② 输入第2个数； ③ 单击比较按钮；
✎ 2.1 【案例1】比较数字大小
功能 图标文件
复选框 单选框 输入框 进度条
✎ 2.1 【案例1】比较数字大小
3 页面组件
编写基本表单结构： text组件
input组件
<view><text>请输入第1个数字：</text><input type="number" /></view>
<view><text>请输入第2个数字：</text><input type="number" /></view>