介绍 {
,“pages":,
,“页面/hotPage/hotPage"
,“页面/comingSoon/comingSoon"
,“页面/搜索/search"
,“页面/多/more"
,),
,“window": {
,“backgroundTextStyle":,“light"
,“navigationBarBackgroundColor":“# fff",
,“navigationBarTitleText":,“WeChat"
,“navigationBarTextStyle":“black"
},
,“tabBar": {
,“list": [{
,“pagePath":“页面/hotPage/hotPage"
,“text":“本地热映,
},{
,“pagePath":“页面/comingSoon/comingSoon"
,“text":“即将上映“;
},{
,“pagePath":“页面/搜索/search"
,“text":“影片搜索“;
,}]
,}
} /* * app.wxss * */.container {
,高度:100%;
,显示:flex;
,flex-direction:列;
,对齐项目:中心;
,justify-content:之间的空间;
,填充:200 rpx 0;
,box-sizing: border-box;
},/*,hotPage.wxss */.movies {
,显示:flex;
}
.myimage {
,flex: 1;
}
.moveInfo {
,flex: 2;
}
.yanyuanlist {
,显示:flex;
}
.left {
,flex: 1;
}
铃声{
,flex: 2;
} & lt; view 类=癿ovies",天气:为=皗{电影}}“,id=皗{item.id}}“, bindtap=癹umpTomore"比;
,& lt; view 类=癿yimage"比;
https://www.yisu.com/zixun/, & lt; image src=" {{item.images.medium}} ">
<视图类=" moveInfo ">
<视图类="标题">
名称:{{item.title}}
<视图类=" daoyan ">
导演:{{item.directors (“0”) . name}}
<视图类=" yanyuanlist ">
<视图类=白蟆?演员:
<视图类=罢贰?
<块wx:=" {{item.casts}} "> {{item.name}}
<视图类=" fenlei ">
分类:{{item.genres}}
<视图类="年">
上映时间:{{item.year}}
var ;
var page =, 0;//more.js
页面({/* *
,*页面的初始数据
,*/,数据:{
,电影:[]
},/* *
,*生命周期函数——监听页面加载
,*/,onLoad: function (选项),{=,that ;
,that.linkNet (0);
},
,jumpTomore: function (e), {
,console.log (e.currentTarget.id);
,wx.navigateTo ({
,url: & # 39;/页面//更多? id=& # 39;, +, e.currentTarget.id,
,})
},
,linkNet: function (页面),{
,wx.request ({
,头:{
,“Content-Type":“json"
},
,url: & # 39; https://api.douban.com/v2/movie/in_theaters& # 39;
,数据:{
,开始:10,*,页面,
,数:10
,城市:& # 39;成都& # 39;
},
,成功:function (e), {
,console.log (e);
,if (e.data.subjects.length ==, 0), {
,wx.showToast ({
标题:大敌;& # 39;没有更多数据& # 39;,
,})
,}else {
,that.setData ({
,电影:that.data.movies.concat (e.data.subjects)
,})
,}
,}
,})
},
,onReachBottom: function (), {
页面,that.linkNet (+ +);
,}
}) {形象
,宽度:350 rpx;
,身高:280 rpx;
}
这篇文章将为大家详细讲解有关微信小程序如何实现电影影评功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
微信小程序制作影评小程序的具体代码:
这是博主的项目包含的文件截图:
首先如图建立文件夹和页面页面
然后应用。json页面更新代码如下:
是应用。wxs页面(为后面的页面样式写的):
页面显示如图:
然后是hotPage。wxml页面:
然后是hotPage。js页面:
运行程序结果如图:
然后是hotPage。wxs:
接着是第二个页面的布局和第一个页面一样,所以直接把第一个页面hotPage。wxml代码复制过来就好了,
同样comingSoon.js代码和hotPage。js代码也差不多,唯一需要改动的地方只有一个:
