小程序模板网

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

2017-11-23 摘桃子

本文来自微信小程序联盟合作团队: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个箭头成功吸引了本小姐的注意)

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/17934.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询