本文实例为大家分享了微信小程序制作影评小程序的具体代码,供大家参考,具体内容如下
这是博主的项目包含的文件截图:
首先如图建立文件夹和页面页面
然后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>微信小程序之电影影评小程序制作代码