zl程序教程

您现在的位置是:首页 >  工具

当前栏目

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

微信学习程序API 加载 Demo 电影 使用
2023-09-27 14:29:06 时间
介绍

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

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]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
< ! -- 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 >


项目地址及下载:

本帖隐藏的内容

地址:  https://github.com/825618507/wx-maoyan
下载:    wx-maoyan-master.zip (819.65 KB, 下载次数: 19)