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

前端之家收集整理的这篇文章主要介绍了微信小程序之电影影评小程序制作代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

这里写图片描述

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

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

搜索" }] } }

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

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="myimage">
<image src="{{item.images.medium}}">

名称:{{item.title}} 分类:{{item.genres}}

然后是hotPage.js页面

/**

  • 页面的初始数据
    */
    data: {
    movies: []
    },/**
  • 生命周期函数--监听页面加载
    /
    onLoad: function (options) {
    that = this;
    that.linkNet(0);
    },jumpTomore: function (e) {
    console.log(e.currentTarget.id);
    wx.navigateTo({
    url: '/pages/more/more?id=' + e.currentTarget.id,})
    },linkNet: function (page) {
    wx.request({
    header: {
    "Content-Type": "json"
    },url: 'https://api.douban.com/v2/movie/in_theaters',data: {
    start: 10
    page,count: 10,city: '成都'
    },success: function (e) {
    console.log(e);
    if (e.data.subjects.length == 0) {
    wx.showToast({
    title: '没有更多数据',})
    } else {
    that.setData({
    movies: that.data.movies.concat(e.data.subjects)
    })
    }
    }
    })
    },onReachBottom: function () {
    that.linkNet(++page);
    }
    })

运行程序结果如图:

然后是hotPage.wxss:

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

这里写图片描述

url和data改一下就好了

.wxss代码一致;

运行结果如下:

接着是第三个页面代码

search.wxml页面代码

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

<view class="myimage">
<image src="{{item.images.medium}}">

名称:{{item.title}} 分类:{{item.genres}}

页面代码

/**

  • 页面的初始数据
    */
    data: {
    movies: []
    },/**
  • 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    that = this;
    },myInput: function (e) {
    input = e.detail.value;
    },mySearch: function () {
    wx.request({
    header: {
    "Content-Type": "json"
    },url: 'https://api.douban.com/v2/movie/search?q=' + input,success: function (e) {
    that.setData({
    movies: e.data.subjects
    })
    }
    })
    }

})

.wxss代码同hotPage.wxss代码一致;

运行代码结果如下:

这里写图片描述

最后是详情页面,点击影片后会跳转到详情页面获得影片的详细信息:

more.wxml页面代码

more.js代码

/**

  • 页面的初始数据
    */
    data: {
    title: 0,imageUrl: 0,director: 0,casts: [],year: 0,rate: 0,summary: 0
    },/**
  • 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    that = this;
    wx.request({
    header: {
    "Content-Type": "json"
    },url: 'https://api.douban.com/v2/movie/subject/' + options.id,success: function (e) {
    console.log(e)
    that.setData({
    title: e.data.original_title,imageUrl: e.data.images.large,director: e.data.directors["0"].name,casts: e.data.casts,year: e.data.year,rate: e.data.rating.average,summary: e.data.summary
    })
    }
    })
    }

})

运行代码结果如下:

好了、全部代码如上都给出了..加油

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/weapp/37403.html

猜你在找的微信小程序相关文章