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

作者: 许剑锋 | 来源:发表于2016-12-01 09:43 被阅读659次

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

效果图（也可直接跳过）

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

开发前热身

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

bilibili首页

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

Chrome开发者工具

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

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

B站首页分析图

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

项目目录结构

（小安娜：resources文件夹是什么，没见你提过？），用来放静态资源文件的，（小安娜：静态资源文件？？？啥意思），目前来说就是放项目所需图片，（小安娜：装13，早说放图片不就行了。）

为了接下来更好学习，建议此时应该打开官方组件文档：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
由于这是实战篇，不会太多介绍组件怎么使用，所以当出现不熟悉的组件时，可以去官方文档查阅。（小安娜：已打开，还添加到书签了），感动啊，难得一次不喷我还顺着我，（小安娜：因为是微信官方的文档啊），我~风中凌乱.jpg

头部header.wxml

替换前的HTML代码：

<!-- 顶部工具栏 -->
<nav class="nav-bar">
    <div class="nav-wrp">
        <a href="http://m.bilibili.com/index.html" class="logo"></a>
        <a class="cell" href="http://www.bilibili.com/mobile/history.html"><i class="nav-icon bili-icon-history"></i></a>
        <a class="cell" toggle-switch=".search" href="javascript: void(0);"><i class="nav-icon bili-icon-search"></i></a>
    </div>
</nav>
<!-- 导航菜单 -->
<div class="flex-bar main">
    <ul class="flex-bar-in">
        <li class="nav-item nav-index on"><a href="http://m.bilibili.com/index.html" title="首页">首页</a></li>
        <li class="nav-item nav-channel"><a href="http://m.bilibili.com/channel.html" title="频道">频道</a></li>
        <li class="nav-item nav-live"><a href="http://live.bilibili.com" title="直播">直播</a></li>
        <li class="nav-item nav-rank"><a href="http://bilibili.com/mobile/ranking.html" title="排行">排行</a></li>
        <li class="nav-item nav-space"><a href="http://bilibili.com/mobile/myspace.html" title="我的">我的</a></li>
    </ul>
</div>

<nav>、<div>、<ui>、<li>、<i>都可替换成容器组件：<view>；<a>可替换成导航组件：<navigator>，保留原标签的class属性，（小安娜：那<a>标签的href属性呢？），在<navigator>可用url属性替换，不同的是<navigator>只能跳转应用内页面链接，url不能随便写一个http://ctt.jieerf.com这样的链接跳转过去，（小安娜：啊···，怎么解决呢？像我们之前做的App中帮助和反馈都是网页做好，App中跳转网页。），我目前还没发现能跳转外站点的组件，唯一的解决方法是在微信小程序里重写页面，（小安娜：是你学艺不精不知道吧，别教坏我啦，还是得求助现场大神们）（小安娜-求助画面：求大神留言指点，怎么解决微信跳转外部链接，如解决必当重谢！），你行啊，其实我们转换下想想，真很少机会用到跳转外部链接，App中用到网页的地方最大的出发点是为了：跨平台。现在小程序已经做到跨平台了，真没必要用到内嵌外部网页了。（小安娜：好像也有道理，但是我还是想知道，如果可以做到，那么你会很丢脸2333333~）

替换后的wxml代码：

<!-- 顶部工具条-begin -->
<view class="nav-bar">
    <view class="nav-wrp">
        <!-- LOGO -->
        <navigator class="a logo"></navigator>
        <!-- 观看历史 -->
        <navigator class="a cell">
            <view class="nav-icon bili-icon-history"></view>
        </navigator>
        <!-- 搜索框 -->
        <view class="a cell">
            <view class="nav-icon bili-icon-search"></view>
        </view>
    </view>
</view>
<!-- 顶部工具条-end -->

<!-- 导航菜单-begin -->
<view class="flex-bar main">
    <view class="flex-bar-in">
        <view class="li nav-item on">
            <navigator url="" class="a">首页</navigator>
        </view>
        <view class="li nav-item">
            <navigator url="" class="a">频道</navigator>
        </view>
        <view class="li nav-item">
            <navigator url="" class="a">直播</navigator>
        </view>
        <view class="li nav-item">
            <navigator url="" class="a">排行</navigator>
        </view>
        <view class="li nav-item">
            <navigator url="" class="a">我的</navigator>
        </view>
    </view>
</view>
<!-- 导航菜单-end -->

（小安娜：替换前后对比很久，发现你把<a>标签替换成<navigator>后class属性值多加了个a，<li>替换成<view>后class属性值多加了个li，这是有什么特殊意思吗？还有搜索框原本是<a>标签但是你替换成了<view>组件，不是说<a>替换<navigator>组件吗？），不错不错，你还蛮细心的，这是因为官方CSS中有元素选择器：.flex-bar .flex-bar-in a，这样做wxss文件改动最小：.flex-bar .flex-bar-in .a。至于搜索、观看历史两个按钮，为什么搜索按钮用<view>代替，我们去使用一下官方网站就明白了：

搜索和观看历史对比图

①是触发搜索按钮后界面，②是触发观看历史按钮后界面。注意看箭头所指红色框内，①地址没改变，②地址发生了改变。这就表示搜索界面只是显示/隐藏状态切换，而观看记录是页面间的跳转。（小安娜：哦哦，也就是①可以用组件hidden属性，②用<navigator>组件对吧？），没错了，给你个赞。（小安娜：哎~没办法，智商这东西你能跟得上吗！）

滚动广告Swiper

原配方效果图：

官方滚动广告效果图

替换前的HTML代码：

<div id="sliderWrapper" class="slider-wrapper">
    <div class="slider-bg"></div>
    <div>
        <div id="slider" class="swipe" style="visibility: visible;">
            <div class="swipe-wrap" style="width: 1875px;">
                <a href="http://www.bilibili.com/blackboard/activity-yourname.html" data-index="0" style="width: 375px; left: 0px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
                    ![我们请你看电影](http:https://img.haomeiwen.com/i640480/1844afd83660dcb5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a><a href="http://blhx.biligame.com/yuyue" data-index="1" style="width: 375px; left: -375px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
                    ![少女海战预约开启](http:https://img.haomeiwen.com/i640480/2465b040630c2dca.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a><a href="http://www.bilibili.com/blackboard/activity-B14MLBEMe.html" data-index="2" style="width: 375px; left: -750px; transition-duration: 0ms; transform: translate(375px, 0px) translateZ(0px);">
                    ![番剧弹幕禁水试行规则](http:https://img.haomeiwen.com/i640480/428a83e14b429e5b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a><a href="http://www.bilibili.com/blackboard/activity-Hy8hXpczg.html" data-index="3" style="width: 375px; left: -1125px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
                    ![毒毒更健康~](http:https://img.haomeiwen.com/i640480/e11ebf239c8f5d5b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a><a href="http://bangumi.bilibili.com/moe/2016/jp/index" data-index="4" style="width: 375px; left: -1500px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
                    ![海选第10天！](http:https://img.haomeiwen.com/i640480/c0ba4db209d8f32e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a>
            </div>
        </div>
        <div class="swipe-btn-wrapper">
            <div class="swipe-btn-list">
                <a></a><a class="on"></a><a></a><a></a><a></a>
            </div>
        </div>
    </div>
</div>

由于微信官方提供一个滑动组件：swiper，这里会用官方组件重新写此功能。

重写后的wxml代码：

<!-- 滚动广告 begin -->
<view class="slider-wrapper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="*this">
    <swiper-item>
      <image src="{{item}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>
</view>
<!-- 滚动广告 end -->

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    /* 滚动广告配置 */
    // 图片数据集合
    imgUrls: [
      'http://i0.hdslb.com/bfs/archive/9bab17a99758cc7a72531d15d2d5a85d73b78ded.jpg',
      'http://i0.hdslb.com/bfs/archive/57d8001838ff81c64bef2682070e53efbe2736b7.jpg',
      'http://i0.hdslb.com/bfs/archive/499730dbcd76823664c48e661726a37164158795.jpg',
      'http://i0.hdslb.com/bfs/archive/c9682eac8f46fd2b261b739c5c88e21adaffab53.jpg',
      'http://i0.hdslb.com/bfs/archive/414cf391f88bb098ded766b1d7effd9216be34ef.jpg'
    ],
    // 是否显示面板指示点
    indicatorDots: false,
    // 是否自动切换
    autoplay: true,
    // 自动切换时间间隔
    interval: 5000,
    // 滑动动画时长
    duration: 1000
  },
  onLoad: function () {}
})

（小安娜：我运行代码，但我发现，官方的底部有5个小圆点表示总共5图片，当前是第几张，上面代码没这个效果？），你可以把swiper的indicator-dots="{{true}}"改成true，就会显示指示点了，但我个人觉得比较不好看，所以默认就不显示了。（小安娜：虽然你没一点审美，但这次还比较认同你，没办法修改吗？），暂时还没有，官方文档也未说明，（小安娜：好吧，只能先这样了）。

内容Body（←划重点）

官网内容区域包含很多分类，但很多结构是一样的，这里选3个具有代表性不同结构的分类：

热门推荐
正在直播
番剧更新

原配方效果图：

内容Body效果图

还记得我们一开始创建item.wxml内容模板文件，现在要在里面添加热门推荐、在线直播、番剧更新模板：

<!-- 热门推荐、动画区Item -->
<template name="jiefItem1">
    <!-- List Item begin -->
    <view class="content-list">
    <navigator class="item">
        <view class="top">
        <view class="cover-img" 
        style="opacity: 1; background-image: url({{coverImg}});">
        </view>
        </view>
        <view class="info">
        <view class="title">{{title}}</view>
        <view class="meta clearfix">
            <view class="cell left">
                <view class="bilibili-index-sprite bilibili-index-play"></view>
                <text>{{playNum}}</text>
            </view>
            <view class="cell left">
                <view class="bilibili-index-sprite bilibili-index-danmu"></view>
                <text>{{commentNum}}</text>
            </view>
        </view>
        </view>
    </navigator>
    </view>
    <!-- List Item end -->
</template>

<!-- 直播Item -->
<template name="jiefItem2">
    <!-- List Item begin -->
    <view class="content-list">
        <navigator class="item">
          <view class="top">
            <view class="cover-img" 
            style="opacity: 1; background-image: url({{coverImg}});">
            </view>
          </view>
          <view class="info">
              <view class="avatar">
                 <image mode="scaleToFill" src="{{avatarImg}}"></image>
              </view>
              <view class="user">
                  <view class="name text-overflow">{{name}}</view>
                  <view class="desp text-overflow">{{desp}}</view>
              </view>
              <view class="online text-overflow">{{online}}</view>
          </view>
        </navigator>
      </view>
    <!-- List Item end -->
</template>

<!-- 番剧更新Item -->
<template name="jiefItem3">
    <!-- List Item begin -->
    <view class="content-list bangumi-list">
    <navigator class="item">
        <view class="top">
        <view class="cover-img" 
        style="opacity: 1; background-image: url({{coverImg}});">
        </view>
        </view>
        <view class="info">
        <view class="bangumi-title text-overflow">{{bangumiTitle}}</view>
        <view class="bangumi-page text-overflow">{{bangumiPage}}</view>
        </view>
    </navigator>
    </view>
    <!-- List Item end -->
</template>

（小安娜：{{coverImg}}、{{title}}等这种是什么意思？），之前我们讲过使用模板时候可以传入数据data给模板，定义模板时先规范好模板里面使用数据的格式，其他地方想用name='jiefItem1'模板就必须按照{coverImg: '',title: '',playNum: '',commentNum: ''}这种规范传入数据。（小安娜：隔这么久早忘了，那要怎么使用呢？），怎么使用这太简单了，就留给你去完成吧，咋们之前学过的，给你5分钟思考。（小安娜：切~，你以为这能难住本小姐）「滴答滴答...小安娜刚进入思考模式」，小安娜算了吧，看你的表情感觉要思考很久，直接公布答案吧。

在index.wxml接着添加代码：

<!-- 热门推荐 begin -->
  <view class="row-container">
    <navigator class="header">
      <view class="left">
        <view class="bilibili-index-sprite bilibili-index-hot"></view>
        <text>热门推荐</text>
      </view>
      <view class="right hot">
        <view class="bilibili-index-sprite bilibili-index-ranking"></view>
        <text>排行榜</text>
      </view>
    </navigator>
    <view class="content-wrapper">
      <block wx:for="{{hotList}}" wx:key="avid">
        <!-- 使用热门推荐模板，传入当前循环对象item -->
        <template is="jiefItem1" data="{{...item}}"/>
      </block>
    </view>
  </view>
  <!-- 热门推荐 end -->

  <!-- 正在直播 begin -->
  <view class="row-container">
    <navigator class="header">
      <view class="left">
        <view class="bilibili-index-sprite bilibili-index-live"></view>
        <text>正在直播</text>
      </view>
      <view class="right">
        <text>查看更多直播</text>
        <view class="bilibili-index-sprite bilibili-index-arrow"></view>
      </view>
    </navigator>
    <view class="content-wrapper">
      <block wx:for="{{liveList}}" wx:key="avid">
        <!-- 使用正在直播模板，传入当前循环对象item -->
        <template is="jiefItem2" data="{{...item}}"/>
      </block>
    </view>
  </view>
  <!-- 正在直播 end -->

  <!-- 番剧更新 begin -->
  <view class="row-container">
    <navigator class="header">
      <view class="left">
        <view class="bilibili-index-sprite bilibili-index-bangumi"></view>
        <text>番剧更新</text>
      </view>
      <view class="right">
        <text>查看更多番剧</text>
        <view class="bilibili-index-sprite bilibili-index-arrow"></view>
      </view>
    </navigator>
    <view class="content-wrapper">
      <block wx:for="{{bangumiList}}" wx:key="avid">
        <!-- 使用正在直播模板，传入当前循环对象item -->
        <template is="jiefItem3" data="{{...item}}"/>
      </block>
    </view>
  </view>
  <!-- 番剧更新 end -->

index.js中添加数据源：

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    /* 内容Body数据 */
    // 热门推荐
    hotList: [
      {
        coverImg: 'http://i2.hdslb.com/bfs/archive/1239539a2f262d933bca7c2c1e290139420ba76a.jpg_320x200.jpg',
        title: '【乐正绫】《华夏之章》【小旭PRO】【绛舞乱丸】',
        playNum: '4.7万',
        commentNum: '977',
        avid: 'av1'
      },
      {
        coverImg: 'http://i1.hdslb.com/bfs/archive/ecce95b426faf188e6c28f9d3a0bdc63c5a72bb3.jpg_320x200.jpg',
        title: '【斗图歌】装逼不如斗图',
        playNum: '4.7万',
        commentNum: '977',
        avid: 'av2'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/archive/11bf8d41fffcad31976317760e301e2db64be8c8.png_320x200.png',
        title: '【胖胖球】【双子星】【獒龙】荒岛 - El transcurrir de las horas',
        playNum: '4.7万',
        commentNum: '977',
        avid: 'av3'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/archive/e73a92b0ed615b4d6568888906d09f84d0835674.jpg_320x200.jpg',
        title: '撩人净土系列【红菱歌舞伎初音】极乐净土【大神犬PV付】MME配布',
        playNum: '4.7万',
        commentNum: '977',
        avid: 'av4'
      }
    ],
    // 正在直播
    liveList: [
      {
        coverImg: 'http://i0.hdslb.com/bfs/live/96025d17ed05961230a7d1401ca1fe3b79cc12db.jpg',
        avatarImg: 'http://i2.hdslb.com/bfs/face/c55b2eae13646925187514c6f19e19293294d0c5.jpg',
        name: '尤樱',
        desp: '你女朋友在直播你不来看看吗？',
        online: '877',
        avid: 'av5'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/live/a1678768dd9c7023af7ab0f3de2a2df2c525e741.jpg',
        avatarImg: 'http://i0.hdslb.com/bfs/face/d1bec5ec111987537ecf3e7f43a8b3678ed3c5c3.jpg',
        name: '我是小麦伊哦哦',
        desp: '告别:我爱你们',
        online: '877',
        avid: 'av6'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/live/89047f3faee35d0cb095d7dfb01ec4d3a8ec4434.jpg',
        avatarImg: 'http://i0.hdslb.com/bfs/face/1e31ac069058528e26b9be60b26d86c9c9a99f62.jpg',
        name: '坂本叔',
        desp: '【坂本】非洲黑客',
        online: '877',
        avid: 'av7'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/live/24dbcc68325ff5fb3d235af97ad075dc5087733a.jpg',
        avatarImg: 'http://i2.hdslb.com/bfs/face/c55b2eae13646925187514c6f19e19293294d0c5.jpg',
        name: 'miriちゃん',
        desp: '日语点歌姬',
        online: '877',
        avid: 'av8'
      }
    ],
    // 番剧更新
    bangumiList: [
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/4d06e660b8da9cb5335552f4ebde89bbcb2e9d4f.jpg',
        bangumiTitle: '双星之阴阳师',
        bangumiPage: '更新至第34话',
        avid: 'av9'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/0e6bce5d018796dda7782aa5c97bfdd14691348a.jpg',
        bangumiTitle: '口水三国',
        bangumiPage: '更新至第 关羽篇话',
        avid: 'av10'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/367387d69ac43c160a453d14cb34256abaca3b4a.jpg',
        bangumiTitle: '双星之阴阳师',
        bangumiPage: '更新至第34话',
        avid: 'av11'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/4937bf71a4a5a6a426d09e9a78d27696b4746507.jpg',
        bangumiTitle: '双星之阴阳师',
        bangumiPage: '更新至第34话',
        avid: 'av12'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/2ed6be9050dfa4afe6e2651741d81843a0e81c67.jpg',
        bangumiTitle: '黑白来看守所',
        bangumiPage: '更新至第9话',
        avid: 'av13'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/2673ac643b48eb5bda64c960a2ca850fbebb839d.jpg',
        bangumiTitle: '夏目友人帐 伍',
        bangumiPage: '更新至第8话',
        avid: 'av14'
      }
    ]
  },
  onLoad: function () {}
})

中间内容部分到这里就完成了！（小安娜：我怎么感觉我被套路了！）

底部footer.wxml

原配方效果图：

底部效果图

我们是微信小程序，所以肯定不会有电脑版、客户端这些链接出现。（小安娜：其实是你没办法加，因为跳转不了外部链接2333~）

<!-- 底部-begin -->
<view class="footer">
    <view>哔哩哔哩弹幕视频网 沪ICP备13002172号-3</view>
    <view>信息网络传播视听节目许可证：0910417</view>
    <view>【微信小程序】完全模仿B站移动Web端网站</view>
    <view>made in 杰尔夫CTT</view>
</view>
<!-- 底部-end -->

（小安娜：↑↑↑超鄙视上面代码，又在里面加广告），嘘~你是不是自己人啊，写了这么多没功劳也有苦劳，就让我宣传宣传我们自己嘛。（小安娜：我是杰尔夫CTT一员，我喂自己袋盐！）