微信小程序已經(jīng)在前端圈熱鬧了蠻久，之前靈感君有發(fā)一篇相關(guān)的文章，但如何使用以及體驗(yàn)如何呢？今天就帶來這篇文給還沒嘗試過的朋友作為入門吧~
下面正文：
微信小程序經(jīng)過幾個(gè)月的內(nèi)側(cè)，在今年的 1 月 9 日正式上線，在微信通訊錄頁面就可以搜索你想找的小程序，然后在發(fā)現(xiàn)頁最底部就會有你曾經(jīng)瀏覽過的小程序的入口。
一番體驗(yàn)后比橙子想象的效果好的多，所以自己起手也寫了一個(gè)。下面具體介紹細(xì)節(jié)。
想寫小程序的大家都知道只有企業(yè)賬戶可以發(fā)布，但是開發(fā)卻不需要企業(yè)賬號，但是我們需要實(shí)名認(rèn)證我們的小程序賬號。
注冊賬號
直接給官網(wǎng)鏈接注冊小程序帳號
注意：沒有企業(yè)認(rèn)證記得在選擇主體類型時(shí)選擇->其他組織，組織名稱自己起，機(jī)構(gòu)代碼只要符合它的規(guī)則就行（輸入框下有提示直接復(fù)制粘貼），公章的掃描件上傳隨意圖片即可，管理員信息務(wù)必填寫真實(shí)信息（切記）
開發(fā)工具
在官網(wǎng)給出了下載入口
安裝后會有掃碼登錄，然后按照這個(gè)鏈接執(zhí)行登錄
記得你在官網(wǎng)注冊成功后小程序的 AppID，這里不用選擇本地開發(fā)目錄，為了起手方便當(dāng)你添加項(xiàng)目時(shí)會問你是不是使用它的初始化模板（點(diǎn)擊使用）。
現(xiàn)在不出差錯(cuò)的話你的頁面會出現(xiàn) 你的 頭像、用戶名、Hello world
如果顯示正常，恭喜你環(huán)境配置成功
有時(shí)卻不是那么順利，橙子在打開初始化項(xiàng)目報(bào)錯(cuò) to load : net::D
如果你有相同的錯(cuò)誤解決辦法很簡單，關(guān)掉你的 vpn 即可（并不是所有 vpn 均存在問題，因?yàn)槌茸幼稍兤渌说?vpn 沒關(guān)也不會產(chǎn)生這個(gè)問題），記得重啟你的開發(fā)者工具。
起步
如果你了解幾種文件的作用可以跳過此步，不了解的可以看下官網(wǎng)起步教程，
然后在上面鏈接仔細(xì)過一遍 框架、組件、API（切記認(rèn)真閱讀）
也許你會問官網(wǎng)給的那么詳細(xì)我寫這個(gè)文章的意義在哪？
問的好，如果官網(wǎng)能給我一個(gè)完整的小程序我也不會費(fèi)周折去自己寫，官網(wǎng)的 API 固然重要，都是人家開發(fā)的我們無權(quán)篡改，本文的目的是盡量讓大家少踩坑。
實(shí)戰(zhàn)
自己定義下產(chǎn)品詳情，一個(gè)展示視頻的 app，列表與播放頁，非常簡單的例子，上手簡單
這里涉及到網(wǎng)絡(luò)請求，首先去管理平臺，最下面的設(shè)置里配置你的服務(wù)器域名，你自己有接口最好小程序合法域名視頻教程，不必走本例的接口，根據(jù)官方文檔你可以寫出自己的程序
另外值得一提的就是 V2EX，知乎日報(bào)，豆瓣等都提供外部接口供大家使用，沒有接口的可以用本例的（填寫到合法域名即可），每月只能修改三次謹(jǐn)慎使用
兩個(gè)頁面構(gòu)成？倒也沒那個(gè)必要，增加整個(gè)小程序的體積，而且跨頁面?zhèn)鬏敂?shù)據(jù)多一層邏輯小程序合法域名視頻教程，這里采用wx:if實(shí)現(xiàn)條件渲染來實(shí)現(xiàn)。
我們只需要保留index文件夾下的文件
從全局文件改起 log 部分可以選擇保留，獲取用戶信息部份暫時(shí)用不到
app.js
App({
?onLaunch: function () { ? ?//調(diào)用API從本地緩存中獲取數(shù)據(jù)
? ?var logs = wx.getStorageSync('logs') || []
? ?logs.unshift(Date.now())
? ?wx.setStorageSync('logs', logs)
?}
})全局的配置文件只需要 的基礎(chǔ)配置，這里修改 的內(nèi)容樣式
app.json
{
?"pages":[ ? ?"pages/index/index", ? ?"pages/logs/logs"
?],
?"window":{
? ?"backgroundTextStyle":"light",
? ?"navigationBarBackgroundColor": "#f8ac09",
? ?"navigationBarTitleText": "敢玩原創(chuàng)視頻",
? ?"navigationBarTextStyle":"black"
?}}全局樣式?jīng)]有太多規(guī)則，這里避免后期的計(jì)算誤差問題注意兩點(diǎn)
app.wxss
/* 讓頁面高占滿全屏，類似給 html 設(shè)置 100% 讓子集元素的百分比為全屏的百分比 */
page { ?height: 100%;}
/* border-box 非常方便我們計(jì)算寬高 */
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;
}注：*選擇器無效，強(qiáng)烈推薦使用 flex 進(jìn)行布局，許多場景下普通的布局規(guī)則無效
主頁上面一個(gè)輪播，輪播圖改變時(shí)劇集也發(fā)生變化，默認(rèn)的 隱藏，頁面結(jié)構(gòu)如下
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">沒看過癮？返回主頁側(cè)滑看更多炸裂專輯text>
?view>view>