4.微信小程序-B站：先把首页造出来

(小安娜：失踪人口已上线，大家快来喷喷喷他！)，sorry++，最近身边发生太多事情，导致这最关键的实战开篇都未写，（小安娜-分身1：懒就是懒，不负责任，我之前学的都忘了），(小安娜-分身2：上一篇双11发完就消失了，不会是兼职送快递去了吧)，(小安娜-分身3：退订差评，再也不跟你学了)…，好了好了，有事回了趟老家才回来，不说这个，咋们继续小程序开发。（小安娜：是回去相亲了吧！）

效果图（也可直接跳过）

效果图太长，影响阅读，自行戳开链接

开发前热身

打开B站移动版网站：http://m.bilibili.com/index.html，打开应该是个这样的画面，也是我们今天要完成的界面：

（小安娜：不对啊，我打开的是电脑版的），不会吧「我呆住一分钟」，哦直接打开网站会跳转到PC版本，要用手机或Chrome开发工具中的Toggle device toolbar打开才可正常访问，（小安娜：不可能用手机打开调试吧，Toggle device toolbar是什么？），Toggle device toolbar是我们开发移动网页必备工具，可以模拟各种移动设备，Chrome自带无需另外安装，整个调试界面是这样的：

（小安娜：原来如此，6个箭头成功吸引了本小姐的注意）

接着来分析下页面结构，看项目需要怎么创建模板，下图是首页和直播页对比：

发现顶部绿色区域和底部蓝色区域每个界面都有并且是一样的，中间内容区域①和②是一种结构，③和④是一种结构，（小安娜：好意思提1、2、3、4，字写的丑就打字，还有我发现顶部又是绿色的！很喜欢顶部是绿咩？），所以我会建立3个模板文件：header.wxml、footer.wxml、item.wxml，（小安娜：头部、底部、1和2、3和4，不是4个文件吗？），你这样归纳也可以，但文件太多难管理，我把内容区域归纳为一个item.wxml文件，别忘记了一个wxml文件可以写多个