微信小程序已經在前端圈熱鬧了蠻久，之前靈感君有發一篇相關的文章，但如何使用以及體驗如何呢？今天就帶來這篇文給還沒嘗試過的朋友作為入門吧~
下面正文：
微信小程序經過幾個月的內側，在今年的 1 月 9 日正式上線，在微信通訊錄頁面就可以搜索你想找的小程序，然后在發現頁最底部就會有你曾經瀏覽過的小程序的入口。
一番體驗后比橙子想象的效果好的多，所以自己起手也寫了一個。下面具體介紹細節。
想寫小程序的大家都知道只有企業賬戶可以發布，但是開發卻不需要企業賬號，但是我們需要實名認證我們的小程序賬號。
注冊賬號
直接給官網鏈接注冊小程序帳號
注意：沒有企業認證記得在選擇主體類型時選擇->其他組織，組織名稱自己起，機構代碼只要符合它的規則就行（輸入框下有提示直接復制粘貼），公章的掃描件上傳隨意圖片即可，管理員信息務必填寫真實信息（切記）
開發工具
在官網給出了下載入口
安裝后會有掃碼登錄，然后按照這個鏈接執行登錄
記得你在官網注冊成功后小程序的 AppID，這里不用選擇本地開發目錄，為了起手方便當你添加項目時會問你是不是使用它的初始化模板（點擊使用）。
現在不出差錯的話你的頁面會出現 你的 頭像、用戶名、Hello world
如果顯示正常，恭喜你環境配置成功
有時卻不是那么順利，橙子在打開初始化項目報錯 to load : net::D
如果你有相同的錯誤解決辦法很簡單，關掉你的 vpn 即可（并不是所有 vpn 均存在問題，因為橙子咨詢其他人的 vpn 沒關也不會產生這個問題），記得重啟你的開發者工具。
起步
如果你了解幾種文件的作用可以跳過此步，不了解的可以看下官網起步教程，
然后在上面鏈接仔細過一遍 框架、組件、API（切記認真閱讀）
也許你會問官網給的那么詳細我寫這個文章的意義在哪？
問的好，如果官網能給我一個完整的小程序我也不會費周折去自己寫，官網的 API 固然重要，都是人家開發的我們無權篡改，本文的目的是盡量讓大家少踩坑。
實戰
自己定義下產品詳情，一個展示視頻的 app，列表與播放頁，非常簡單的例子，上手簡單
這里涉及到網絡請求，首先去管理平臺，最下面的設置里配置你的服務器域名，你自己有接口最好小程序合法域名視頻教程，不必走本例的接口，根據官方文檔你可以寫出自己的程序
另外值得一提的就是 V2EX，知乎日報，豆瓣等都提供外部接口供大家使用，沒有接口的可以用本例的（填寫到合法域名即可），每月只能修改三次謹慎使用
兩個頁面構成？倒也沒那個必要，增加整個小程序的體積，而且跨頁面傳輸數據多一層邏輯小程序合法域名視頻教程，這里采用wx:if實現條件渲染來實現。
我們只需要保留index文件夾下的文件
從全局文件改起 log 部分可以選擇保留，獲取用戶信息部份暫時用不到
app.js
App({
?onLaunch: function () { ? ?//調用API從本地緩存中獲取數據
? ?var logs = wx.getStorageSync('logs') || []
? ?logs.unshift(Date.now())
? ?wx.setStorageSync('logs', logs)
?}
})全局的配置文件只需要 的基礎配置，這里修改 的內容樣式
app.json
{
?"pages":[ ? ?"pages/index/index", ? ?"pages/logs/logs"
?],
?"window":{
? ?"backgroundTextStyle":"light",
? ?"navigationBarBackgroundColor": "#f8ac09",
? ?"navigationBarTitleText": "敢玩原創視頻",
? ?"navigationBarTextStyle":"black"
?}}全局樣式沒有太多規則，這里避免后期的計算誤差問題注意兩點
app.wxss
/* 讓頁面高占滿全屏，類似給 html 設置 100% 讓子集元素的百分比為全屏的百分比 */
page { ?height: 100%;}
/* border-box 非常方便我們計算寬高 */
view, text { ?box-sizing: border-box;}
.container { ?
? ?height: 100%; ?
? ?display: flex; ?
? ?flex-direction: column; ?
? ?align-items: center; ?
? ?justify-content: space-between; ?
? ?box-sizing: border-box;
}注：*選擇器無效，強烈推薦使用 flex 進行布局，許多場景下普通的布局規則無效
主頁上面一個輪播，輪播圖改變時劇集也發生變化，默認的 隱藏，頁面結構如下
pages/index/index.wxml
<view class="container">
?<swiper class="swiper" bindchange="changeAlbum" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" duration="{{duration}}">
? ?<block wx:for="{{albums}}" wx:key="title">
? ? ?<swiper-item class="swiper-item">
? ? ? ?<image src="{{item.cover}}" class="slide-image" />
? ? ?swiper-item>
? ?block>
?swiper>
?<scroll-view class="scroll-view" scroll-y="true" scroll-top="{{scrollTop}}">
? ?<block wx:for="{{videoList}}" wx:key="id">
? ? ?<view class="video-item" data-id="{{index}}" catchtap="playVideo">
? ? ? ?<image src="{{item.cover}}" class="video-cover">image>
? ? ? ?<view class="video-info">
? ? ? ? ?<text class="video-title">{{item.title}}text>
? ? ? ? ?<text class="video-play-count">{{item.play_count}}次播放text>
? ? ? ?view>
? ? ?view>
? ?block>
?scroll-view>
?<view class="player" wx:if="{{playerShow}}">
? ?<icon class="close" type="clear" size="45" color="rgba(255, 255, 255, 0.5)" catchtap="closeVideo" />
? ?<video class="video" src="{{videoUrl}}" autoplay="true" />
? ?<text class="player-title">第{{videoIndex + 1}}集:{{videoTitle}}text>
? ?<view class="handle-bar">
? ? ?<button class="pre-btn" catchtap="preVideo">上一集button>
? ? ?<button class="next-btn" catchtap="nextVideo">下一集button>
? ?view>
? ?<text class="msg">沒看過癮？返回主頁側滑看更多炸裂專輯text>
?view>view>