添加页签、制作学生信息登记表|从0开始学习开发微信小程序第3期

Answer 1

学习运用tabBar

了解tabBar，学会简单的页面跳转

我们知道添加编译模式可以进新写的页面，如果选择普通编译模式，不更改app.json文件中的pages代码，怎么进入我们的新页面呢？

有一个功能——tabBar页签，使用软件或小程序，主页下面一般都会有几个页签，供用户切换不同页面。

按开放文档中的格式在app.json中写一下，logs的文件路径要改一下，默认copy拿过来是index。选择普通编译模式，编译就可以看到主页底部的页签，点击两个tab可以切换主页、日志页面。

学会修改tabbar两种状态下的图片

现在tab只有字，我们还想显示图标。

图标这里我整理了一套简约风格的，来源： iconfont.cn/

新建一个img文件夹，右击在资源管理器中显示，将整理好的图片copy过来。

tabBar的属性中有iconPath和seletedIconPath，对应tab选中和非选中时显示的图片。

简单配置一下两个tab选中和非选中状态的图标。多个单词连起来时非首词的首字母大写。

中间再加一个抽查单词tab。

制作学生信息登记表单简单学习姓名、密码输入框

学习了添加tab跳转页面，我们再学习一些其他组件。

组织活动经常要用到的登记信息的表单，以学生信息登记表示例。

写一个登记页面，添加tab。

首先我们想登记学生的姓名，要有一个输入框，添加input之后就可以输入了，默认换行。

这个输入框看不见，文本太靠边，调一下它的样式。会有很多的信息需要登记，统一添加view标签进行调整。

定义类，简单调一下页边距和字体大小。

在输入框下面加一个下划线，怎么做呢？

可以单独给ipunt加一个view标签，也可以括起来姓名整体加。这里后续操作使用第一种方法。

在css文件中选择类，给它添加一个border-bottom，底部边框。

定义一下前后边距。

写一个value值，用户打开页面输入框中就会有这个值。

输入框的类型决定输入文本时弹出键盘的类型

Password控制它是否为密码。

Placeholder可以添加输入框为空时的占位符，可以添加信息提示用户，用户输入字符后会消失。

提示信息和类目文本一样大，调小一点。

类选择器里面用“.”引用的是我们自己定义的类，像系统标签在CSS中直接输入就可以引用。

那这样我们给input加view标签定义类就有些多此一举，但好处是用到不是input的组件时可以统一用一个类来定义。那么给input单独加view不又是多次一举吗？不加view也可以定义，就当作是分了个层吧。

还可以用placeholder-style占位符颜色，maxlength控制最大输入长度，单独定义它的类也可以去CSS中修改。

Input还有很多相关属性，光标、焦点、键盘右下角显示内容都有相关性。

navigateTo无法跳转到tabbar page问题。

有一个小问题：我们把日志写在tab里，点击头像就不能跳转了。navigateTo不能跳转到一个tabbar page，所以我们需要换一个方式。

用switchTab进行跳转，点击头像就可以进入日志页面了。

从这一点我们可以引申出一个功能应用，做一个没有tab的登录页面，登录跳转后的页面就像现在的主页，有许多tab。也很简单，在登录页面用switchTab跳转到tabbar页面就可以了。

但是tabbar是写在app.json里的。那可以这样，tabbar里不写现在的首页，把首页当成登录页就可以了。

Tab上面的window也有很多属性，用于设置小程序的状态栏、导航条、标题、窗口背景色。。

制作更多表单组件

再写一些表单组件。

写一个性别，这个不需要输入，需要让用户来选择。

登记出生日期，也是需要用户选择。

学历选择：高中 专科 本科 研究生

专业填写，如果用户选择高中那么专业就不出现了。

以及毕业学校。

性别选择器

选择性别要做成一个单选，用到radio和radio-group。radio是单选的项目，需要写一个radio-group才能让它是单选。

代码先搞齐整。

在性别表单中这样写，用单项选择器包含单选项目。在这个radio-group中的单选项目就被分到了一个组，达到单选的效果。

文档的示例代码中，有一个value=，是交互的值，本期我们只写页面，和后台交互的时候再写。Checked控制选项当前的选中状态，label用来改进表单组件的可用性。

定义一下选项的类，设置顶部边距，选项中间边距。

边框离得太近，给它定义点儿内边距。

日期选择器

日期选择器，要用到picker组件。

这个组件的代码有些复杂，可以在开发者工具中预览一下效果。这个弹起的日期选择器就是我们想要的效果。

我们看看是怎么做到的，它的代码很多，有类型、交互数据、时间范围、点击事件等等。

咱们一点一点写。先写一个picker组件和类型。现在点击模拟器没有效果，需要一个view标签才会有当前选择，弹出日期选择器。

引用的data是它弹出选择器时默认展示的日期。

当前选择这一行有些窄，可以用它定义的类：picker修改一下，设置成和输入框input一样的高度。展开调试器wxml中的标签，鼠标移动到input上面，模拟器就显示出了view.input的宽*高。

稍微宽了一点。

再单独定义点儿上外边距。

此时的日期选择器能从底部弹出，但选择一个日期值却不会显示出来，因为还没有绑定点击事件。

把点击事件拿过来，看示例代码的js文件。（e）代表picker组件，detail.value就是取组件中的value值，用setData把value值放入date，我们选择的日期才能拿到。

在我们的js里实际写一下这个函数，和之前写事件不同，这次括号里多了个e，e代表一个事件的对象。。

现在调试器都取不出这个值了嘛？控制台不输出了。反正看示例代码，它取出的值就是e.detail.value。

取出值我们用setData把值带回来，在data中设置日期初始值为空。

编译一下显示空。

直接什么都不写就好。

修改一个错误，点击事件定义在picker上才能取出值。

学历选择器

学历选择器该如何做呢？示例代码预览中的普通选择器效果就很符合。

先看wxml中的对应代码。依然是picker组件，有range范围，交互值，定义的点击事件bindPickerChange，这些需要结合在一起才能发挥作用。在js里有array的数据。

先在我们的页面中写一写，

老规矩在picker组件内部添加标签，定义类，使用之前设置好的高度，就可以看到picker的效果了。

定义点击事件，写绑定事件函数。依旧是输出一下这个e的值。

用选择器选择不同的学历，detail.value值对应0、1、2、3.

怎么把这个数值带回去呢？在data中先写一个index：0，控制台输出交互值value，将value赋值给index。

拿到值还需要再wxml中引用。写到这里学历选择器的功能基本就完成了。

如果学历选择高中，就不能填写专业，只需要加一个小小的判断。高中对应的index值是0，用block组件，给专业组件写一个if函数。默认事件为true启用，为false禁用。Index大于0对应专科、本科、研究生，展示专业。

完善表单css，添加提交按钮

给出生日期改一下，更合理一点。

毕业院校这也加一个提示信息。

最后在底部添加一个提交按钮。

表单前端开发部分基本完成。按照风格性别一开始也默认选一个。

小tips：清理缓存可能会遇到头像昵称丢失的错误，可以在右上角详情的基本信息中重新输入Appid获取。

总结

本期主要讲解了添加页签跳转页面，以及登记信息表单组件的前端开发。过程中解决了很多小问题，比前两期难度稍微大一些，初学者认真学习会接收很多新知识，进步也是很快的。下期我们学习答题系统。