微信小程序----一个简单的电影小程序

于 2023-07-14 13:41:01 发布
阅读量3.8k 收藏 74
点赞数 8
文章标签： 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58461211/article/details/131720356
版权

最终界面：

 

电影小程序

首先一共有这些包

 

app.jion中代码：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/geren/geren",
    "pages/xqy/xqy"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#f00000",
    "backgroundColor": "#efefef",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/images/shouye.png",
        "selectedIconPath": "pages/images/shouye_selected.png"
      },
      {
        "pagePath": "pages/geren/geren",
        "text": "个人",
        "iconPath": "pages/images/wode.png",
        "selectedIconPath": "pages/images/wode_selected.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

第二步：我们来写第一个界面index

index.json

{
  "usingComponents": {},
  "navigationBarTitleText": "小栋电影"
}

它实现的是

 

 index.wxml

这段代码展示了一个电影推荐的小程序页面。页面上有一个顶部的搜索框，可以搜索电影；接下来是一个轮播图展示电影宣传图；然后是三个横向滚动展示电影的区域，每个区域都有电影海报和电影评分等信息；最后是三个横向滚动展示电视剧的区域，同样包括电视剧海报和电视剧评分等信息。

<!--index.wxml-->
<view class="box">
<view class="box1">
<input placeholder="请输入搜索内容" bindinput="getinput" value="{{val}}"> </input>
<icon type="search" wx:if="{{isSearch}}"></icon>
<icon type="clear" wx:if="{{isClear}}" bindtap="cleartap"></icon>
</view>
</view>

<swiper style="width: 100%;height: 250px;"
indicator-dots="true"
indicator-active-color="green"
autoplay="true"
interval="3000"
>
<view>
  <swiper-item>
<image src="/pages/images/p2561542272.jpg" mode="scaleToFill" 
style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/pages/images/p2563630521.jpg" mode="scaleToFill" 
  style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/pages/images/p2563815623.jpg" 
  mode="scaleToFill" 
  style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/pages/images/p2564461744.jpg" 
  mode="scaleToFill" 
  style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/pages/images/p2566170919.jpg" 
  mode="scaleToFill" 
  style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/pages/images/p2566598269.jpg" 
  mode="scaleToFill" 
  style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/pages/images/p2567841004.jpg" 
  mode="scaleToFill" 
  style="width: 100%;"></image>
</swiper-item>
</view>
</swiper>

<view class="one">
  <text >影院热映</text>
</view>
<view class="two">

<text>查看更多></text>

  
</view>

<scroll-view class="scroll-box" scroll-x="true"
enable-flex="true">

<view class="item">
<navigator url="/pages/xqy/xqy">
  <image src="/pages/images/p2567841004.jpg"
mode="" />
</navigator>


<text>罗小黑战记</text>
<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >8.4分</text>

</view>
</view>


<view class="item">
  <image src="/pages/images/p2566598269.jpg"
mode="" />
<text>徒手攀岩</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9分</text>

</view>

</view>

<view class="item">
  <image src="/pages/images/p2566170919.jpg"
mode="" />
<text>检查方的罪人</text>
<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >7.2分</text>

</view>

</view>


<view class="item">
  <image src="/pages/images/p2563815623.jpg"
mode="" />
<text>哪吒</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9.9分</text>

</view>

</view>

<view class="item">
<navigator url="/pages/xqy/xqy">
  <image src="/pages/images/p2561542272.jpg"
mode="" />
</navigator>
<text>速度与激情</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9.3分</text>

</view>

</view>

</scroll-view>




<view class="one">
  <text >热门电影</text>
</view>
<view class="two">
  <text>查看更多></text>
</view>

<scroll-view class="scroll-box" scroll-x="true"
enable-flex="true">

<view class="item">
 
<navigator url="/pages/xqy/xqy">
  <image src="/pages/images/p2567841004.jpg"
mode="" />
</navigator>

<text>罗小黑战记</text>
<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >8.4分</text>

</view>
</view>

<view class="item">
  <image src="/pages/images/p2566598269.jpg"
mode="" />
<text>徒手攀岩</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9分</text>

</view>

</view>

<view class="item">
  <image src="/pages/images/p2566170919.jpg"
mode="" />
<text>检查方的罪人</text>
<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >7.2分</text>

</view>

</view>


<view class="item">
  <image src="/pages/images/p2563815623.jpg"
mode="" />
<text>哪吒</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9.9分</text>

</view>

</view>
<view class="item">
<navigator url="/pages/xqy/xqy">
  <image src="/pages/images/p2561542272.jpg"
mode="" />
</navigator>
<text>速度与激情</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9.3分</text>

</view>

</view>
</scroll-view>

<view class="one">
  <text >热门电视剧</text>
</view>
<view class="two">
  <text>查看更多></text>
</view>

<scroll-view class="scroll-box" scroll-x="true"
enable-flex="true">

<view class="item">
  <navigator url="/pages/xqy/xqy">
  <image src="/pages/images/p2567841004.jpg"
mode="" />
</navigator>

<text>罗小黑战记</text>
<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >8.4分</text>

</view>
</view>

<view class="item">
  <image src="/pages/images/p2566598269.jpg"
mode="" />
<text>徒手攀岩</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9分</text>

</view>

</view>

<view class="item">
  <image src="/pages/images/p2566170919.jpg"
mode="" />
<text>检查方的罪人</text>
<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >7.2分</text>

</view>

</view>


<view class="item">
  <image src="/pages/images/p2563815623.jpg"
mode="" />
<text>哪吒</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9.9分</text>

</view>

</view>
<view class="item">
<navigator url="/pages/xqy/xqy">
  <image src="/pages/images/p2561542272.jpg"
mode="" />
</navigator>
<text>速度与激情</text>

<view class="star">

<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 12px;height: 12px;"  mode="" />
<image src="/pages/images/star.png" style="width: 12px;height: 12px;"  mode="" />
<text style="font-size: 10px; color: gray;" >9.3分</text>

</view>

</view>
</scroll-view>

 

个人界面:

geren.wxml:

<!--pages/geren/geren.wxml-->

<text style="font-size: 20px;font-weight: 700;line-height: 40px;">城市</text>
<view class="box1">
<input placeholder="请输入你的居住城市"></input>
</view>

<view class="box2">
</view>

<text style="font-size: 20px;font-weight: 700;line-height: 40px;">省</text>
<view class="box1">
<input placeholder="请输入你的省份"></input>
</view>

<view class="box2">
</view>
<text style="font-size: 20px;font-weight: 700;line-height: 40px;">国家</text>
<view class="box1">
<input placeholder="请输入你的国家"></input>
</view>

<view class="box2">
</view>
<text style="font-size: 20px;font-weight: 700;line-height: 40px;">性别</text>
<view class="box1">
<input placeholder="请输入你的性别"></input>
</view>

<view class="box2">
</view>

 

geren.json

{
  "usingComponents": {},
  "navigationBarTitleText": "个人界面"
}

 接下来点击图片会进入详情页,一下写出一个关于速度与激情的详情页:

xqy.json

{
  "usingComponents": {},
  "navigationBarTitleText": "详情页"
}

xqy.wxml

<!--pages/xqy/xqy.wxml-->
<view class="box1">

<image src="/pages/images/p2561542272.jpg" style="width: 150px;height: 220px;" mode="scaleToFill"></image>

<view class="box2">

<text style="font-size: 34px;font-weight: 700;">速度与激情</text>

<view class="box3">
  <text style="font-size: 16px;color: gray;">纪录片/美国/片长100分钟</text>
</view>


<view class="star">

<image src="/pages/images/statlight.png" style="width: 20px;height: 20px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 20px;height: 20px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 20px;height: 20px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 20px;height: 20px;"  mode="" />
<image src="/pages/images/statlight.png" style="width: 20px;height: 20px;"  mode="" />
<image src="/pages/images/star.png" style="width: 20px;height: 20px;"  mode="" />
<text style="font-size: 30px; color: gray;" >9.3分</text>
</view>
</view>
</view>

<view class="box4">
<text style="font-size: 25px;font-weight: 700;">简介</text>
</view>

<view class="box4">
<text>一个是美国外交安全局的忠诚特工、身材魁梧的执法者霍布斯（强森饰），一个是前英国军事特工精英、无法无天的恶棍肖(斯坦森饰)。在201.. </text>
</view>

<view class="box5">
  <text style="font-size: 25px;font-weight: 700;">演员</text>
</view>

<scroll-view class="scroll-box" scroll-x="true"
enable-flex="true">



<view class="item">

<image src="/pages/images/dawei.jpg"></image>
<text>大卫·雷奇</text>
<view>

 <text style="font-size: 15px; color: gray;">导演</text>

</view>

</view>



<view class="item">
<image src="/pages/images/qiangseng.jpg"></image>
<text>道恩·强森</text>
<view>

 <text style="font-size: 15px; color: gray;">饰 卢克·霍布斯 Luke Hobbs</text>
 
</view>

</view>



<view class="item">
<image src="/pages/images/jieseng.jpg"></image>

<text>杰森·斯坦森</text>
<view>

 <text style="font-size: 15px; color: gray;">饰 德卡·肖 Deckard Shaw</text>
 
</view>
</view>



<view class="item">
<image src="/pages/images/aierba.jpg"></image>

<text>伊德里斯·艾尔巴</text>
<view>

 <text style="font-size: 15px; color: gray;">饰 布雷克斯顿 Brixton</text>
 
</view>
</view>



<view class="item">
<image src="/pages/images/fannisha.jpg"></image>

<text>凡妮莎·柯比 </text>
<view>

 <text style="font-size: 15px; color: gray;">饰 哈蒂·肖 Hattie Shaw</text>
 
</view>
</view>




</scroll-view>

东咚栋
关注
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值