小程序模板網(wǎng)

CTT團(tuán)隊實(shí)戰(zhàn)教程系列《三》B站:先把首頁造出來

發(fā)布時間:2017-11-23 17:44 所屬欄目:小程序開發(fā)教程

本文來自微信小程序聯(lián)盟合作團(tuán)隊:CTT團(tuán)隊,團(tuán)隊地址:http://ctt.jieerf.com/(小安娜:失蹤人口已上線,大家快來噴噴噴他!),sorry++,最近身邊發(fā)生太多事情,導(dǎo)致這最關(guān)鍵的實(shí)戰(zhàn)開篇都未寫,(小安娜-分身1:懶就 ...

 
 
 
本文來自微信小程序聯(lián)盟合作團(tuán)隊:CTT團(tuán)隊,團(tuán)隊地址:http://ctt.jieerf.com/

(小安娜:失蹤人口已上線,大家快來噴噴噴他!),sorry++,最近身邊發(fā)生太多事情,導(dǎo)致這最關(guān)鍵的實(shí)戰(zhàn)開篇都未寫,(小安娜-分身1:懶就是懶,不負(fù)責(zé)任,我之前學(xué)的都忘了),(小安娜-分身2:上一篇雙11發(fā)完就消失了,不會是兼職送快遞去了吧),(小安娜-分身3:退訂差評,再也不跟你學(xué)了)…,好了好了,有事回了趟老家才回來,不說這個,咋們繼續(xù)小程序開發(fā)。(小安娜:是回去相親了吧?。?/span>

效果圖(也可直接跳過)

效果圖太長,影響閱讀,自行戳開鏈接

開發(fā)前熱身

打開B站移動版網(wǎng)站:http://m.bilibili.com/index.html,打開應(yīng)該是個這樣的畫面,也是我們今天要完成的界面:

(小安娜:不對啊,我打開的是電腦版的),不會吧「我呆住一分鐘」,哦直接打開網(wǎng)站會跳轉(zhuǎn)到PC版本,要用手機(jī)Chrome開發(fā)工具中的Toggle device toolbar打開才可正常訪問,(小安娜:不可能用手機(jī)打開調(diào)試吧,Toggle device toolbar是什么?),Toggle device toolbar是我們開發(fā)移動網(wǎng)頁必備工具,可以模擬各種移動設(shè)備,Chrome自帶無需另外安裝,整個調(diào)試界面是這樣的:

(小安娜:原來如此,6個箭頭成功吸引了本小姐的注意)

接著來分析下頁面結(jié)構(gòu),看項目需要怎么創(chuàng)建模板,下圖是首頁和直播頁對比:



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17934.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢