欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2017-11-23 17:44浏览: 来源:网络 作者:tianshu

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

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

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

效果图(也可直接跳过)

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

开发前热身

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

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

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

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

(小安娜:原来如此,6个箭头成功吸引了本小姐的注意)

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

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






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。