《微信公眾平臺入門到精通》Vol20_第1頁
《微信公眾平臺入門到精通》Vol20_第2頁
《微信公眾平臺入門到精通》Vol20_第3頁
《微信公眾平臺入門到精通》Vol20_第4頁
《微信公眾平臺入門到精通》Vol20_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、微信公眾平臺入門到精通Vol.202013-10-07 新浪微博：創(chuàng)業(yè)阿哲 微信公眾號：創(chuàng)業(yè)阿哲 私個人微信號：12134453資料較多，且不斷更新中你若想學(xué)習(xí)，可以隨時私信，我們會在第一時間回復(fù)。前兩天上線的ZTalk音樂盒子頗受好評，很多朋友都在后臺求教程求源碼，雖然這個播放器的開發(fā)比較復(fù)雜，但既然大家有興趣，那我就寫下開發(fā)步驟吧，全部教程會分為三次，里面牽扯的除了PHP編程外，還有JS開發(fā)，今天先講前端靜態(tài)頁面的代碼。源碼請在公眾號里輸入“微信代碼”查看下載連接，然后將下載鏈接自己想辦法搞到PC上然后再下載，下載后上傳到自己sae里就可以直接在瀏覽器運(yùn)行，當(dāng)然你也可以在微信里通

2、過鏈接來查看。建議先下載安裝了再看文章，以下是注意事項：1、audio.html是播放器的前端靜態(tài)展示頁。2、image目錄里是播放器要用到的圖片，比如播放、暫停、背景等，和一些JS插件，包括了jquery框架。3、image目錄里可以修改的就是common.css，這個是播放器的樣式文件，如果有CSS基礎(chǔ)的同學(xué)可以自己修改。4、image目錄下可替換圖片：bg0.jpg 頁面背景圖片coverbg.png 播放器默認(rèn)背景圖片第十五章    微信音樂播放器開發(fā)一、Html5的audio組件HTML5 有兩個很炫的元素，就是Audio和 Video,可以用他們在頁面上創(chuàng)建音頻

3、播放器和視頻播放器，制作一些效果很不錯的應(yīng)用。在sae的代碼管理里新建一個HTML頁面，命名為test.html。html5的頁面最基本的框架如下，橙色字為文檔聲明，有了這個就表明這是一個html5的頁面。在<body></body>中添加一個音頻元素：<audio src=" controls="controls" autoplay="autoplay"></audio>在谷歌Chrome瀏覽器中訪問這個url，效果如下： controls指的是用戶控制界面,所以我們可以在Web頁面中

4、看到上面這個操作面板，包括播放和暫停，播放進(jìn)度條，音量進(jìn)度條，和進(jìn)度時間顯示等。autoplay 指的是自動播發(fā)已加載的媒體文件，所以我們一打開頁面就可以直接播放了無論是視屏還是音頻，都是一個容器文件，包含了一些音頻軌道，視頻軌道和一些元數(shù)據(jù)，這些是和你的視頻或者音頻控件綁定到一塊的，這樣才形成了一個完整的播放組件。不過由于html5的標(biāo)準(zhǔn)還不統(tǒng)一，還有部分安卓系統(tǒng)內(nèi)置瀏覽器是閹割了這些組件的，所以使用安卓手機(jī)的朋友如果在微信內(nèi)置瀏覽器里無法欣賞音樂的，可以點擊右上角分享按鈕選擇復(fù)制連接，然后到QQ瀏覽器里打開。二、設(shè)計個性的音樂播放器使用瀏覽器默認(rèn)的播放器肯定不夠高端大氣上檔次，因此我們要自

5、己設(shè)計一款音樂播放器，美工這塊我就不寫了，自己發(fā)揮吧重點說下靜態(tài)頁面的結(jié)構(gòu)。在sae里打開audio.html文件，頭部比前面的H5基本結(jié)構(gòu)多了很多代碼，不要慌我給大家解釋下。第4行是定義該網(wǎng)頁的類型和編碼，決定瀏覽器將以什么形式、什么編碼讀取這個文件，這里是告訴瀏覽器這是一個html文件，用的UTF8編碼。第5行是這個頁面的標(biāo)題，會顯示在瀏覽器的頭部。第6行是文檔作者，就是我了。第7行是控制屏幕大小的，width 頁面寬度，nitial-scale - 初始的縮放比例，minimum-scale - 允許用戶縮放到的最小比例，user-scalable - 用戶是否可以手動縮放。這段代碼用來

6、限制播放器的顯示大小與手機(jī)屏幕一致，不能縮放。第9行是載入樣式文件第10、11、12行載入JS插件，其中common.js里是播放器控制JS代碼，具體內(nèi)容會放到最后一期講。進(jìn)入頁面主題首先是播放器結(jié)構(gòu)，如下圖：第16行是整個播放器的容器，規(guī)定了這個播放器的大小和位置，以及播放器的背景，這里提下如何把播放器絕對居中，CSS代碼如下：position:absolute;padding:5px;top:50%; margin-top:-155px; left:50%;width:300px;height:300px; margin-left:-155px;此容器為相對于網(wǎng)頁絕對定位，寬高為300px

7、，內(nèi)邊距5px，整體大小為310*310px，距離頁面的頂部和左邊都為50%距離，然后通過外邊距負(fù)155px讓容器向頂部和左邊移動一半的容器大小，這樣就絕對居中了。第17行唱片封面，疊加了一個背景圖片。這里可能有人說為什么不直接用播放器容器背景圖做唱片封面，這里主要是唱片封面是經(jīng)常要切換的，網(wǎng)速不給力的話會出現(xiàn)一塊空白不好看。第18、19行喜歡按鈕、列表按鈕，也是使用了絕對定位，當(dāng)然這個定位是相對于播放器容器的。第20行播放控制區(qū)塊，這里有個黑色漸變背景圖案疊加在唱片封面圖片，以突出顯示歌曲標(biāo)題、名字等信息。第21、22行歌曲標(biāo)題和歌手名字第23到28行播放進(jìn)度條區(qū)域，這里有兩個div，pgb

8、uf是歌曲緩存載入進(jìn)度，pgtime是歌曲播放進(jìn)度。第29到30行前進(jìn)、播放和后退播放按鈕，播放按鈕可以通過playbtn、pausebtn兩個樣式切換變?yōu)闀和０粹o。第37行歌曲的說明。第38行Audio播放組件，這里給組件命名為song_player，然后就可以通過JS來控制這個播放組件，進(jìn)行播放暫停操作，獲取播放進(jìn)度等。第39行頁面底部的版權(quán)信息然后是歌曲列表部分，如下圖：第40行歌曲列表容器，自適應(yīng)寬度，默認(rèn)隱藏。第41行歌曲列表欄頭部分第43-45行列表內(nèi)容類型切換以及列表關(guān)閉按鈕第48到57行歌曲列表內(nèi)容第58到65行列表翻頁控制區(qū)最后的展現(xiàn)效果如下：前端靜態(tài)頁面基本就是這些，下一章

9、講管理后臺、與前端頁面數(shù)據(jù)交換接口的開發(fā)。-ZTalk福利-秋風(fēng)起正是吃蟹好時節(jié)，為了回饋ZTalk的朋友們，老賊去打了順豐優(yōu)選的秋風(fēng)。 你肯定知道順豐在送快遞，但現(xiàn)在順豐也在賣食品了，順豐優(yōu)選是由順豐速運(yùn)集團(tuán)傾力打造，以全球優(yōu)質(zhì)安全美食為主的網(wǎng)購商城帶給您更有品質(zhì)的生活享受！活動時間：10月1日-10月7日活動規(guī)則：回復(fù)“順豐優(yōu)選”參與抽獎活動獎品：價值388的陽澄湖大閘蟹提貨券一份（共三份）ZTalk每日一曲，輸入“V”欣賞，輸入“ZBOX”享受奢華影音體驗：Keane的Sunshine，把你捂在手里，只有傻瓜才會讓你離去-ZTalk推薦-Blues【ID：bluemidou】YY語音產(chǎn)品經(jīng)理BLUES，原騰訊高級產(chǎn)品經(jīng)理，窺探互聯(lián)網(wǎng)產(chǎn)品背后的真實故事，文章寫產(chǎn)品策劃、產(chǎn)品運(yùn)營、用戶研究、數(shù)據(jù)挖掘所有文章

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論