制作微信小程序实现豆瓣榜单的使用

墨蓝 2023-07-06 06:29 5阅读 0赞

这是界面设计：  
app.josn:

{ 
      "pages": [ "pages/hello/hello", "pages/logs/logs", "pages/index/index" ], "window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "豆瓣电影",
        "navigationBarTextStyle": "white"
      }, "tabBar": { 
      "list": [
        { 
          "pagePath": "pages/hello/hello",
          "text": "榜单",
          "iconPath": "/images/002.jpg",
          "selectedIconPath": "/images/002.jpg"
        },
        { 
          "pagePath": "pages/logs/logs",
          "text": "日志",
          "iconPath": "/images/002.jpg",
          "selectedIconPath": "/images/002.jpg"
        },
        { 
          "pagePath": "pages/index/index",
          "text": "个人",
          "iconPath": "/images/002.jpg",
          "selectedIconPath": "/images/002.jpg"
        }
      ]
    },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

榜单界面的实现：  
js:

// pages/hello/hello.js Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        movie:[]
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        //this代表微信小程序page对象,在回调函数中，this不代表配置对象 this.setData({ 
          movie:[{ },{ }]
        })
        var that = this;//声明一个对象（that）指向page对象 wx.request({ 
          url: 'http://douban.uieee.com/v2/movie/top250', //仅为示例，并非真实的接口地址 data: { 
            start: 0,
            count: 100
          }, header: { 
            'content-type': 'application/xml' // 默认值
          }, success(res) { 
            console.log(res); that.setData({ 
              movie:res.data.subjects
            })
          }
        })
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

wxml:

<view class="movie" wx:for="{ { movie}}"> <view class="left"> <image class="cover" src="{ { item.images.small}}"></image> </view> <view class="middle"> <view class="t1">{ { item.title}}</view> <view class="t2">{ { item.original_title}}</view> <view class="t3"> <text wx:for="{ { item.directors}}">{ { item.name}} </text> </view> </view> <view class="right"> <view class="right">{ { item.rating.average}}</view>
      </view>
    </view>

wxss:

/* pages/hello/hello.wxss */
    /*id选择器>class选择器>标签选择器*/
    .left{ 
       width: 100px;
      height: 100px;
    
      /**margin: auto;适合于图片**/
      justify-content: center;/**主轴方向的对齐方式**/
      align-items: center;/**侧轴方向的对齐方式**/
    }
    .movie
    { 
      display: flex;/**设置movie为弹性盒子**/
    }
    /**主轴：默认是水平方向 侧轴：跟主轴垂直的方向**/
    /*id*/
    .middle{ 
      width: calc(100% - 160px);/*减去左右值的和*/
      height: 100px;
      line-height: 32px;
      white-space: nowrap;/*不换行*/
      overflow:hidden;/*溢出部分不显示*/
      text-overflow: ellipsis;/*省略号*/
    }
    .right{ 
      width: 60px;
      height: 100px;
      color: red;
      font-weight: bold;
      text-align: center;
      line-height: 100px;/*行高*/
    }
    .cover{ 
      width: 80px;
      height: 80px;
      margin-top: 10px;
      margin-left: 10px;
    }
    .t1{ 
      font-size: 16px;/*默认16像素*/
      font-weight: bold;
    }
    .t2{ 
      font-size: 10px;/*默认16像素*/
      color: #ccc;
    }
    .t3{ 
      font-size: 14px;/*默认16像素*/
    
    }

下面是效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 2]  
由于时间和技术问题，跟随老师学习到的知识有限，只能实现这些功能，跳转的小图案也是拍的高数课本，后续有时间的话会继续更新的，敬请期待。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200217001605414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200217001624349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200217001647427.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyMDc4OA==,size_16,color_FFFFFF,t_70