2016年国庆前一周，腾讯公布微信小程序开始内测。

顿时IT圈子沸腾了，更有意思的是，在距离腾讯公布微信小程序开始内测的短短不到24小时的时间内，微信开发者工具被破解，没有内测资格的程序员也可以尝鲜，各个QQ群，微信群瞬间聚集了一大批程序猿热火朝天的讨论着小程序的前景，开发环境，开发过程等话题，由此可见猿猿们对此关注的程度。

写在前头

最近有段时间没有写文章了，国庆假期刚过，完善了一下假期前写的微信小程序，特地把源码分享出来，所以本文并不是 小程序开发教程，想学习如何开发微信小程序，还是去看官方的文档，这里只做分享和项目简介。

跟风作案

看着大家各个摩拳擦掌，跃跃欲试，笔者也忍不住玩弄一把，说干就干。

想做一个小程序，首先得有数据，我首先想到的是三年前自己仿制的一个视频app（V电影），没想到三年后还要用他们的接口......

首先贴一下源码

由于时间仓促，功能不完善，望各位看官谅解......

如果觉得还不错，还请★一下，以示鼓励😂😂😂😂

搭建环境

官方文档

想要开始开发小程序，人家官方的文档还是要简单的通读一遍，不然会像小白一样，问一些文档上写的明明白白的小白问题

微信小程序IDE破解

感谢@老郭为人民服务为我们提供了破解版的微信小程序IDE，参照这份教程，搭建完整的开发测试环境

项目简述

目录结构

基本注意事项：

1. 各个页面都在page文件夹下，如：首页home 频道 channel 系列series 视频播放playview等。

2. 每个页面的文件夹下包含一个 *.js 和 *.wxml。

3. util文件夹下是接口文件和工具类

4. 新建的页面必须在根目录下的app.json中注册，如：

    {
        "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至少有两项，如：

    {
        "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布局，对flex不熟悉的，参考阮一峰老师的这篇文章

7. 系统提供了获取App对象的方法

    var APP = getApp();
   

所以界面间传值使用的是app.globalData。

Demo效果图