小程序picker_【第二十六课】写点小程序

前言

从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也和普通做练习题的方式不同，没有假想的模拟题。

本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。

这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learning by Wrong ,Learning by Share），在实战中学习，在试错中学习，在分享中学习。

经过线下5年多的实践探索，通过21万多篇学习日报，实现了1500余名结业学员99%就业率的教学成果。

从零开始学前端系列课程的任务分为两大部分，从CSS到JS，每一部分大概有15个左右的任务。每个部分分为技能任务阶段和复盘任务阶段，在任务实践中完成从技能学习到项目经验的积累。

一、这次将要执行的任务

二、为什么要开始这个任务

1.这个任务需要学会什么技能，为什么要优先学习这个技能

微信小程序现在应用场景特别多，因此这次任务将要学习项目代码开发。

2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案

通过前面的任务，相信同学们已经入门了基础的前端开发，可以覆盖绝大部分工作任务了。但微信小程序火爆，而小程序又是前端开发里一套有点特殊的东西，它融合了原生和web端，不是一个完整的浏览器对象，有些DOM,BOM的东西无法使用。因此需要我们花点时间来专门学习一下。

3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成

这个任务所需的基础是前面认真做任务，学好每一个知识点，并且很好的掌握自学技巧。

4.做这个任务设置了哪些具体步骤，为什么这么设计

这个任务根据边开发边学习的步骤设计，极大程度上模拟了初学者学习开发中的思路，通过这样的引导，能最快上手小程序的开发，而不会迷失在开发文档中。

5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料

小程序开发的时候遇到的问题，通常可以通过搜索官方开发文档解决。

6.怎么样才算把这个任务完成了，验收标准为什么要这么制订

任务完成的标准是可以在模拟器中完成页面，并有如任务描述所示的交互效果。

7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间

我们认为整个任务大概需要24个小时即可完成，但每个人的基础知识学习能力等情况各不相同。对这方面本来就有基础或者是学习能力特别好的好人可能只需12个小时甚至更少，而有的同学也许需要超过48小时来完成这节内容。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。

8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？

在这一节里，我们认为每个步骤都非常重要，都对前端或相关技能有非常重要的锻炼，请不要跳过任何一个部分。

三、学习任务之前要先学会哪些知识点

1.小程序的介绍和准备 1.1 什么是小程序

微信之父张小龙是这样描述的：

小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的孟县。用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

1.2 它的优势

体验上虽然没法完全媲美原生app，但综合考虑还是有很多优势：省流量省时间；开发成本更低，可以把更多人力物力财力放在运营上，做好内容本身；总体来说相当于一个精简版的app

2.准备工作：

1.注册账号 （https://mp.weixin.qq.com）

2.激活邮箱

3.信息登记

4.登录小程序管理后台（不完善好信息是无法发布小程序的）

5.完善小程序信息，绑定开发者（尤其是团队多人开发）

在官网下载安装开发工具

安装完成后就可以登录：微信扫码登录开发者工具，这里选小程序项目，进入小程序本地项目进行管理

新建一个项目：目录自选本地文件夹，AppID就是登录微信开发平台后的设置里能看到的AppID，如果没有ID也可以使用官方的测试号，但这样只能做做简单的本地测试，最后是填上适合的项目名称。

2.上手第一个小程序

新建项目，选择一个空目录，使用普通快速启动模板

然后就可以看到预设的模板和内容了，可以直接查看或者点击编译在手机上扫一扫查看：

接下来了解一下小程序的目录结构：

pages                         
    index 
        index.js            页面脚本逻辑文件 
        index.wxml      页面模板文件 
        index.wxss      页面样式文件 
        index.json        单个页面的配置信息，比如头部底色，头部title等 
utils 
app.js                      全局逻辑 
app.json                  全局配置信息，包含了小程序的所有页面路径，界面表现，底部tab等基本信息 
app.wxss                设置样式 
project.config.json  开发工具的配置信息 
           

小程序的启动过程：

打开小程序之前，微信会把小程序的代码包下到本地，然后通过app.json的pages字段知道当前小程序的所有页面路径，写在pages字段的第一个页面就是小程序的首页。然后微信就把首页代码装载进来，渲染出首页。

然后app.js里App的实例onLaunch回调就会执行

来一段简单的实战，为项目增加一个city选择页：

首先添加一个新的页面

1.在pages文件添加新页面文件

2.为city.wxml模板页面添加选择器：

picker是一个类似于select的picker组件，bindchange是用于绑定一个change事件的方法，value的值是一个序列号，range则是表示这个选择器的取值范围。

3.然后在city.js中书写页面逻辑：

Page({})是页面的一个实例，data中的数据用于视图绑定，bindPickerChange则是绑定的change事件的函数名。

可以看到，data中的数据可以在页面中被直接绑定使用，在js代码中想要改变data的值也非常简单，使用this.setData就可以了，这里我们传入了一个index序列号，也就是picker选择器选择了country数组中的元素。通过这样的方法，就可以为页面添加不同的组件。

4.选择之后如果想要将选中的city的值传到其他页面比如首页，那么一般来讲有3种方法：

第一种是将数据存到全局的data中，也就是app.js的data中，这样所有的页面都能取到这些数据。但我们并不推荐这样的用法，就如同我们不推荐使用全局变量都一样。

第二种是将数据带在url路径后作为参数传导：http://local.com/foo?bar=abc。这样的做法在传输复杂数据的时候并不是太合适。

第三种则是使用本地存储，在需要的页面再将其取出就可以了：

// 存储
wx.setStorageSync('city', {});
// 取出
wx.getStorageSync('city');
           

这样就完成了我们的第一个上手小页面的开发，更多的细节，依旧希望大家去官方网站查看文档。

四、开始动手做吧

1.（环境搭建）前往https://mp.weixin.qq.com/ 注册微信小程序，帐号类型选择“小程序”。（0.5小时） 
2.（环境搭建）填写帐号信息，激活邮箱，进行信息登记。（0.5小时） 
3.（知识学习）如果无法注册可以去查看学习资料——《小程序个人开发者错误示范》（0.5小时） 
4.（环境搭建）进入小程序管理后台，进入设置页的开发设置，获得AppID一枚（0.5小时） 
5.（环境搭建）前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2017112 下载安装小程序开发工具（0.5小时） 
6.（知识学习）继续留在官网浏览开发工具使用教程（2小时） 
7.（编码实战）打开小程序开发工具，创建一个新项目（0.5小时） 
8.（知识学习）进入官网学习框架和组件内容（4小时） 
9.（编码实战）在pages文件夹中新建一个文件夹用于存放个人条件选择的页面，内含三个同名文件:x.wxml/x.wxss/x.js（0.5小时） 
10.（编码实战）在app.json中加入新建的页面路径，并放为第一条（0.5小时） 
11.（编码实战）编写个人条件选择页面，并使用picker组件，完成选择功能（4小时） 
12.（代码调试）编译查看效果，如果有问题进行调试修改（1小时） 
13.（编码实战）再次新增一个页面用于展示推荐职业（0.5小时） 
14.（编码实战）将所选条件的结果传入推荐页面（1小时） 
15.（编码实战）在浏览器中通过代码调试工具从官网的职业推荐页，拷贝职业接口的数据，存放到小程序本地环境中（1小时） 
16.（编码实战）以所选条件的结果过滤职业，只展示3个职业到界面上。（4小时） 
17.（环境搭建）找到职业列表的https接口，将接口配置到小程序的request合法域名里（1小时） 
18.（编码实战）使用wx.request请求上一步配置过的接口数据，以替代存储在本地的数据，并展示它（1小时） 
19.（代码调试）编译查看效果，如果有问题进行调试修改（1小时） 
20.（代码调试）如果帐号没有通过审核，那么无法上传发布代码。但可以在项目里预览进行真机查看。（1小时） 
21.（知识学习）完成任务后查看验收标准，确认任务已完成，如果未完成返回相应步骤（0.5小时） 
22.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时） 
           

五、验收自己的成果

1.模拟器上不会报错

2.界面没有错乱

3.页面跳转无问题

4.可以选择并显示个人信息

5.并且可以根据选择的信息推荐职业

六、来做一次深度思考

1.如何开发小程序？ 点击查看相关小课堂

2.什么是强制缓存和协商缓存？ 点击查看相关小课堂

3.es6有哪些新特性？ 点击查看相关小课堂

4.如何使用gulp？ 点击查看相关小课堂

5.如何使用RequireJS？ 点击查看相关小课堂

6.如何使用echart？ 点击查看相关小课堂

7.如何使用百度统计？ 点击查看相关小课堂

8.如何进行微信JSSDK开发？ 点击查看相关小课堂

七、总结自己的知识图谱

总结任务中遇到的问题困惑和疑难，用自己的语言将学到的知识记录下来