一些用户喜欢看电影、玩微信小程序。今天小编就为大家带来微信小程序制作猫眼电影的详细步骤。如果有兴趣的话，就赶紧跟小编一起看看吧。
文本
废话不多说，先上效果图
效果图
这个demo花了近两周的时间才完成，是我利用业余时间写的。因为涉及到新知识JS、HTML、CSS3，所以是边学习边写的。如果代码写的有什么不合适的地方，欢迎在评论里留言。指定并帮助作者达到更高的水平！
（注：本文假设大家已经熟悉微信小程序的目录结构、各个文件的含义以及小程序API的使用，所以文章不会详细解释，完整代码将在直接在最后给出）
猫眼电影API：点击这里
1.目录结构
目录结构
使用的开发工具是Egret Wing（点击进入官网下载）。主目录说明：
从目录中我们可以看到整体结构比较简单，主要有三个界面：首页、电影详情页、影院列表页。
软件名称：egret wing（Egret项目集成开发工具）v4.1.6 官方中文安装版软件大小：56.9MB 更新时间：2019-06-17 2.首页
首页
tab代码，打开app.json如图：
页面和标签栏
这里想说一下，笔者非常喜欢微信小程序自带的tabBar选择效果（如果你想在Android上为每个tab写一个选择器XML文件），由于这部分没有什么技术难度，所以有没必要说太多。
接下来，进入主页。一个界面的文件结构离不开三个文件：xxx.js、xxx.wxml、xxx.wxss。
我们先看一下布局代码：
这里作者承认我刚开始写的时候比较懒。我直接在style中写了一些标签属性。不过实际开发时，最好通过自定义的类名（或id）将各个标签的样式写在.wxss文件中，布局相同的地方可以直接引用同一个类，否则有些属性会被写好几个次像作者一样（手动笨拙）。
.js代码往下看：
主页.js
电影列表的信息放在定义的infos[]数组中。小程序中没有json解析。 wx.request请求下获取的res取对应的值res.data.data.movie，直接在homepage.html标签中。使用wx:for="{{infos}}"进行遍历。该元素默认为item。获取值时，使用“item.value name”来获取数据。
这里有一个小点需要解释一下。当时花了一些时间解决：json数据中有一个名为“3d”的参数，而这个标签并不是所有电影都有，所以定义了变量ThreeD:true。为了获取.wxml中的值，可以想象一下直接写wx:if='{{item.3d}}'，结果报错：
错误信息
问题就出在这个3d上。查了资料发现改写为wx:if='{{item['3d']}}'，立马就解决了。没有理由。这是一个约定。只是作者是一个前端新手。我就知道（别惊讶……手动微笑）
为了让大家更清楚的了解电影列表的布局，作者画了一张草图（真是粗略……）：
电影列表布局
吐槽一下：刚开始写layout的时候，我想，Android的layout写起来更方便。当我第一次接触CSS3时，我发现它很麻烦。这个类需要给一个样式，那个类需要给一个样式，有时还需要设置一个id。同一类下的不同ID也需要在wxss中设置样式。现在已经适应了，感觉还不错。因为布局参数没有什么难度，这里就不贴代码了。
上一页12 下一页阅读全文
