本课主要内容：
- 创建仿微信式tabbar导航布局
- 创建主页（商品页）列表布局
- 使用循环渲染
- 使用页面导航
- 使用引用
1，升级开发工具至最新版本
打开后会提示升级，确认即可。这次改动很大，开发工具越来越完善了，有几个值得注意：
- 添加了textarea，在上一课我们的商品描述还是单行输入，现在可以多行输入了。
- 添加了wx.toast、wx.actionSheet等人性化UI接口，不用再以在页面里声明它们再显示的方法使用了。
- 开发工具添加了保存后自动编译的特性。
- 其它等等，详见升级说明。
这个树状按钮，用于切换侧边栏，很有用。快捷键是CMD
2，创建一个quick start项目
将logs目录删除，并在app.json中删除该页面的声明：
"pages":[ "pages/index/index", ],
3，引用
在pages目录下直接创建两个wxml文件:
顾思思义，前者是尾部使用，后者在页首使用。将index.wxml内容清空，输入：
<include src="../header.wxml"/> <include src="../footer.wxml"/>
include可以将目标文件的整个代码引入，相当于是拷贝到include位置，即是代码块复用。
实践：在header.wxml与footer.wxml中随意放入一些内容，运行看看。例如：
<view> <text>footer</text> </view>
思考：这里使用了相对地址，如果使用绝对地址引用header.wxml文件，应该如何写？
4，关于tab
小程序还没有提供tabbar组件，自己写一个tabbar组件的难点主要在css样式，在footer.wxml中输入：
以上代码后面须补一个</div>，再添加另一个“我的”navigator，即成一个tabbar。
与之相关的css，在app.wxss中：
/*footer start*/ .weui-tabbar { display: -webkit-box; display: -webkit-flex; display: flex; position: absolute; z-index: 500; bottom: 0; width: 100%; background-color: #f7f7fa; height:55px; } .weui-tabbar__item { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 7px 0 0; font-size: 0; color: #999999; text-align: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .weui-tabbar__item-hover{ background-color: rgba(0, 0, 0, 0.2); opacity: 0.8; } .weui-tabbar__item::first-child{ padding-bottom:5rpx; } .weui-tabbar__item-on text{ color:#ff6600; } .weui-tabbar__icon { display: inline-block; width: 24px; height: 24px; } .weui-tabbar__label { text-align: center; color: #999999; font-size: 12px; padding-top: 15rpx; } /*footer end*/
掌握css用法，只有多试，多看。多看css3文档，多学习别人的代码，多尝试实现效果，别无它法。
5，关于导航
在pages目录下新建一个my目录，并在my目录下新建my.wxml与my.js文件。
my.wxml的内容：
该内容没有特别的用途。
在footer.wxml中，navigator是导航组件，
redirect属性的使用，使用页面切换时不保留上一页，即没有页面推入效果，是替换的。这个代码是使用了循环绑定之后的代码，下面会讲到。将{{}}内换成具体的数值即可以显示。
其中url是页面地址，这里可以使用与app.json定义的一样的地址：
目前只有两个页面： /pages/index/index
/pages/my/my
6，tab切换效果
这个tab有一个被选中的切换效果：
这个效果是怎么实现的？
很简单，控制图片地址与文本颜色。在index.js文件中，有一个名为tabs的data数据：
在data对象内定义的数据，可以在wxml页面中绑定。
在my.js中也有tabs数据：
仔细看一下，两个Js文件中的tabs数据并不完全相同，只是数据结构相同。每一个tab icon图片都有两张，一为选中，一为未选中。其中weui-tabbar__item-on：
只是改变文本的颜色，这与网页开发的手法一样。
在footer.wxml中，使用了for循环绑定，在上面已经看到了：
在这里item是默认的循环名，还有一个默认索引数字叫index。
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
7，需要列表效果
如何实现这样的一个列表效果，主要也是css样式。index.wxml：
<navigator url="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"> <view class="weui-media-box__hd"> <image class="weui-media-box__thumb" src="/images/bike.jpeg" alt=""/> </view> <view class="weui-media-box__bd"> <text class="weui-media-box__title">商品标题二</text> <view class="weui-media-box__desc">永久30速智能自行车 27.5英寸铝合金山地车/男女式单车/锁死前叉/2培林花鼓 R100 黑红色</view> </view> </navigator>
app.wxss中的样式：
.weui-media-box { color: #000000; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 20rpx 30rpx; position: relative; } .weui-media-box:before { content: " "; position: absolute; top: 0; right: 0; height: 1px; border-top: 1px solid #E5E5E5; color: #E5E5E5; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); left: 15px; } .weui-media-box_appmsg { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-media-box_appmsg .weui-media-box__hd { margin-right: .8em; width: 60px; height: 60px; line-height: 60px; text-align: center; } .weui-media-box_appmsg .weui-media-box__thumb { width: 100%; max-height: 100%; vertical-align: top; } .weui-media-box_appmsg .weui-media-box__bd { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; } .weui-media-box__title { font-weight: 400; font-size: 17px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; line-height: 70rpx; } .weui-media-box__desc { color: #999999; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
css3样式，有一些基本的规则，有些同学没有接触过，不了解。像：
.weui-media-box__desc
前面有一个圆点（.），代表这是一个class，是使用在组件的class属性上的，例如：
而像这样的样式声明：
view{...}
是应用在所有view组件之上，无须显式赋予。
第二课作业
- 阅读css3文档全篇：http://www.w3school.com.cn/css/
- 阅读官方的组件文档中form表单组件部分
链接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html?t=1477656488864
