第5章 小程序设计及问答
课程名称
小程序开发图解案例 教程
项目名称
小程序设计及问答
任务名称
小程序设计及问答
课时
2
项目性质
^演示性 口验证性    □设计性    口综合性
授课班级
授课日期
授课地点
教学目标
（1）在设计过程中要突出重点，减少干扰项，给用户明确的主次操作，让用户操作流程更顺 畅。
（2）用户在操作过程中要及时反馈，局部加载以及模态窗口加载都是对用户的操作反馈。
（3）在用户操作后要给出其明确的操作结果，可以通过弹出式操作结果、模态对话框操作结 果等告知用户。
（4）用户在填写表单时，要进行友好的提示和正确的引导，减少用户填写表单的时间以及出 错的概率。
（5）理解小程序设计过程中遇到的一些问题以及解决方案。
教学内容
（1）小程序设计
（2）小程序问答
教学重点
小程序设计要点
教学难点
小程序设计过程中遇到的一些问题以及解决方案
教学准备
装有小程序的开发工具的电脑
教学课件PPT
教材：《小程序开发图解案例教程（附精讲视频）（第2版）》
作业设计
教学过程
小程序开发教程百度云
教学环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开 授课计划、教案等），吸引学生注意力。
课程说明
【课前说明】
分别从小程序设计要点和注意事项等知识点进行初步的了解。
【目的】
使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。
课程内容 描述
5.1小程序设计
5.1.1突出重点，减少干扰项
每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。 在确定了重点的情况下，应尽量避免页面上出现其他与用户的决策和操作无关的干扰因素。
《说回    茵宜标西    ***
11 同曲0 T    l：tP AM    IOT^i
《诲印    页面标组    *,*
广自即HfT
谓转入登用内西
m片入苣肉皆
1    弄可
9日w    品卓黎西    ・住所巾
MX®    ■/田怕
干扰项过多    减少干扰项
5.1.2主次动作区分明显
在一个界面上有多个按钮的时候，按钮设计要有主次之分，并且区分明显，让用户看到后就知 道他能做什么、该怎么做。
秘 I出友口出|    |丘示价誉
固定在界面底部
wxml示例代码如下所示：
<view class="bottomNav">
筛选 </view>
出发时间</view>
旅行时间</view>
显示价格</view>
<view id="0" class="common" bindtap="switchNav">
<view rtcscls-2-s_r_0 rtcscls-2-r_4">,,>l</view>
<view id="1" class="common, bindtap="switchNav">
<view rtcscls-2-s_r_0 rtcscls-2-r_4">,>l</view>
<view id="2" class="common, bindtap="switchNav">
<view rtcscls-2-s_r_0 rtcscls-2-r_4">,,>l</view>
<view id="3" class="common, bindtap="switchNav">
</view>
wxss示例代码如下所示:
.bottomNav{
background-color: #505963; display: flex;
flex-direction: rowheight:
45px;
line-height:45px;
position: fixed;
bottom:0px; width:
100%;
}
.bottomNav view{ margin:
0 auto;
}
mon{
font-size:13px; color:
#ffffff;
2.怎么样获取用户在表单组件输入的内容？
能够获取用户输入的内容，需要使用组件的属性bindchange将用户的输入内容同步到 AppService。
<input id="myInput, bindchange="bindChange, />

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。