wechat微信小程序panda我的界面(收藏电影、观看电影记录)

最新推荐文章于 2022-10-13 23:54:49 发布
最新推荐文章于 2022-10-13 23:54:49 发布
阅读量2.4k 收藏 20
点赞数 2
分类专栏： uniapp 文章标签： 微信 微信小程序 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61504367/article/details/125534839
版权

运行结果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

电影历史记录

每当用户浏览电影，会把这个电影信息存入数据缓存。在我的界面点击“看过的电影”进入该界面。在页面加载时，从缓存里面读取movieHistory的数据，并储存在shouList中，完成对数据的渲染。

当用户点击删除记录，系统会会的这个电影的id，根据id把这个电影从展示列表中移除，并重新覆盖原来的缓存movieHistory。同时在onload监听页面加载，重新获取新的movieHistory。
在这里插入图片描述
在这里插入图片描述

wxml


<view class="ShouList">
    <view class="collection" wx:for="{{shouList}}" wx:key="index">
    <!-- 上图片 -->
    <view class="collection_img" id="{{item.id}}" bindtap="loadMovieDetail">
        <image  src="http://127.0.0.1:8181/{{item.moviePoster}}" ></image>
    </view>
    <view class="canceS" data-id="{{item.id}}" bindtap="cance">删除记录</view>
    <!-- 下影名 -->
    <view class="collection_name">{{item.name}}</view>
</view>
</view>

wxss

/* pages/collection/collection.wxss */
.ShouList{
    display: flex;
    flex-wrap: wrap;
}
.collection{
    width: 33%;
    margin-left: 0.3%;
    margin-top: 10px;
    position: relative;
}
.collection .collection_img{
    width: 100%;
    height: 150px;
    display: flex;
    margin: auto;
}
.collection .collection_img image{
    width: 100%;
    height: 100%;
}
.collection .canceS{
    position: absolute;
    margin: auto;
    width: 100%;
    color: white;
    height: 25px;
    line-height: 25px;
    bottom: 30px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
}
.collection .collection_name{
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

js

// pages/collection/collection.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        shouList:[]
    },
    // 删除记录
    cance(e){
        var index=e.currentTarget.dataset.id
        var list=this.data.shouList
        for(var i in list){
            if (list[i].id==index) {
                list.splice(i,1)
            }
        }
        this.setData({
            shouList:list
        })
        wx.setStorageSync('movieHistory', list)
        list.splice(index,1)
        wx.showToast({
            title: '取消成功',
            icon:'success',
            duration:1000 //持续世间
        })
        if(wx.getStorageSync('movieHistory').length==0){
            wx.removeStorageSync('movieHistory')
        }
        // console.log(index)
    },


    loadMovieDetail: function (e) {
        console.log(e);
    
        // 首先判断一下是否登录
        // 如果没有登录(判断token)
        var token = wx.getStorageSync("token");
        if (token.length == 0) {
          // 未登录，跳转界面
          wx.navigateTo({
            url: '../login/login'
          })
          // console.log("1111111111111null")
        } else {
          // 已登录
          var id = e.currentTarget.id;
          console.log(id)
          wx.navigateTo({
            //  进行页面的跳转
            url: '../movieDetail/movieDetail?id=' + id
          })
        }
      },


    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var list=wx.getStorageSync('movieHistory')
        this.setData({
            shouList:list
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

收藏电影

用户在浏览电影时，可对电影进行收藏，并将其数据存入缓存中movieCollect，覆盖原来的值。用户也可取消收藏，根据电影id移除这个电影的信息，重新把数据写入缓存movieCollect。

用户在我的界面点击“收藏电影“，会进行判断如果是未登录状态，则跳转到登录界面。如果已经登录，则显示收藏电影的信息。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

wxml


<view class="ShouList">
    <view class="collection" wx:for="{{shouList}}" wx:key="index">
    <!-- 上图片 -->
    <view class="collection_img" id="{{item.id}}" bindtap="loadMovieDetail">
        <image  src="http://127.0.0.1:8181/{{item.moviePoster}}" ></image>
    </view>
    <view class="canceS" data-id="{{item.id}}" bindtap="cance">取消收藏</view>
    <!-- 下影名 -->
    <view class="collection_name">{{item.name}}</view>
</view>
</view>

wxss

/* pages/collection/collection.wxss */
.ShouList{
    display: flex;
    flex-wrap: wrap;
}
.collection{
    width: 33%;
    margin-left: 0.3%;
    margin-top: 10px;
    position: relative;
}
.collection .collection_img{
    width: 100%;
    height: 150px;
    display: flex;
    margin: auto;
}
.collection .collection_img image{
    width: 100%;
    height: 100%;
}
.collection .canceS{
    position: absolute;
    margin: auto;
    width: 100%;
    color: white;
    height: 25px;
    line-height: 25px;
    bottom: 30px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
}
.collection .collection_name{
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

js


// pages/collection/collection.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        shouList:[]
    },
    // 取消收藏
    cance(e){
        var index=e.currentTarget.dataset.id
        var list=this.data.shouList
        for(var i in list){
            if (list[i].id==index) {
                list.splice(i,1)
            }
        }
        this.setData({
            shouList:list
        })
        wx.setStorageSync('movieCollect', list)
        list.splice(index,1)
        wx.showToast({
            title: '取消成功',
            icon:'success',
            duration:1000 //持续世间
        })
        if(wx.getStorageSync('movieCollect').length==0){
            wx.removeStorageSync('movieCollect')
        }
        // console.log(index)
    },


    loadMovieDetail: function (e) {
        console.log(e);
    
        // 首先判断一下是否登录
        // 如果没有登录(判断token)
        var token = wx.getStorageSync("token");
        if (token.length == 0) {
          // 未登录，跳转界面
          wx.navigateTo({
            url: '../login/login'
          })
          // console.log("1111111111111null")
        } else {
          // 已登录
          var id = e.currentTarget.id;
          console.log(id)
          wx.navigateTo({
            //  进行页面的跳转
            url: '../movieDetail/movieDetail?id=' + id
          })
        }
      },


    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var list=wx.getStorageSync('movieCollect')
        this.setData({
            shouList:list
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})
汪程序猿
关注
专栏目录
微信小程序-电影首页界面
m0_65769258的博客
02-23 1873
//film.wxml <swiper indicator-dots="{{true}}" indicator-active-color="red" indicator-color="{{raga(1,2,3,0.4)}}" autoplay="{true}}" circular="{{true}}" interval="{{2000}}" duration="{{500}}"> <swiper-item wx:for="{{listSwiper}}" wx:key="
微信小程序云开发修改并更新数据库数据
热门推荐
qq_45164496的博客
06-08 1万+
1
微信小程序导航组件——电影界面
daisy211988的博客
07-26 1448
【微信小程序代码】微信小程序导航组件——电影界面。
微信小程序我的界面
weixin_30378623的博客
12-23 9200
前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigat...
电影推荐的一个微信小程序
10-04
微信小程序电影推荐功能，可供学习使用，学习小程序的朋友可以下载哈。
wechat微信小程序panda电影详情(播放电影,电影信息,发送弹幕,收藏电影)
汪程序员
06-27 2190
下面是整体界面： 弹幕展示： 收藏： 这里使用的后端地址，进行拼接
抽奖盒子微信小程序源码
05-15
抽奖盒子微信小程序源码是开发微信小程序的一种应用模板，它为用户提供了一个有趣且吸引人的抽奖互动功能，常用于各类营销活动或娱乐场景。这个源码包含了一整套完整的小程序前端代码和可能的后端接口定义，使得...
基于微信小程序开发的个人线上手账本.rar
11-26
《基于微信小程序开发的个人线上手账本》项目是一次将传统手账体验与现代数字化技术结合的尝试，旨在提供一个便捷、个性化的线上记录工具。这个项目涉及到多个IT领域的知识，包括微信小程序开发、前端设计、数据管理...
小程序版websocket聊天室。从服务器到小程序客户端配置基本教程.zip
最新发布
09-30
- 创建一个新的小程序项目，设置好项目名称（如"Panda Chat Room"）和AppID，选择合适的模板或从头开始编写代码。 3. WebSocket在小程序中的使用： - 小程序提供了`wx.connectSocket()`方法来初始化WebSocket连接...
h5支付不能打开支付宝 ios_iOS 解决微信h5支付，支付宝h5支付无法直接返回APP的问题...
weixin_39955355的博客
12-18 1491
由于公司的业务需要，为了节省申请开通微信支付的时间和人力，公司决定使用微信h5支付。这样即节省了时间，同时以后所有的APP都能使用h5支付，既方便又快捷。但是真正做的时候问题来了，当你支付成功之后或者是取消支付的时候会跳转到Safari浏览器，这就很尴尬了，完全无用户体验啊。当时看着Android可以直接返回到APP，心里瞬间不爽了。开始埋怨苹果公司了，但是由于公司的业务必须要做h5，没办法开始找...
微信小程序电影推荐demo完整源码
02-01
微信小程序demo,最近小程序比较火，大家可以参考下，仅供学习！
用微信小程序开发电影App
08-10
用微信小程序开发电影App
微信小程序开发阅读&电影小程序之（1）——欢迎页面源码
01-03
微信小程序开发阅读&电影小程序之（1）——欢迎页面源码 原文地址：http://blog.csdn.net/SundayAaron/article/details/53993106
微信小程序电影列表（一）
qd888886的博客
04-28 4171
} .more{ float: right; } .more-text{ vertical-align: middle; margin-right: 10rpx; color: #1f4ba5; } .more-img{ width: 9rpx; height: 16rpx; vertical-align: middle; } .movies-container{ display: flex; flex-direction: row; } 编写电影界面整体样式 movies.wxss @impor
图解微信小程序---获取电影信息
菜鸟-传奇
10-09 1697
图解微信小程序---获取电影信息 代码笔记 第一步：编写js文件，调用api获取相对应电影详情信息（注意带入的参数是id不在是榜单的type，电影api的movie后面又斜杠，别忘了，对应的绑定数据的时候别绑定错误） 第二步：根据获取的数据编写前端页面的数据接收（注意数据名称获取的时候别弄错了） 第三步：编写样式表，使我们的前端页面数据显示的更加美观 （注意图片参数可调）...
微信小程序电影模板
程序员哆啦A梦，蓝胖子
08-06 3584
[外链图片转存失败(img-STw401rR-1565101469846)(https://upload-images.jianshu.io/upload_images/11158618-52efd0adc4d95b06.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)] [外链图片转存失败(img-u4QekWfY-15651014698...
微信小程序入门与实战(8)——使用嵌套自定义组件创建电影页面
leeeeeena's blog
10-18 783
components/movie/index index.wxml <!--components/moive/index.wxml--> <view class="container"> <image class="poster" src="/img/iqiyi.png"></image> <text class="title">盗梦空间</text> <view class="rate-container".
微信小程序入门与实战之电影页面与实战自定义组件
Lbsssss的博客
10-13 1730
在自定义组件中使用一些样式会没有效果，所以要要用外部样式类代替。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪程序猿

就当请我吃顿饭

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值