《微信小程序开发》第5章教案
第5章微信小程序设计及问答
教学过程
5.1微信小程序设计
5.1.1突出重点，减少干扰项
每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的情况下，应尽量避免页面上出现其他与用户的决策和操作无关的干扰因素。
干扰项过多减少干扰项
5.1.2主次动作区分明显
在一个界面上有多个按钮的时候，按钮设计要有主次之分，并且区分明显，让用户看到后就知道他能做什么、该怎么做。
按钮没有主次之分按钮有主次之分
5.1.3流程明确，避免打断
当用户在进入某个页面进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。
例如：用户想进入某个页面购买商品，突然弹出抽奖的模态窗口界面，等用户抽完奖之后，可能就会忘记去买商品这件事，这对我们引导用户购买商品很不利，所有要尽量避免打断用户的主要流程操作。
抽奖打断用户操作
5.1.4局部加载反馈
局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式。
局部加载反馈
5.1.5模态窗口加载反馈
模态的加载样式会覆盖整个页面，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用该样式，在某些全局性操作下不要使用模态的加载。
模态窗口加载反馈
5.1.6弹出式操作结果
弹出式提示（Toast）适用于轻量级的成功提示，它1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。
弹出式操作结果
5.1.7模态对话框操作结果
对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。
模态对话框操作结果
5.1.8结果页
对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确地告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。
结果页
5.1.9表单填写友好提示
用户在填写表单时，输入格式或者内容不符合表单填写规则，需要给用户及时反馈表单填写问题，可以在表单顶部告知错误原因，并标识出错误字段提示用户修改。
表单友好提示
5.2微信小程序问答
1．如何将元素固定在界面，不随着界面滚动？
界面底部有4个导航菜单：筛选、出发时间、旅行时间、显示价格。把它们固定在界面底部，如图所示。
固定在界面底部
wxml示例代码如下所示：
wxss示例代码如下所示：
.bottomNav{
background-color: #505963; display:
flex;
flex-direction: row; height:
45px;
line-height: 45px;
position: fixed;
bottom:0px; width:
100%;
}
.bottomNav view{ margin:
0 auto;
}
.common{
font-size: 13px; color:
#ffffff;
}
2．怎么样获取用户在表单组件输入的内容？
能够获取用户输入的内容，需要使用组件的属性bindchange将用户的输入内容同步到AppService。