tab代码，打开app.json如图：

和

这里我想说，我非常喜欢微信小程序自带的选择效果（如果我要为每个选项卡写一个选择器XML文件的话）。由于本节没有技术难度，所以不再赘述。

接下来，进入主页。一个界面的文件结构离不开三个文件：xxx.js、xxx.wxml、xxx.wxss。

我们先看一下布局代码：

.wxml

这里我承认我刚开始写的时候比较懒。我直接写了一些标签属性。不过，实际开发时，最好通过自定义名称（或id）来写入.wxss文件中的每个标签。 ，布局相同的地方可以直接引用相同的，不然有些属性会像我一样被写好几遍（手动尴尬）。

.js代码往下看：

.js

电影列表的信息放在定义的[]数组中，小程序中没有进行json解析。 wx下得到的res。 取对应值res.data.data.，在.html标签中直接使用wx：for="{{}}"遍历，元素默认为item，获取值时使用“item.名称” ”来获取数据。

这里有一个小点需要解释一下。当时花了一些时间解决：json数据中有一个名为“3d”的参数，而这个标签并不是所有电影都有，所以定义了变量：true。如果能拿到.wxml中的值，可以预见的是直接写成wx:if="{{item.3d}}"，结果会报错：

错误信息

问题就出在这个3d上。查了资料发现应该改写为wx:if="{{item['3d']}}"，立马就解决了。没有理由。这是一个约定。只是我是一个前端菜鸟而已。我只是知道（别惊讶……手动微笑）

为了让大家更清楚的了解电影列表的布局，我画了一张草图（真是粗略了……）：

电影列表布局

吐槽一下：刚开始写的时候，我想，写起来比较方便。当我第一次接触CSS3时，我发现它很麻烦。我得给这个那个，有时候还得设置id。相同情况下需要在wxss中给出不同的ID，现在习惯了之后感觉还不错。因为布局参数没有什么难度，所以这里就不贴代码了。

3.详情页

电影详情页

这里就不把全部代码贴出来了，只用关键代码来解释一下当时遇到的几个问题：

1.高斯模糊

高斯模糊

这里有两个，一个=“blur”（高斯模糊背景），一个=“info”（电影信息）。一开始我是根据自己的布局设计思路写了这个布局。这不只是一个布局吗？写啊写，直到最后的效果出来，才发现自己还是太天真了。信息栏里，我莫名其妙的写在高斯模糊下。我就写了和=，当时我就笑自己：你现在不写了，醒醒吧！这是代码：

高斯模糊和绝对布局

4. 电影院列表

剧院列表

这里只是一个简单的信息列表。布局没有难度，但是代码可以优化。我写它并不是为了省事。只是为了达到效果而已。

总结

总体来说，代码并不难。只有三页。这只是为了熟悉 JS 和 CSS3 而编写的演示。看过代码的朋友就会知道，有很多可以优化的地方。

那我就来说说我对微信小程序的看法：

这确实是一个“小”程序。官方规定程序大小不能超过1M。 1M！小伙伴们，这意味着小程序没有任何功能，只能满足应用的本能功能。所以，对于手机上的低频应用，我觉得可以选择小程序而不是app，因为我就是这么做的，比如美团外卖、饿了么、金山词霸等。由于规模限制，可以想象开发周期也会缩短，减少一定的人力。

未来，我不敢说小程序会继续发展或者中途消亡，但小程序的出现也预示着又一场“代码革命”的出现。这场革命能否成功，取决于小程序是否真正具有长期价值。你怎么认为？

最后附上本Demo的完整代码下载地址：。