实战：详解猫眼电影小程序开发过程

   <h2>前言</h2>    <p>我本来是安安静静地写着Android的，只想一心一意做我的本行，没想到某龙偏偏想搞事情——在2017年的1月9号推出了微信小程序，而且“小程序”这三个字又勾起了本人的兴趣，所以，只好暂时“移情别恋”了。</p>    <h2>正文</h2>    <p>废话不多说，先上效果图。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/49f30fb4d89deb03f6afb7ff78367f89.gif"></p>    <p>效果图</p>    <p>本Demo完成共耗费近两周，也是在空余时间去写的，因为涉及到新知识JS、HTML和CSS3，所以也是边学习边写，代码编写上有什么不当处，还需小伙伴在评论处指明，帮助本人更上一层楼！</p>    <p>（注：本文章已默认各位小伙伴已经熟悉微信小程序的目录结构以及每个文件所代表的的含义和小程序API的使用，所以文中不会详细说明，结尾会直接给出完整代码）</p>    <h2>一、目录结构</h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a057fd09a1cdb315302935f9b2fb0471.png"></p>    <p>目录结构</p>    <p>采用的开发工具是 <a href="/misc/goto?guid=4959736828199730404" rel="nofollow,noindex">Egret Wing</a> ，主要目录说明：</p>    <p>从目录可知整体结构简单，主要就是三个界面：首页 homepage 、电影详情页 moviedetail 、影院列表页 cinema 。</p>    <h2>二、首页</h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8a5ee8947b63b4a3075d453ddf763d0d.png"></p>    <p>首页</p>    <p>tab代码，打开app.json如图：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/bf2b517458007d91f0ed2e31edc56a24.png"></p>    <p>pages和tabBar</p>    <p>这里我想说下，微信小程序自带对tabBar选择效果本人还是挺喜欢的（如果在Android上还要给每个tab写个selector选择器的XML文件）。由于这段没什么技术难点，所以本人就不多说了。</p>    <p>接下来进入首页homepage，一个界面的文件结构离不开三个文件：xxx.js、xxx.wxml、xxx.wxss</p>    <p>先来看看布局代码：</p>    <p><img src="https://simg.open-open.com/show/9365e154143dbfa9c403ac648a07db2f.png"></p>    <p>homepage.wxml</p>    <p>在这里本人承认当初写的时候偷了下懒，有些标签属性我直接用style写了，但真正开发时，最好把每个标签的style写在.wxss文件里，通过自定义的class名称（或者id），相同布局的地方可以直接引用同一个class就可以了，不然会像我这样有些属性重复写了几次（手动尴尬）。</p>    <p>.js代码往下看：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/220c82e080a3296d2e7836f228197af8.png"></p>    <p>homepage.js</p>    <p>电影列表的信息本放到了定义的 infos[] 数组中，小程序也不存在json解析，在 wx.request 请求下得到的res取相应的值 res.data.data.movie ，直接在 homepage.html 标签中用 wx:for=“{{infos}}” 遍历，元素默认为item，取值的时候用“item.值的名称”就可以取到数据。</p>    <p>这里有个小地方需要说明下，当时为了解决也是花了点时间：在json数据里有个参数名称为“3d”，而且这个标签不是所有电影都有的，所以定义了 threeD:true 这个变量，为了能在.wxml中取到值，就可想而知的直接写成了 wx:if="{{item.3d}}" ，结果就报错了：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/86c5085134583a865572f6e3511e32fa.png"></p>    <p>错误信息</p>    <p>问题就出在这个3d上，后来查资料才得知改写成 wx:if="{{item['3d']}}" 就立马解决啦，没什么原因，约定俗成，只是我这只前端小白不知道而已（莫见怪……手动微笑）</p>    <p>为了让大家更清楚了解电影列表快的布局，我画了个草图（真的很草……）：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/174b116833dc076087f6d78fa1ed602f.png"></p>    <p>电影列表布局</p>    <p>发个牢骚：第一次写布局时心里就想，还是Android布局写起来方便，刚开始接触CSS3时觉得好麻烦，这个class要给个style，那个也要给个，而且有时要设置id，在同一个class下不同的id也要在wxss给个style，现在适应后感觉还算良好了。因为布局参数没难点，所以这里就不贴代码了。</p>    <h2>三、详情页</h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/5709a5500ff81865e66c12f9d532aa26.png"></p>    <p>电影详情页</p>    <p>这里不贴全部代码了，只用关键代码说明下当时遇到的几个问题：</p>    <p>1.高斯模糊</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/24107db935c3c909bedacc73f6057ec8.png"></p>    <p>高斯模糊</p>    <p>这里共有两个 <view> ，一个 class=“blur” （高斯模糊背景），一个 class=“info” （电影信息）。刚开始是本着Android的布局设计思维去写这个布局，这不就是个RelativeLayout吗，写着写着到最后效果出来，发现本人还是太天真，信息那一栏我莫名其妙写到高斯模糊的下面了，也就是写成了LinearLayout且orientation=vertical，当时就笑自己：你现在又不是在写Android，醒醒！下面便是代码：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/cf2289ee6cabdccda5fbd6feb2dfc57e.png"></p>    <p>高斯模糊和绝对布局</p>    <h2>四、电影院列表</h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/487da96723a4b18eec38ef253fe01a25.png"></p>    <p>影院列表</p>    <p>这里只是简单的列出信息就行了，在布局上没难点，不过代码可以优化下，本人为了省事所以就没去写了，就简单为了实现下效果。</p>    <h2>总结</h2>    <p>总体来说，代码没什么难度，只有三个页面，只是为了熟悉JS和CSS3而写的一个Demo，看过代码后的朋友就能知道可优化的地方很多的。</p>    <p>然后再来说说我对微信小程序的看法：</p>    <p>真的是“小”程序，官方指明程序大小最多不可超过1M，1M啊！朋友们，所以就说明了小程序是没什么功能的，只能满足该应用的本能作用，所以针对手机上的低频应用，我是觉得可以舍App取其小程序，因为我就这么做了，比如美团外卖、饿了么、金山词霸等等。由于大小的限制造成功能的缩减，所以开发周期可想而知也会缩短，减少了一定的人力。</p>    <p>将来，也不敢说小程序会一直走下去或者中途夭折，但小程序的出现也说明又进行了一次“代码革命”，革命能不能成功就看小程序是否真的有长期存在的价值了。你们，怎么看？</p>    <p> </p>    <p> </p>    <p> </p>    <p> </p>    <p>来自：http://geek.csdn.net/news/detail/137060</p>    <p> </p>