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

港控/mmm° 2022-06-10 01:15 412阅读 0赞

# [微信小程序][Link 1]电影影评小程序开发步骤： #

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

[![080543wjqqfpvyskkabvi7.png][]][080543wjqqfpvyskkabvi7.png]

首先如图建立文件夹和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;
    }

页面显示如图：

[![080543irarkpzcpp90nz9k.png][]][080543irarkpzcpp90nz9k.png]

然后是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>
        <view class="yanyuanlist">
          <view class="left">演员:</view>
          <view class="right">
            <block wx:for="{
        {item.casts}}">{
        {item.name}} </block>
          </view>
        </view>
        <view class="fenlei">
          分类:{
        {item.genres}}
        </view>
        <view class="year">
          上映时间:{
        {item.year}}
        </view>
      </view>
    
    </view>

然后是hotPage.[js][]页面：

var that;
    var page = 0;
    // more.js
    Page({
    
      /**
       * 页面的初始数据
       */
      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);
      }
    })

运行程序结果如图：

[![080544u1hvhf1zg1r1zkkm.png][]][080544u1hvhf1zg1r1zkkm.png]

然后是hotPage.wxss:

image{
      width:350rpx;
      height:280rpx;
    }

接着是第二个页面的布局和第一个页面一样，所以直接把第一个页面hotPage.wxml代码copy过来就好了；  
同样comingSoon.js代码和hotPage.js代码也差不多，唯一需要改动的地方只有一个：  
[![080544c85acmrc078r8crw.png][]][080544c85acmrc078r8crw.png]

url和data改一下就好了  
.wxss代码一致;

运行结果如下：

[![080544zqwgj1iqsijqq31o.png][]][080544zqwgj1iqsijqq31o.png]

接着是第三个页面的代码：  
search.wxml页面代码：

<input placeholder="输入关键字" bindinput="myInput" />
    <button bindtap="mySearch">搜索</button>
    
    <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>
        <view class="yanyuanlist">
          <view class="left">演员:</view>
          <view class="right">
            <block wx:for="{
        {item.casts}}">{
        {item.name}} </block>
          </view>
        </view>
        <view class="fenlei">
          分类:{
        {item.genres}}
        </view>
        <view class="year">
          上映时间:{
        {item.year}}
        </view>
      </view>
    
    </view>

search.js页面代码：

var input;
    var that;
    // search.js
    Page({
    
      /**
       * 页面的初始数据
       */
      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
            })
          }
        })
      }
    
    
    })

search.wxss代码同hotPage.wxss代码一致；

运行代码结果如下：

[![080545gjv2h6jw7bb2j9th.png][]][080545gjv2h6jw7bb2j9th.png]

最后是详情页面，点击影片后会跳转到详情页面获得影片的详细信息：  
more.wxml页面代码：

<image src="{
        {imageUrl}}"></image>
    <view class="moveInfo">
      <view class="title">名字:{
        {title}}</view>
      <view class="director">导演:{
        {director}}</view>
      <view class="castleft">主演:</view>
      <view class="casts" wx:for="{
        {casts}}">
        <block class="castright">{
        {item.name}}</block>
      </view>
      <view class="year">年份:{
        {year}}</view>
      <view class="rate">评分:{
        {rate}}</view>
      <view class="summary">介绍:{
        {summary}}</view>
    </view>

more.js代码：

var that;
    // more.js
    Page({
    
      /**
       * 页面的初始数据
       */
      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
            })
          }
        })
      }
    
    })

运行代码结果如下：

[![080545pwpehidhahhhhuhi.png][]][080545pwpehidhahhhhuhi.png]

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

[Link 1]: http://9.cn/
[080543wjqqfpvyskkabvi7.png]: /images/20220610/f68d5a19ef3840769850b1961adcec34.png
[080543irarkpzcpp90nz9k.png]: /images/20220610/27c43a10def0465e84cd392cdfaadf80.png
[js]: http://lib.csdn.net/base/javascript
[080544u1hvhf1zg1r1zkkm.png]: /images/20220610/4a7b5f4437bd4469afbca2b6a2a72f8a.png
[080544c85acmrc078r8crw.png]: /images/20220610/4080189172c64eaa8e6c52e446b49cef.png
[080544zqwgj1iqsijqq31o.png]: /images/20220610/f1c5f0f1328f4552a61673da7e33e3b9.png
[080545gjv2h6jw7bb2j9th.png]: /images/20220610/0d633fab1552464ba529ec589daa6707.png
[080545pwpehidhahhhhuhi.png]: /images/20220610/790fb15d2dab42a883b66d00fb2eac58.png