微信小程序开发-电影影评小程序

最新推荐文章于 2024-09-17 12:04:25 发布

第九程序

最新推荐文章于 2024-09-17 12:04:25 发布

阅读量5.4k

点赞数 8

分类专栏：微信小程序开发文章标签：小程序开发文档微信小程序开发微信小程序开发教程

本文链接：https://blog.csdn.net/qq_38125123/article/details/76811523

版权

本文详细介绍了微信小程序开发电影影评小程序的步骤，包括创建文件夹、配置app.json和app.wxss，以及hotPage、comingSoon、search和more等页面的wxml、js和wxss代码实现。每个页面的运行结果均有展示，完整代码提供给读者参考。

摘要由CSDN通过智能技术生成

微信小程序电影影评小程序开发步骤：

这是博主的项目包含的文件截图：

首先如图建立文件夹和page页面

然后app.json页面更新代码如下：

{
  "pages": [
    "pages/hotPage/hotPage",
    "pages/comingSoon/comingSoon",
    "pages/search/search",
    "pages/more/more"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/hotPage/hotPage",
      "text": "本地热映"
    },{
      "pagePath": "pages/comingSoon/comingSoon",
      "text": "即将上映"
    },{
      "pagePath": "pages/search/search",
      "text": "影片搜索"
    }]
  }
}

然后是app.wxss页面（为后面的页面样式写的）：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
/* hotPage.wxss */
.movies{
  display:flex;
}
.myimage{
  flex: 1;
}
.moveInfo{
  flex: 2;
}
.yanyuanlist{
  display:flex;
}
.left{
  flex:1;
}
.right{
  flex:2;
}

页面显示如图：

然后是hotPage.wxml页面：

<view class="movies" wx:for="{
   {movies}}" id="{
   {item.id}}" bindtap="jumpTomore">

  <view class="myimage">
    <image src="{
   {item.images.medium}}"></image>
  </view>
  <view class="moveInfo">
    <view class="title">
      名称:{
   {item.title}}
    </view>
    <view class="daoyan">
      导演:{
   {item.directors["0"].name}}
    </view>
    <