微信小程序开发第二弹

1、关于工具
微信官方提供了开发者工具，集成了开发调试、代码编辑及程序发布等功能。具体的文档在这里:微信官方文档,文档里面包含了该工具的基本操作，接下来就是下载工具了。

2、下载完工具之后，我们就可以选择：本地小程序项目–》添加项目—》无APPID开发（只有内侧人员才有，我们直接选没有就好了）–》项目名，项目路径（可以随便写的）–》添加项目
进行到这一步的时候，你进去就会发现是以自己的微信登录的，你的微信头像和昵称通通都显示了出来。同时我们也能看到基本的文件结构：

如图所示，在pages文件夹下存在Index主页和基本配置app.js,app.json,app.wxss等文件。看过文档的小伙伴都知道，app开头的都是基础的配置，如果在每个页面都有一些私有的设置时，需要在每个页面的文件夹里面新建这些配置文件，就像图中的index文件夹下面一样。

3、分析首页代码

如图所示：首先是在app.json里面要引入Index页面：
“pages”: [
“pages/index/index”,
]
然后先获取app实例：var app = getApp(); 然后data代表的是数据，此处的userInfo()代表获取用户的数据。看onload部分，该部分的代码代表在加载页面的时候，先获取app的实例，然后调用app.getUserInfo方法获取用户信息，然后再通过that.setData赋值，把用户的信息赋值到userInfo里面。

4、页面效果：

如图所示：不要在意文字颜色的花里胡哨，然后首页显示的数据就是这样的。具体的大家看看代码就知道了。

5、只是一个首页的话，总觉得少了很多东西，看起来光秃秃的，因此得想办法加点东西。首先呢，是在底部加一些tabBar，做一些分类，然后每个分类都对应一些页面。同时要给每个分类专属的icon图片。ok，需求就是这些，接下来就开始做:

如图所示：由图中代码可知，我们需要：
（1）新建hello文件，然后对应的文件结构都要有,比如：hello.js,hello.wxml等
（2）在app.json的pages中引入这三个页面。在此是准备把这三个页面通过底部选项卡来切换。
（3）既然是选项卡，最好是配上图片。在项目的根目录下新建img文件，然后随便引入两个图片作为icon。
（4）准备工作ok之后就开始撸代码：window代表对于窗口的一些设置。比如设置窗口的颜色，顶部标题栏的文字等：比如：“春风十里”作为标题栏
然后就是底部tabBar的编写，先制定底部栏目的样式，如代码所示。然后下面开始写list，因为我们要写三个tabBar，所以在此就在List里面写了三个部分。pagePath代表引入页面的路径。text代表选项卡的名称.。iconPath代表选项卡的图标。而，selectedIconPath代表被选中时，选项卡的图标。

如图所示：在此我们已经实现了基本的页面切换。(PS:新页面我们只需要根据微信给的首页代码依葫芦画瓢即可)

6、微信官方文档提供了很多组件。不同组件的结合就产生了我们熟知的各种小程序。在此呢，我们只是相当于刚入门微信小程序。具体的js功能，还有和后台交互的部分还没有做。继续研究，下一步是做一个小demo，然后实现一些Js的写法，还有就是争取和服务器交互一下试试。
第二弹结束：end
第三弹还在总结摸索中。。。敬请期待