用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

CTT团队实战教程系列《三》B站:先把首页造出来

天下雪 2016-12-2 10:44

本文来自微信小程序联盟合作团队:CTT团队,团队地址:http://ctt.jieerf.com/(小安娜:失踪人口已上线,大家快来喷喷喷他!),sorry++,最近身边发生太多事情,导致这最关键的实战开篇都未写,(小安娜-分身1:懒就 ...

本文来自微信小程序联盟合作团队:CTT团队,团队地址:http://ctt.jieerf.com/

(小安娜:失踪人口已上线,大家快来喷喷喷他!),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个箭头成功吸引了本小姐的注意)

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

赞赏

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 叶安娜 来自: 授权地址

相关阅读