1月9日，微信微信小程序正式上線，小程序開互聯網迎來了一次狂歡。發科鋒網
張小龍在上個月的普讓揭露講演中表明，“小程序是入門一種比現有一切 App 愈加靈敏，愈加垂手而得的到上一種形狀，并將無處不在。手雷”作為微信的公開一種新形狀，小程序不只擴展了微信的微信生態，也被看作是小程序開移動互聯網的“革命者”。
任何文字解析都不如視頻直播直觀。發科鋒網
本次硬創揭露課雷鋒網請到了「開眼」視頻的普讓技能擔任人為咱們直播演示解說怎么開發一款視頻微信小程序。「開眼」視頻是入門一款短視頻日報運用。由「開眼」視頻團隊制造微信小程序「開眼Eyepetizer」，到上作為為數不多的手雷榜首批上線的視頻類小程序，受到了許多開發者的重視。
嘉賓介紹：
楊凱，「開眼」視頻團隊技能擔任人。
曾供職于 360，是 360 手機桌面開創團隊成員之一，由他參加研制的該款桌面在國內第三方桌面商場很長時刻排名榜首。2014 年參加豌豆莢，任豌豆莢 Tech Lead，擔任豌豆莢主程序開發，首要參加網絡庫優化，UI 功用調優，經過署理緩存多媒體 web 頁等作業。后參加「開眼」視頻團隊，作為技能擔任人，擔任技能開發、迭代作業。
下文為雷鋒網收拾的本次揭露課直播共享中的關鍵。課后陳凱教師還共享了本次課程中完結的 demo，重視雷鋒網「唯物 」大眾號（ID：okweiwu），回復「 小程序」即可獲取鏈接。
今日首要講一下微信小程序的開發，期望經過直播開發一個「開眼」視頻的小程序，幫咱們了解微信小程序的開發進程、流程以及根本 API 的運用，內容首要包含以下幾個方面：
開發一個可翻滾列表，在這個列表的制造中，咱們會了解微信小程序數據綁定的辦法，以及怎么樣建議一個網絡懇求；
處理點擊工作，經過這一操作了解微信是怎樣做工作綁定的；
在列表的指定方位，展現一個視頻播映器，經過這一操作了解微信小程序給咱們的視頻標簽是怎樣運用的；
將頁面共享給老友，在老友對話里能夠看到制造的微信小程序。
咱們能夠看到「開眼」視頻小程序便是一個簡略的列表，列表中的每一個畫面其實都是一個能夠點開播映的視頻。進一步剖析能夠得知，在咱們看到的每一個視頻封面圖上有一個 icon，圖下面是這個視頻的文字介紹，標題以及分類。持續向下拉會發現，有多少視頻，就會顯現多個元素，并且是改寫不到頭的。當咱們點擊一個視頻封面或播映按鈕 icon 時，視頻會開端播映，接著點擊播映第二視頻時，榜首個視頻就會自動中止播映，以上便是咱們這堂課想要完結的工作。
｜。進程一：開發一個可翻滾列表。
由于時刻聯系，本次直播不會從零開端做這款小程序，會直接從微信的 demo （小程序組件）中開端操作。
這是微信小程序官方給出的一個 demo，能夠看到有兩個 tab，今日的操作首要是在第二個 tab 的右邊再增加一個 tab，在第三個 tab 中完結一個跟「開眼」視頻小程序相同的功用。
能夠看到 pages 列表內容十分多，其內容首要是界說或聲明一下在這個小程序中會用到一些界面。windows 花括號里邊的一些選項是幫你界說 tool bar 上的色彩和信息，能夠在這個頁面看到demo 中 toolbar 的色彩就在這兒設置的。 
在 tab bar 里新加一個“開眼視頻”文件夾，裝備地址是剛剛寫好的，抄過來就好，制造完結能夠看到左面的頁面現已出來了，盡管沒有內容，但第三個 tab 的結構現已完結了。接下來是持續開發這個 tab，我一般會直接從之前寫好的代碼里仿制過來，然后進行一些簡略的修正，演示一下改動進程。
留意要把相關文件名也改成“開眼視頻”，不然會呈現找不到布局文件的狀況產生。
文件夾稱號改完后，能夠看到剛在第三個 tab 里增加的內容，現已能夠顯現出來了，這是一個微信小程序官方 audio 的頁面，還需求對這個頁面進行一些改動。
首先寫一下這個頁面的布局文件，把沒有用的布局文件刪掉，在最上層界說一個 view，進行最外層的展現，然后會加一個 image 標簽，這個標簽首要的功用是展現方才看到的 cover 圖（由于時刻聯系，直播時省掉了敲代碼進程，直接從之前的文件中仿制）。
解釋一下拷過來的這幾行代碼。榜首代碼是 WX : for,前面 WX 是微信的簡稱，后邊的 for 是說，它會在你的 JS 文件里找到一個姓名叫 videos 的變量，該變量是一個數組，image 這個便簽會重復屢次，直到和 videos 數組長度共同。
后邊 for-item 標簽是指，每一個 image 標簽能夠經過 video 變量名拿到和它綁定在一起的視頻數據，例如下面 video.coverForFeed 便是把當時綁定的視頻數據中 coverForFeed 字段賦值給 image 的 src。
接下來看下 GS 的寫法，先界說一個 videos，也便是剛剛在布局文件里聲明需求的，這個 videos 會在 onload 里賦值。解釋一下 onload 這個辦法：頁面被加載的時分，onload 會被調用。在微信小程序官方開發文檔中也能夠看到這個辦法的相關聲明，其間：
onload 是頁面被加載；
onready 是榜首次烘托完畢；
onshow 是監聽工作顯現；
onhide 是監聽頁面被躲藏。
假如有前端開發經歷的話，能夠看到跟 window 的許多頁面很像.最常用的是 onload，再細心看一下這個辦法的運用，在這個當地會測驗調用一個叫 load 的辦法，并且把“咱們自己”傳進去，再傳一個options。解釋一下 options，舉個簡略的比如，假如想調一個這樣的裝備，能夠看到它的 url＝page/item/item，后邊會帶一個參數，參數名叫 id 值等于 1，這個辦法是在調用者那兒運用的，被調用者也便是被引發的頁面怎么樣讀到這個 id 等于 1 的參數呢？是經過 const id ＝ options.id 這個代碼，options 相當于頁面間傳遞參數傳遞的一個東西。
再看下 load 的辦法，一行一行的來看，榜首行 pages 和 options 是兩個傳參，第二行 wx.ewqiest 是發送一個 API 懇求，留意，小程序官方文檔里的對 wx.ewqiest 的界說是發送一個 HTTPS 懇求，現在是本地操作，假如是線上環境的話，必定要寫成 HTTPS，不然會被阻攔。完好示例寫法如下：
url 是懇求的地址；
data 是 url 里的參數，也便是咱們傳進去的參數；
header 是咱們發送 HTTPS 懇求的時分所帶的 header；
success 當發送成功時，這個辦法會被回掉；
fail 當懇求失利時，會回調這個辦法，告知你失利的原因。
再回到開發頁面，video：videoData 是說把本地變量變為裝備的參數，要留意的是微信小程序和 Vue 不同，小程序的數據不是雙向綁定的，或者說不是默許雙向綁定的，假如數據或數據結構產生了改動，想告知到 video 層級上，讓 video 去改寫，必需求經過 page 中的 setdata 來完結。也便是說必需求這樣寫， videos 才會收效（video＝videoData 的辦法不不會收效）。
現在現已把簡略的列表寫好了，回到微信小程序的開發列表里能夠看到，現已顯現出了咱們想要的作用，咱們懇求到了 6 個視頻，界面上顯現了六個 cover 圖。微信會對 image 標簽有默許的高和寬（240＊320 像素），所以需求對圖片進行微調。
接著寫 css，微信的 css 語法和規范的 css 語法簡直沒有差異，僅僅有一些子集不支持，這些在微信的開發文檔里也有寫，可是咱們一般用到的都有。需求額定講下 rpx，這是微信小程序里自己界說的一個特點。這個特點的界說是說它以為一切屏幕的寬都是 750 個 rps，也便是說，你拿到一臺 iphone 5 和一臺 iphone 6S，它的寬都是750 rpx。
可是會反過來算一個像素等于多少 rpx，在 iphone5 里，假如說一個像素等于一個 rpx的話，在 iphone 6 里，兩個像素等于一個 rpx。這樣做的優點是降低了 UI 的適配本錢。
到這兒本堂課的榜首個方針現已完結，現已開發完結了一個可翻滾的列表，并了解了數據綁定和網絡懇求。
｜。進程二：處理點擊工作。
接下來要處理一個點擊工作，點擊工作觸發之后，會在圖片本來的方位展現一個視頻播映器，并且播映圖片所代表的視頻。
先看一下微信小程序界說的的工作綁定進程是怎樣的：
在組件中綁定一個工作處理函數，如 bindtap，這個用戶在點擊組件的時分，就會動身到這個 video 的 bindtap。
高亮的這幾行意思是我把一個函數 tapname 綁在 video 標簽的點擊上。也便是說當時這個 video 標簽被點擊時，體系會調用姓名為 tapname 的辦法，并且把當時 video 的一些參數傳到這個 tapname 函數里。
接下來在項目里界說一個綁定，把 image 的點擊工作綁定在一個 onTap 的辦法上。接下來要在 JS 里完結這個 onTap 的辦法。
在 JS 里 onload 下面，重起一行接著寫 onTap：function (element)，微信小程序官方文檔中對 element 的界說中包容了幾個特點：
type （工作類型）；
timeStamp（工作生成時的時刻戳）。
target（觸發工作組件的一些特點值結合）。
currentTarget（當時時刻的一些特點值調集）。
接下來要完結一個辦法叫 tap，它需求兩個傳參，榜首個是 page，第二個是 element。page 便是 this，element 便是剛剛界說的 element，傳進來后能夠看到這個辦法就被調用了。打一個 log 能夠看到以下成果。
每點一次，下面都會呈現一個 tap，也便是說現已成功的把 video 上的工作傳遞到了 JS 的處理函數中。
榜首段代碼中的 element 便是剛剛傳過來的被點擊元素，currenttarget 是當時被點擊的方針… 要點講下videoUrl，videoUrl 是剛在開發中界說的一個內容，不是體系自帶的，看下它是從哪里來的。
data-video-id 的意思是把當時視頻 id 附給 image 標簽，作為這個 image 標簽上的特點，當點擊一個 image 標簽是，JS 能夠從傳入的 element 中讀到這個值。
由于列表里有 6 個標簽，所以必需求知道當時點擊的標簽是什么，以及當時被點擊的標簽上綁定的 video 數據，來決議后邊需求播哪一個視頻。
id 咱們用不到，先刪去。上面的寫法是 -video-url 這個當地寫成 videoUrl 略有不同。原因是微信小程序會幫開發者們做一件工作，把 data 和后邊的橫線去掉，然后自動駝峰。
上面這句話的意思是從被點擊的 element 中拿到當時標簽綁定的 video 的播映 url 是什么。或許許多做前端的同學心里會有疑問，為什么要費這么大勁去拿，而不經過一些其它的手法。由于微信小程序廢除了 document，以及 window 的許多辦法，意圖是讓小程序變成純數據驅動的編程思維，也便是說一切的工作和一切的數據，必定是以工作或者是音訊這樣的辦法來傳遞的，開發者沒有辦法自動的去拿到當時顯現的 video。
舉一個簡略的比如，假如在頁面加載完后，設一個 timer 定時器，每五秒中奉告當時列表中展現的榜首個元素是什么，這個在小程序里做不到。由于沒有辦法自動拿到當時列表這個元素，也就沒辦法拿到列表上展現的內容，只要一種辦法，用戶手動觸發了一個工作時，開發者才或許拿到這個工作相關的（并不是一切的）一些信息。
為了取到當時被點擊的這個 item 上面綁定的 video 的播映地址，要經過這種辦法來完結，而不能經過其它的辦法來完結，這個的確有點繞。
這個思維在微信小程序里能夠說是最重要的思維，也便是 DOM 模型簡直徹底不能用。這個或許給許多前端開發帶來十分大的困擾。
｜。進程三：在列表指定方位展現視頻播映器。
接著來看一下，現在還要做別的一件事，要在界面里加一個 video 標簽，id 叫 video，class 叫 video，這樣寫首要是為了一瞬間 CSS 綁定用。
后邊它的 style 寫法，榜首是 display，為什么用這個特點，據我個人的經歷，在微信里假如想躲藏一個 video 標簽，只要這一種辦法能夠躲藏，也便是說 display 特點設成 none，才能夠把 video 躲藏，visibility hidden 辦法都不可。
top 便是說這個視頻標簽在列表中距離頂端的方位，一切帶兩層大括號的東西都是引用到 JS 里的變量，兩個變量一個是 covertop，一個是 videoDisply，src 是 currentUrL，便是說 video 播映地址是什么，這也是第三個變量。
對上面三個變量做個界說：
videoDisplay 是 none，默許躲藏 video 標簽；
covertop 是 video 標簽默許頂部，躲藏在那里都能夠；
currentUrl 開端時為空，也便是說在開端時，視頻播映器里是沒有地址的。
再來看一下 tap 工作，直接仿制過來三行。前面 page.setdata 是給下面的 data 進行一種更新，這是一種特別的仿制辦法。offsettop 這個特點會告知你當時被點擊的元素，相對它的父節點向下挪了多少方位 。currentUrl，便是方才拿到的 url。后邊的 videodisply：block，是指現在能夠顯現出視頻元素了。
試一下，頁面改寫了，闡明更改收效了。能夠看到視頻播映器現已呈現了，并且進度條現已顯現出時刻了，可是還沒有開端播。下一步想辦法讓它開端播映。
先看一下微信小程序的的界說：
微信界說一個辦法叫 creatVideoContext，意思是說在傳入一個 videoid 時，它會把當時 videoid 的 video 元素與體系的播映器進行綁定，也便是完結這個操作后的你增加的這個元素就能夠播了。
微信官方共供給了play、pause、seek、sendDanmu 四種辦法。
看下代碼，能夠看到 creatVideoContext，傳入的參數叫video，便是方才說布局文件里界說的一個 id 等于 video。
能夠發現視頻現已開端播了，劃動一下列表，視頻跟著這個列表在走，第二個視頻顯現出來后，并沒有播映。
這是我自己發現的微信小程序里 bug，點擊第二個視頻時不能自動播映，手動點操控條的時分有或許觸發播映，這是小程序體系的 bug。但有辦法能夠繞過：在本來的辦法上加兩句話，便是設一個 timeout，也便是將這個工作推遲一段時刻再動身，點擊工作完畢之后 500 毫秒再去觸發視頻的播映。
微信官方引薦用自帶的 IDE 來做開發。可是我平常還會做其它渠道的開發，所以會比較傾向統一用 intellij，寫好代碼后只在微信小程序里做調試。繞過 bug 后能夠看到滑視頻跟著列表翻滾能夠自動播映了。這樣咱們根本上完結第二個方針，在列表中播映視頻，并且在翻滾列表時只要一個視頻在播映。
｜。進程四：將頁面共享給老友。
在微信小程序官方文檔的最終，能夠看到有一個關于 onShareAppMessage 的闡明，意思是假如你在頁面里界說了這個函數，這個函數叫 onShareAppMessage，右上角會呈現共享按鈕。
能夠看到，不界說這個函數時，點擊右上角會呈現“當時頁面未設置共享”的提示。
接下來寫這個代碼，直接把官方文檔抄過來即可，要留意，設置頁面元素時，必定要在 page 后的括號中寫，也便是說，必定要在 page 頁面里設置有關這個頁面的體系回調。保存后回到 IDE，點擊右上角，會呈現共享按鈕，能夠自界說共享標題與自界說共享描繪。
看一下代碼也是這么寫的：自界說標題、自界說描繪、自界說 path。自界說 path 是最外層還有一個 APP.gaisen，里邊界說了一切的頁面地址，把頁面地址能夠寫過來后咱們今日的使命就完結了。
匿名用戶 
