微信小程序之电影影评小程序制作代码

  

本文实例为大家分享了微信小程序制作影评小程序的具体代码,供大家参考,具体内容如下

  

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

  

微信小程序之电影影评小程序制作代码

  

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

  

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

        {   “页面”:(   “页面/hotPage hotPage”,   “页面/comingSoon comingSoon”,   “页面/搜索/搜索”,   “页面/多/多”   ),   "窗口":{   “backgroundTextStyle”:“光”,   “navigationBarBackgroundColor”:“# fff”,   “navigationBarTitleText”:“微信”,   “navigationBarTextStyle”:“黑色”   },   " tabBar ": {   “列表”:[{   :“pagePath页/hotPage/hotPage”,   “文本”:“本地热映”   },{   :“pagePath页/comingSoon/comingSoon”,   “文本”:“即将上映”   },{   “pagePath”:“页面/搜索/搜索”,   “文本”:“影片搜索”   })   }   }   之前      

是app.wxss页面(为后面的页面样式写的):

     /* * app.wxss * */.container {   高度:100%;   显示:flex;   flex-direction:列;   对齐项目:中心;   justify-content:之间的空间;   填充:200 rpx 0;   box-sizing: border-box;   }/* hotPage。wxs */.movies {   显示:flex;   }   .myimage {   flex: 1;   }   .moveInfo {   flex: 2;   }   .yanyuanlist {   显示:flex;   }   .left {   flex: 1;   }   铃声{   flex: 2;   }   之前      

页面显示如图:
  

  

微信小程序之电影影评小程序制作代码

  

然后是hotPage.wxml页面:

        & lt;视图类=暗缬啊钡奶炱?="{{电影}}" id="{{项目。id}} jumpTomore“bindtap=比;      & lt;视图类=澳0濉北?   & lt;图像src=" https://www.yisu.com/zixun/{{item.images.medium}}”祝辞& lt;/image>   & lt;/view>   & lt;视图类=癿oveInfo”比;   & lt;视图类=氨晏狻北?   名称:{{item.title}}   & lt;/view>   & lt;视图类=癲aoyan”比;   导演:{{item.directors (“0”) . name}}   & lt;/view>   & lt;视图类=皔anyuanlist”比;   & lt;视图类=白蟆钡脑谘菰?& lt;/view>   & lt;视图类=罢贰钡淖4?   & lt;块wx:=" {{item.casts}}”在{{item.name}} & lt;/block>   & lt;/view>   & lt;/view>   & lt;视图类=癴enlei”比;   分类:{{item.genres}}   & lt;/view>   & lt;视图类=澳辍痹?   上映时间:{{item.year}}   & lt;/view>   & lt;/view>      & lt;/view>      之前      

然后是hotPage.js页面:

        var;   var页面=0;//more.js   页面({/* *   *页面的初始数据   */数据:{   电影:[]   },/* *   *生命周期函数——监听页面加载   */alt="微信小程序之电影影评小程序制作代码">

  

然后是hotPage.wxss:

        {形象   宽度:350 rpx;   身高:280 rpx;   }   之前      

接着是第二个页面的布局和第一个页面一样,所以直接把第一个页面hotPage。wxml代码复制过来就好了,
  同样comingSoon.js代码和hotPage。js代码也差不多,唯一需要改动的地方只有一个:
  

  

微信小程序之电影影评小程序制作代码

  

url和数据改一下就好了
  

  

.wxss代码一致。

  

运行结果如下:
  

  

微信小程序之电影影评小程序制作代码

  

接着是第三个页面的代码:
  

  

search.wxml页面代码:

        & lt;输入占位符="输入关键字“bindinput=" myInput "/比;   & lt;按钮bindtap=" mySearch "祝辞搜索& lt;/button>      & lt;视图类=暗缬啊钡奶炱?="{{电影}}" id="{{项目。id}} jumpTomore“bindtap=比;      & lt;视图类=澳0濉北?   & lt;图像src=" https://www.yisu.com/zixun/{{item.images.medium}}”祝辞& lt;/image>   & lt;/view>   & lt;视图类=癿oveInfo”比;   & lt;视图类=氨晏狻北?   名称:{{item.title}}   & lt;/view>   & lt;视图类=癲aoyan”比;   导演:{{item.directors (“0”) . name}}   & lt;/view>   & lt;视图类=皔anyuanlist”比;   & lt;视图类=白蟆钡脑谘菰?& lt;/view>   & lt;视图类=罢贰钡淖4?   & lt;块wx:=" {{item.casts}}”在{{item.name}} & lt;/block>   & lt;/view>   & lt;/view>   & lt;视图类=癴enlei”比;   分类:{{item.genres}}   & lt;/view>   & lt;视图类=澳辍痹?   上映时间:{{item.year}}   & lt;/view>   & lt;/view>      & lt;/view>      

微信小程序之电影影评小程序制作代码