小程序界面开发 第1篇
在小程序中，使用 wx:if = _{{ condition }}_ 来判断是否需要渲染该代码块：
也可以用 wx:elif 和 wx:else 来添加 else 判断：（else不用加任何条件，代表最后一种情况）
如果要一次性控制多个组件的展示与隐藏，可以使用一个
注：
在小程序中，直接使用 hidden=_{{ condition }}_ 也能控制元素的显示与隐藏：
通过wx:for可以根据指定的数组，循环渲染重复的组件结构，示例如下：
默认情况下，当前循环项的索引用index表示；当前循环项用item表示。
示例代码：
类似于Vue列表渲染中的 :key，小程序再实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：
WXSS 是一套 样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。
WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。
与CSS相比，WXSS扩展的特性有：
rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位。
rpx的实现原理：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）
小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
在iPhone6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：
750rpx = 375px = 750物理像素
1rpx = = 1物理像素
官方建议：开发微信小程序时，设计师可以用iPhone6作为视觉稿的标准。
开发举例：在iPhone6上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为200rpx和40rpx。
使用WXSS提供的 @import 语法，可以导入外联的样式表。
@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：
定义在中的样式为全局样式，作用于每一个页面。
在页面 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
注意：
小程序根目录下的 文件时小程序的全局配置文件。常用的配置项如下：
1、2、3是用来配置导航栏相关的样式效果；4、5用来配置窗口背景相关的；6、7用来控制页面效果的选项
设置步骤： ---> window ---> navigationBarTitleText
设置步骤： ---> window ---> navigationBarBackgroundColor
不支持文本颜色，只支持以#开头的
设置步骤： ---> window ---> navigationBarTextStyle
需求：将导航条上的标题从默认的black改为white
↓
注意：navigationBarTextStyle 的可选值只有 black 和 white
概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
设置步骤： ---> window ---> enablePullDownRefresh 改为true
注意：在中启用下拉刷新功能，会作用于每一个小程序页面！
模拟器并不能百分百还原真机操作，调试时需要真机预览进行测试
当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为： ---> window ---> backgroundColorTop 为指定16进制的颜色值#efefef
当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为： ---> window ---> backgroundTextStyle 为指定值 dark / light。
概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤为： ---> window ---> onReachBottomDistance
注意：默认距离为50px，如果没有特殊需求，使用默认值即可。
小程序界面开发 第2篇
JOSN是一种数据格式，在实际开发中，JSON总是以 配置文件 的形式出现。小程序项目中也不例外：通过不同的 .json配置文件，可以对小程序项目进行不同级别的配置。
小程序项目中由4种json配置文件，分别是：
是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。Demo项目里边的配置内容如下：
是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：
微信现已开放 小程序内搜索，效果类似于PC网站的SEO。 文件用来 配置小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的所有关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
小程序中的每一个页面，可以使用 .json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 的 window中相同的配置项。
在 --> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件。小程序会把排在第一位的页面当作项目首页进行渲染。
小程序界面开发 第3篇
数据绑定的基本原则
Mustache语法的应用场景
绑定内容
动态绑定内容
页面数据如下：
页面结构如下：
绑定属性
动态绑定属性
页面数据如下：
页面结构如下：
注：可以添加 mode属性使图片自适应展示
运算（三元运算、算术运算等）
三元运算
页面数据如下：
页面结构如下：
算术运算
页面数据如下：
页面结构如下：
在微信小程序中，random 是一个常用的方法，用于生成一个 [0, 1) 之间的随机浮点数。
toFixed() 是 JavaScript 中 Number 对象的一个方法，用于将数字格式化为具有指定小数位数的字符串。
你看到的类似这样的代码：
在上面的代码中：
所以，randomNum 会是一个形如 __ 的字符串，其中 _xx_ 是两位随机小数。
如果你想在微信小程序中生成一个具有特定小数位数的随机浮点数，你应该首先使用 () 生成随机数，然后使用 toFixed() 进行格式化。如果你需要的是一个数字而不是字符串，你可以再次使用 parseFloat() 或 Number() 来转换它。
请注意，使用 toFixed() 会四舍五入到指定的小数位数，并且结果是一个字符串。因此，如果你想再次得到一个数字，你需要进行转换。
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：
target是触发该事件的源头组件，currentTarget是当前事件所绑定的组件。举例如下：
小程序界面开发 第4篇
1、了解 权限管理需求
在中大型的公司里，人员的分工非常仔细：同一个小程序项目，一般会有不同岗位、不同角色的员工同时参与设计和开发。
此时处于管理需要，我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分，使他们能够高效的进行协同工作。
2、了解项目成员的组织结构
3、小程序的开发流程
提出需求 → 设计 → 开发 → 体验 → 测试 → 发布
1、软件开发过程中的不同版本
在软件开发工程中，根据时间节点的不同，会产出不同的软件版本，例如：
2、小程序的版本
3、发布上线
整体步骤：
小程序界面开发 第5篇
WXML 是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML
WXSS是一套 样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS
.js文件的分类：
宿主环境指的是 程序运行所必须的依赖环境。例如：
Android系统和iOS系统 是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的。
手机微信是小程序的宿主环境
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能
实现如图的flex横向布局效果：
实现如图的纵向滚动效果：
通过text组件的 selectable / user-select 属性，实现长按选中文本内容的效果：
通过rich-text组件的 nodes 属性节点，把HTML字符串渲染为对应的UI结构：
image组件的 mode 属性用来指定图片的 裁剪 和 缩放 模式，常用的 mode 属性值如下：
scaleToFill
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变