微信小程序学习用demo：仿猫眼电影；使用猫眼api，下拉加载

本文主要是介绍微信小程序学习用demo：仿猫眼电影；使用猫眼api，下拉加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

介绍

学习下微信小程序，一个练手项目。

api是使用的http://www.jianshu.com/p/9855610eb1d4

使用

首先需要注册个微信小程序的账号啦，这个就不说了。

进入微信小程序，在设置 =》开发设置 =》服务器域名 =》 request合法域名中添加 https://m.maoyan.com 这个地址，保存。

下载个微信web开发者工具，https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=201715

剩下的也不说了，大家都会，不会的Google。创个新项目，把这个项目放进去就好啦。

由于api 的局限，很多需要资料都没有，目前只做了个首页的最近电影和电影详情。

有兴趣的同学可以往下做下去。

预览图片：

代码示例：

[AppleScript] 纯文本查看复制代码

 ? 
 < ! -- detail.wxml --> 
 < view  class = 'detail' > 
          < view  style = 'width : 100 %;height : 200 px;background - image :  url ( "{{detail.img}}" ) ;background - repeat :  no - repeat ;background - size :  400 %; position : absolute;z - index : -1 ;opacity : 1 ;filter :  blur ( 21 px ) ;' > 
          < / view > 
          < view  class = "top" > 
                  < view  class = 'clearfix' > 
                          < view  class = 'left pull - left' > 
                                  < image  src = ' { { detail.img } } '  / >        
                          < / view > 
                          < view  class = 'right pull - left' > 
                                  < view > 
                                          < title  style = 'color : #fff;font-size:16px;'>{{detail.nm}}</title> 
                                  < / view > 
                                  < view > 
                                          < text  style = 'color : orange; font - size : 12 px;' > { { detail.sc } } < / text > 
                                  < / view > 
                                  < view > 
                                          < text > { { detail.cat } } 
                                                  < text  class = "threeD"  wx : if = ' { { detail[ "3d" ] } } ' > 3 D < / text > 
                                                  < text  class = 'imax' wx : if = ' { { detail.imax } } ' > IMAX < / text > 
                                          < / text > 
                                  < / view > 
                                  < view > 
                                          < text > { { detail.src } } /  { { detail.dur } } 分钟 < / text > 
                                  < / view > 
                                  < view > 
                                          < text > { { detail.rt } } < / text > 
                                  < / view > 
                          < / view > 
                  < / view > 
                  < view  class = "btns" > 
                          < button > 想看 < / button > 
                          < button > 评分 < / button > 
                  < / view > 
          < / view > 
          < view  class = "info" > 
                  < view  class = ' text ' > 
                          < text  style = ' { { hideText ?  "-webkit-line-clamp: 2"  :  "" } } ' > { { detail.dra } } < / text > 
                  < / view > 
                  < view  class = 'controlText  { { hideClass } } ' bindtap = 'toggleText' > 
                          < text > < / text > 
                  < / view > 
          < / view > 
          < view  class = "comment" > 
                  < view  style = 'padding : 5 px  20 px; font - size : 14 px;border - bottom : 1 px solid  #ccc;border-top:1px solid #ccc'> 
                          < text > 观众评论 < / text > 
                  < / view > 
                  < view  class = ' item ' wx : for = ' { { comment } } ' wx : key = ' { { index } } ' > 
                          < view  class = 'img' > 
                                  < image  src = ' { { item .avatarurl } } '  / > 
                          < / view > 
                          < view  class = ' main ' > 
                                  < view  class = ' nickname ' > { { item .nickName } } < / view > 
                                  < view  class = ' content ' > { { item . content } } < / view > 
                          < / view > 
                  < / view > 
          < / view > 
          < view  class = 'preferential - purchase' > 
                  < text > 优惠购买 < / text > 
          < / view > 
 < / view > 