2016年國(guó)慶前一周浓领，騰訊公布微信小程序開(kāi)始內(nèi)測(cè)反镇。

頓時(shí)IT圈子沸騰了犯戏，更有意思的是送火，在距離騰訊公布微信小程序開(kāi)始內(nèi)測(cè)的短短不到24小時(shí)的時(shí)間內(nèi)，微信開(kāi)發(fā)者工具被破解先匪，沒(méi)有內(nèi)測(cè)資格的程序員也可以嘗鮮种吸，各個(gè)QQ群，微信群瞬間聚集了一大批程序猿熱火朝天的討論著小程序的前景呀非，開(kāi)發(fā)環(huán)境坚俗，開(kāi)發(fā)過(guò)程等話題，由此可見(jiàn)猿猿們對(duì)此關(guān)注的程度岸裙。

寫(xiě)在前頭

最近有段時(shí)間沒(méi)有寫(xiě)文章了猖败，國(guó)慶假期剛過(guò)，完善了一下假期前寫(xiě)的微信小程序哥桥，特地把源碼分享出來(lái)辙浑，所以本文并不是 小程序開(kāi)發(fā)教程激涤，想學(xué)習(xí)如何開(kāi)發(fā)微信小程序拟糕，還是去看官方的文檔，這里只做分享和項(xiàng)目簡(jiǎn)介倦踢。

跟風(fēng)作案

看著大家各個(gè)摩拳擦掌送滞，躍躍欲試，筆者也忍不住玩弄一把辱挥，說(shuō)干就干犁嗅。

想做一個(gè)小程序，首先得有數(shù)據(jù)晤碘，我首先想到的是三年前自己仿制的一個(gè)視頻app（V電影）褂微，沒(méi)想到三年后還要用他們的接口......

首先貼一下源碼

由于時(shí)間倉(cāng)促，功能不完善园爷，望各位看官諒解......

如果覺(jué)得還不錯(cuò)宠蚂，還請(qǐng)★一下，以示鼓勵(lì)????????

搭建環(huán)境

官方文檔

想要開(kāi)始開(kāi)發(fā)小程序童社，人家官方的文檔還是要簡(jiǎn)單的通讀一遍求厕，不然會(huì)像小白一樣，問(wèn)一些文檔上寫(xiě)的明明白白的小白問(wèn)題

微信小程序IDE破解

感謝@老郭為人民服務(wù)為我們提供了破解版的微信小程序IDE，參照這份教程呀癣，搭建完整的開(kāi)發(fā)測(cè)試環(huán)境

項(xiàng)目簡(jiǎn)述

目錄結(jié)構(gòu)

基本注意事項(xiàng)：

1. 各個(gè)頁(yè)面都在page文件夾下美浦，如：首頁(yè)home 頻道 channel 系列series 視頻播放playview等。

2. 每個(gè)頁(yè)面的文件夾下包含一個(gè) *.js 和 *.wxml项栏。

3. util文件夾下是接口文件和工具類(lèi)

4. 新建的頁(yè)面必須在根目錄下的app.json中注冊(cè)浦辨，如：

    {
        "pages": [
            "page/home/home",
            "page/test/test",
            "page/playview/playview",
            "page/channel/channel",
            "page/channelList/channelList",
            "page/series/series",
            "page/seriesDetail/seriesDetail"
        ],
        ...
    }
   

5. app.json中可以配置tabbar，但list至少有兩項(xiàng)沼沈，如：

    {
        "tabBar": {
            "color": "#8a8a8a",
            "selectedColor": "#00bb9c",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "list": [{
                "pagePath": "page/home/home",
                "iconPath": "image/film64.png",
                "selectedIconPath": "image/filmHL64.png",
                "text": "V電影"
            },{
                "pagePath": "page/channel/channel",
                "iconPath": "image/channel64.png",
                "selectedIconPath": "image/channelHL64.png",
                "text": "頻道"
            },{
                "pagePath": "page/series/series",
                "iconPath": "image/series64.png",
                "selectedIconPath": "image/seriesHL64.png",
                "text": "系列"
            },{
                "pagePath": "page/test/test",
                "iconPath": "image/playground64.png",
                "selectedIconPath": "image/playgroundHL64.png",
                "text": "playground"
            }]
        },
        ...
    }
   

6. 界面布局用flex布局荤牍，對(duì)flex不熟悉的，參考阮一峰老師的這篇文章

7. 系統(tǒng)提供了獲取App對(duì)象的方法

    var APP = getApp();
   

所以界面間傳值使用的是app.globalData庆冕。

Demo效果圖