258资源分享网

此文是学习小程序第二天做出的一个小demo,调用了豆瓣电影的api,但是需要填上自己appId,现在项目的 目录如下图：

效果图如下：

在这个demo里面，我更改了小程序的navigationBar，设置了最下方的三个tabBar,这是公共的设置需要在app.json里面设置，

1 { 2 3 "pages": [ 4 "pages/index/index", 5 "pages/logs/logs", 6 "pages/query/index", 7 "pages/moveTop/index" 8 ], 9 "window": { 10 "backgroundTextStyle": "light", 11 "navigationBarBackgroundColor": "#222", 12 "navigationBarTitleText": "豆瓣电影", 13 "navigationBarTextStyle": "#fff" 14 }, 15 "tabBar": { 16 "backgroundColor": "#222", 17 "list": [ 18 { 19 "pagePath": "pages/index/index", 20 "text": "当前热映", 21 "iconPath": "pages/images/collection-o.png", 22 "selectedIconPath": "pages/images/collection.png" 23 }, 24 { 25 "pagePath": "pages/moveTop/index", 26 "text": "影片排行榜", 27 "iconPath": "pages/images/examResult-time.png", 28 "selectedIconPath": "pages/images/icon_clock.png" 29 }, 30 { 31 "pagePath": "pages/query/index", 32 "text": "查询", 33 "iconPath": "pages/images/nav_icon.png", 34 "selectedIconPath": "pages/images/icon_nav_cell.png" 35 } 36 ] 37 } 38 }

 

我在做好小程序之后，把几个公共页面的样式抽离出来，放到了app.wxss文件里面

1 /**app.wxss**/ 2 .container { 3 height: 100%; 4 padding: 0; 5 } 6 7 .list_img { 8 float: left; 9 width: 120px; 10 } 11 12 image { 13 width: 100%; 14 height: 140px; 15 padding: 20px 20px 0 20px; 16 } 17 18 .list_info { 19 float: left; 20 width: 210px; 21 height: 140px; 22 padding-left: 30px; 23 padding-top: 40px; 24 } 25 26 .move-item_fontWeight { 27 font-weight: bold; 28 29 } 30 31 .move-item_moveName{ 32 33 } 34 .move-item_fontSize { 35 font-size: 13px; 36 }

 

当前热映部分的代码

1 <!--index.wxml--> 2 <view class="container"> 3 4 <!--轮播图--> 5 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> 6 <block wx:for="{{imgUrls}}" wx:key=http://www.yiyongtong.com/archives/"{{item}}"> 7 <swiper-item> 8 <image src=http://www.yiyongtong.com/archives/"{{item}}" /> 9 </swiper-item> 10 </block> 11 </swiper> 12 13 <!--热映列表展示--> 14 <block wx:for="{{moves}}" wx:key=http://www.yiyongtong.com/archives/"{{item}}"> 15 <view class="list"> 16 17 <view class="list_img"> 18 <image src=http://www.yiyongtong.com/archives/"{{item.images.medium}}"></image> 19 </view> 20 21 <view class="list_info"> 22 <text class="move-item_fontWeight">片名:</text> 23 <text class="move-item_moveName">{{item.title}}\n</text> 24 25 <view> 26 <text class="move-item_fontWeight">主演:</text> 27 <block wx:for="{{item.casts}}" wx:key="{{index}}"> 28 <text class="move-item_fontSize">{{item.name}} </text> 29 </block> 30 </view> 31 32 <view> 33 <text class="move-item_fontWeight">导演:</text> 34 <block wx:for="{{item.directors}}" wx:key="{{index}}"> 35 <text class="move-item_fontSize">{{item.name}} </text> 36 </block> 37 </view> 38 39 <view> 40 <text class="move-item_fontWeight">类型:</text> 41 <block wx:for="{{item.genres}}" wx:key="{{index}}"> 42 <text class="move-item_fontSize">{{item}} </text> 43 </block> 44 </view> 45 46 </view> 47 </view> 48 </block> 49 50 </view>