找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序学习用demo:仿猫眼电影;使用猫眼api,下拉加载

  [复制链接]
查看: 8546|回复: 348
最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 15:39:27 | 显示全部楼层 |阅读模式
本帖最后由 cyk 于 2017-1-13 15:41 编辑

介绍

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

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 的局限,很多需要资料都没有,目前只做了个首页的最近电影和电影详情。

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

预览图片:




代码示例:


  1.   <!-- detail.wxml -->
  2. <view class='detail'>
  3.         <view style='width:100%;height:200px;background-image: url("{{detail.img}}");background-repeat: no-repeat;background-size: 400%;position:absolute;z-index:-1;opacity:1;filter: blur(21px);'>
  4.         </view>
  5.         <view class="top">
  6.                 <view class='clearfix'>
  7.                         <view class='left pull-left'>
  8.                                 <image src='{{detail.img}}' />      
  9.                         </view>
  10.                         <view class='right pull-left'>
  11.                                 <view>
  12.                                         <title style='color:#fff;font-size:16px;'>{{detail.nm}}</title>
  13.                                 </view>
  14.                                 <view>
  15.                                         <text style='color:orange;font-size:12px;'>{{detail.sc}}</text>
  16.                                 </view>
  17.                                 <view>
  18.                                         <text>{{detail.cat}}
  19.                                                 <text class="threeD" wx:if='{{detail["3d"]}}'>3D</text>
  20.                                                 <text class='imax' wx:if='{{detail.imax}}'>IMAX</text>
  21.                                         </text>
  22.                                 </view>
  23.                                 <view>
  24.                                         <text>{{detail.src}}/ {{detail.dur}}分钟</text>
  25.                                 </view>
  26.                                 <view>
  27.                                         <text>{{detail.rt}}</text>
  28.                                 </view>
  29.                         </view>
  30.                 </view>
  31.                 <view class="btns">
  32.                         <button>想看</button>
  33.                         <button>评分</button>
  34.                 </view>
  35.         </view>
  36.         <view class="info">
  37.                 <view class='text'>
  38.                         <text style='{{hideText ? "-webkit-line-clamp: 2" : ""}}'>{{detail.dra}}</text>
  39.                 </view>
  40.                 <view class='controlText {{hideClass}}' bindtap='toggleText'>
  41.                         <text></text>
  42.                 </view>
  43.         </view>
  44.         <view class="comment">
  45.                 <view style='padding:5px 20px;font-size:14px;border-bottom:1px solid #ccc;border-top:1px solid #ccc'>
  46.                         <text>观众评论</text>
  47.                 </view>
  48.                 <view class='item' wx:for='{{comment}}' wx:key='{{index}}'>
  49.                         <view class='img'>
  50.                                 <image src='{{item.avatarurl}}' />
  51.                         </view>
  52.                         <view class='main'>
  53.                                 <view class='nickname'>{{item.nickName}}</view>
  54.                                 <view class='content'>{{item.content}}</view>
  55.                         </view>
  56.                 </view>
  57.         </view>
  58.         <view class='preferential-purchase'>
  59.                 <text>优惠购买</text>
  60.         </view>
  61. </view>
复制代码
附件下载:
游客,如果您要查看本帖隐藏内容请回复

即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复

使用道具 举报

最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 15:40:44 | 显示全部楼层
本帖最后由 cyk 于 2017-1-16 14:31 编辑

厉害厉害,我在使用即速应用小程序制作工具,这个工具挺不错的。大家有什么好推荐的?
即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复 支持 反对

使用道具 举报

最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 15:51:52 | 显示全部楼层
微信小程序学习用demo:仿猫眼电影;使用猫眼api,下拉加载
即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复 支持 反对

使用道具 举报

最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 16:45:27 | 显示全部楼层
微信小程序开发
即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复 支持 反对

使用道具 举报

最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 16:45:31 | 显示全部楼层
微信小程序开发
即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复 支持 反对

使用道具 举报

最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 16:45:47 | 显示全部楼层
微信小程序开发
即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复 支持 反对

使用道具 举报

最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 16:46:05 | 显示全部楼层
微信小程序开发
即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复 支持 反对

使用道具 举报

最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 16:46:22 | 显示全部楼层
微信小程序开发
即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复 支持 反对

使用道具 举报

最佳答案
0 

8

主题

213

帖子

1359

积分

专家路上

积分
1359
QQ
 楼主| 发表于 2017-1-13 16:46:44 | 显示全部楼层
微信小程序开发
即速.应用--可视化拖拽模块,一键生成微信小程序开发工具 ...
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

3

帖子

58

积分

新人求带

积分
58
发表于 2017-1-13 16:48:49 | 显示全部楼层
新人来学习学习
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com