1. Toy模板网首页
  2. > Toy博客

微信小程序——豆瓣电影（一）

5月前 作者：z_11 分类：Toy博客 阅读(51) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序——豆瓣电影（一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.前期准备

小程序 (qq.com)

（1）下载软件

微信开发者工具下载地址与更新日志 | 微信开放文档

（2）注册账号

小程序

（3） 创建项目

微信小程序电影,微信小程序,微信小程序,前端

（4） 软件介绍

  • 功能键
    模拟器、编译器、调试器、编译预览，清缓存
  • 文件名
    papges（页面）：四个文件（.wxml（各种组件结构），js，json，wxss（样式））
    app.js：各种行为
    app.wxss：样式
    app.json：数据&&全局配置
    project.config.json：项目地址文件
    utils（工具）

2.主页面静态页面的搭建

设计首页布局

（1）代码

  • app.json
    设置导航条

      "window":{
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#99CC99",
        "navigationBarTitleText": "Welcome",
        "navigationBarTextStyle": "black"
    },

  • index.wxml
    设置结构

    <!--index.wxml-->
<view class="indexContainer">
  <image class="avatar" src='/images/image/豆.webp'></image>
  <text class="userName">hello!</text>
  <view class='canInto'>
    <text>欢迎进入豆瓣系统！</text>
  </view>
</view>

  • index.wxss
    设置样式

    /**index.wxss**/
page{/*给页面设置底色*/
  height: 100%;
  background: #99CC99;
}
.indexContainer{/*整体布局*/
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar{/*头像*/
  width: 200rpx;
  height:200rpx;
  border-radius: 100rpx;
  margin: 100rpx 0;
}
.userName{/*文字*/
  font-size: 50rpx;
}
.canInto{/*点击*/
  font-size: 50rpx;
  border: 1px solid rgb(10, 10, 10);
}

（2）成果展示

微信小程序电影,微信小程序,微信小程序,前端

3.获取用户信息（未完成）

尝试使用了getUserInfo和getUserProfit两个接口，无法正常授权，微信名始终为微信用户，头像始终为灰色头像。
查询官方文档后才发现两个接口在2022年底停用。
目前只能通过用户手段输入信息与上传头像。

button{
  font-size: 32rpx;
  border: 1px solid #999;
  background: #99CC99;
}

<button open-type='getUserInfo'>获取用户登录信息</button>、

//获取用户登录信息
    wx.getUserInfo({
      success:(data)=>{
        console.log(data);
        //更新 data中的userInfo
        this.setData({
          userInfo:data.userInfo
        });
      },
      fail:()=>{
        console.log("获取用户数据失败");
      }
    })

微信小程序电影,微信小程序,微信小程序,前端

4. 页面跳转

wx.navigateTo:保留当前页面，跳转到应用内的某个页面，可以返回到原页面。
wx.redirectTo:关闭当前页面，跳转到应用内的某个页面，不可返回原页面

（1）代码

  • wxml

    <view catchtap="handleClick" class='canInto'>
    <text>欢迎进入豆瓣系统！</text>微信小程序电影,微信小程序,微信小程序,前端

  • js

      handleClick(){
    //点击跳转到list界面
    wx.navigateTo({
      url: '/pages/list/list',
    })
  }

（2）成果展示

微信小程序电影,微信小程序,微信小程序,前端

（3）注

navigateTo接口无法到tabbar 页面；当后期设计有涉及tabbar 页面的跳转时，需要使用接口wx.switchTab

5.轮转图

利用swiper组件，设计豆瓣首页图片的轮转

（1）代码

  • wxml

    <!--pages/list/list.wxml-->
<view>
  <swiper indicator-dots indicator-active-color="green">
    <swiper-item>
      <image src="/images/image/1（首轮）.webp"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/image/2（首轮）.webp"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/image/3（首轮）.webp"></image>
    </swiper-item>
  </swiper>
</view>

  • wxss

    /* pages/list/list.wxss */
swiper{
  width:100%;
  height:400rpx;
}

swiper image{
  width:100%;
  height:100%;
}

（2）成果展示

微信小程序电影,微信小程序,微信小程序,前端

（3）关于点击轮播图的跳转

以7为基础，区别：
target指向的是触发事件的元素
currentTarget指向的是捕获事件的元素

  • wxml

    <swiper catchtap="carouselToDetail" indicator-dots indicator-active-color="green">
    <swiper-item>
      <image data-index="0" src="/images/image/1（首轮）.webp"></image>
    </swiper-item>
    <swiper-item>
      <image data-index="1" src="/images/image/2（首轮）.webp"></image>
    </swiper-item>
    <swiper-item>
      <image data-index="2" src="/images/image/3（首轮）.webp"></image>
    </swiper-item>
  </swiper>

  • js

    //点击轮播图进行跳转
  carouselToDetail(event){ 
    let index=event.target.dataset.index;
    wx.navigateTo({
      url: '/pages/datail/detail?index='+index,
    })
  },

6.搭建影评区

利用template模块，设置一个基础模块。

（1）代码

  • wxml

    <!--pages/template/list-template.wxml-->
<template name='listTmp'>
  <view class='tmpContainer'> 
    <view class='avatar_date'>
      <image src='/images/avater/1.webp'></image>
      <text>may 10 2023</text>
    </view>
    <text class='title'>关于《八佰》</text>
    <image class='contentImg' src="/images/image/1（评）.webp"></image>
    <text class="content">天堂与地狱只隔一条河，阵地与坟墓同在一座桥，壮士与伶人只差一层皮，怂包与英雄同扛一面旗。南岸有不恨国亡的商女，北岸是壮士许国的男儿，那边有粉墨登场的关羽，这边是七进七出的赵云。四百壮士用血肉唤四万万民众觉醒，五十三米河岸当幕布为租界万国表演。硝烟后，白马尚在，旗帜未倒，英雄不老。</text>
    <view class='collection_love'>
      <image src="/images/icon/collect.png"></image>
      <text>100</text>
      <image src="/images/icon/love.png"></image>
      <text>78</text>
    </view>
  </view>
</template>

  • wxss

    /* pages/template/list-template.wxss */
.tmpContainer{
  display: flex;
  flex-direction: column;
}
.avatar_date{
  padding: 20rpx;
}
.avatar_date image{
  width:70rpx;
  height:70rpx;
  border-radius: 70rpx;
  vertical-align: base;
  margin-right: 10rpx;
  margin-top: 30rpx;
}
.avatar_data text{
  font-size: 36rpx;
}

.title{
  margin-left: 10rpx;
  font-size: 36rpx;
  font-weight: 700;
  margin: 10rpx;
}

.contentImg{
  width: 100%;
  height: 460rpx;
}

.content{
  font-size: 32rpx;
  text-indent: 32rpx;
}

.collection_love image{
  width: 32rpx;
  height: 32rpx;
  vertical-align: middle;
  margin-right: 10rpx;
}
.collection_love text{
  font-size: 28rpx;
  margin-right: 10rpx;
}

/* pages/list/list.wxss */
@import '/pages/template/list-template.wxss';

（2）成果展示

微信小程序电影,微信小程序,微信小程序,前端

7.页面渲染

利用之前设定的模块，将后台的数据通过遍历全部展现在页面中

（1）代码

  • 数据模拟

    let list_data = [
  {
    date: 'may 31 2022',
    title: '八佰',
    detail_img: '/images/image/1（评）.webp',
    avatar: '/images/avater/1.webp',
    author: '故乡一轮月',
    brief_content: '天堂与地狱只隔一条河，阵地与坟墓同在一座桥，壮士与伶人只差一层皮，怂包与英雄同扛一面旗。南岸有不恨国亡的商女，',
    detail_content:'略',
    detail_love_image1: '/images/icon/collect.png',
    detail_love_image2: '/images/icon/love.png',
    love_count: 108,
    attention_count: 77,
    postId: 0
  },
];
module.exports = {list_data};

  • wxml

    <!--pages/template/list-template.wxml-->
<template name='listTmp'>
  <view class='tmpContainer'> 
    <view class='avatar_date'>
      <image src='{{avatar}}'></image>
      <text>{{date}}</text>
    </view>
    <text class='title'>{{title}}</text>
    <image class='contentImg' src="{{detail_img}}"></image>
    <text class="content">{{detail_content}}</text>
    <view class='collection_love'>
      <image src="/images/icon/collect.png"></image>
      <text>{{love_count}}</text>
      <image src="/images/icon/love.png"></image>
      <text>{{attention_count}}</text>
    </view>
  </view>
</template>

<!--pages/list/list.wxml-->
<block wx:for="{{listArr}}" wx:key="{{index}}">
    <view>
      <template is='listTmp' data='{{...item}}'/>
    </view>
 </block>

  • js

    // pages/list/list.js
let datas=require('../../datas/list-data.js');
Page({
  data: {
    listArr:[]
  },
  onLoad(options) {
    this.setData({
      listArr:datas.list_data
    })
  },
})

（2）成果展示

微信小程序电影,微信小程序,微信小程序,前端

8.详情页动态页面展示

点击优质影评能够进入该影评，查看影评的主要内容，包括作者及其头像、发布日期、文章详情等等
利用数组下标来指定页面的跳转
同时还设置收藏、分享、转发等图标

（1）代码

  • wxml

    <!--pages/datail/detail.wxml-->
<view class="detailContainer">
  <image class="headImg" src="{{detailObj.detail_img}}"></image>
  <view class="avatar_date">
    <image src="{{detailObj.avatar}}"></image>
    <text>{{detailObj.author}}</text> 
    <text>发布于</text>
    <text>{{detailObj.date}}</text> 
  </view>
  <text class="title">{{detailObj.title}}</text>
  <view class="collection_share_container">
    <view class="collection_share">
      <image src="/images/icon/collection-anti.png"></image>
      <image src="/images/icon/share.png"></image>
    </view>
    <view class="line"></view>
  </view>
  <button>转发此文章</button>
  <text class="content">{{detailObj.detail_content}}</text>
</view>

<!--pages/list/list.wxml-->
<view catchtap="toDetail" data-index="{{index}}">
      <template is='listTmp' data='{{...item}}'/>
</view>

  • wxss

    /* pages/datail/detail.wxss */
.detailContainer{
  display: flex;
  flex-direction: column;
}
.headImg{
  width: 100%;
  height: 460rpx;
}
.avatar_date{
  padding: 10rpx;
}
.avatar_date image{
  width: 64rpx;
  height: 64rpx;
  border-radius: 64rpx;
  vertical-align: middle;
}
.avatar_date text{
  font-size: 32rpx;
  margin-left: 10rpx;
}
.title{
  font-size: 38rpx;
  font-weight: bold;
}
.collection_share_container{
  position: relative;
}
.collection_share{
  float: right;
  margin-right: 50rpx; 
}
.collection_share image{
  width: 90rpx;
  height: 90rpx;
  margin-right: 20rpx;
}
.line{
  width: 90%;
  height: 1rpx;
  background: #eee;
  position: absolute;
  top: 45rpx;
  left: 5%;
  z-index: -1;
}
.button{
  width: 280;
  height: 280;
}
.content{
  margin-top: 20rpx;
  font-size: 32rpx;
  text-indent: 32rpx;
}

  • js

    // pages/datail/detail.js
let datas=require('../../datas/list-data.js');
Page({
  data: {
    detailObj:{}
  },
  onLoad(options) {
    //获取参数值
    let index=options.index;
    //更新data中datailObj的状态值
    this.setData({
      detailObj:datas.list_data[index], 
    })
  },
})

// pages/list/list.js
Page({
  //点击跳转到datail详情页
  toDetail(event){
    console.log(event);
    //获取点击跳转对应的下标
    let index=event.currentTarget.dataset.index;
    wx.navigateTo({
      url: '/pages/datail/detail?index='+index,
    })   
  },
}）

（2）成果展示

微信小程序电影,微信小程序,微信小程序,前端文章来源地址https://www.toymoban.com/news/detail-775952.html

到了这里，关于微信小程序——豆瓣电影（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 电影票小程序插件 电影票CPS插件 电影票微信小程序插件

    聚推客联盟-电影票插件 一、插件介绍 该插件支持用户在线购买全国10000+影院电影票、用户享受8折起购票优惠，接入方享受 15% 左右（最高40%）的售票返现，返现由 聚推客联盟 结算。 二、添加插件 首先点击该页面上方 添加插件 三、引入代码 接入插件前，需要在贵司小程序

    2024年02月12日
    浏览(47)
  • 基于微信小程序电影院订票系统源码（微信小程序毕业设计）

    基于微信小程序电影院订票系统源码（微信小程序毕业设计）

    项目获取请看文章最底下官网 电影院订票系统是基于微信小程序端和网页后端，系统采用java编程语言，mysql数据库，idea开发工具，ssm框架开发，本系统分为用户和管理员两个角色，用户微信小程序端主要功能是可以登陆注册系统，查看电影推荐，电影分类，会员手册，在线

    2024年02月07日
    浏览(59)
  • （微信小程序毕业设计源码）基于微信小程序电影院订票系统源码

    （微信小程序毕业设计源码）基于微信小程序电影院订票系统源码

    项目获取请看文章最底下官网 电影院订票系统是基于微信小程序端和网页后端，系统采用java编程语言，mysql数据库，idea开发工具，ssm框架开发，本系统分为用户和管理员两个角色，用户微信小程序端主要功能是可以登陆注册系统，查看电影推荐，电影分类，会员手册，在线

    2024年02月16日
    浏览(67)

  • 微信小程序 | 基于ChatGPT实现电影推荐小程序

    2023年04月08日
    浏览(42)
  • 基于微信小程序的电影票务系统

    基于微信小程序的电影票务系统

    🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 基于微信小程序的电影票务系统,java项目。 eclipse和idea都能打开运行。 推荐环境配置：eclipse/idea jdk1.8 maven mysql 前端技术

    2024年04月13日
    浏览(34)
  • 微信小程序毕业设计作品成品（23）微信小程序影视电影播放系统设计与实现

    微信小程序毕业设计作品成品（23）微信小程序影视电影播放系统设计与实现

    博主介绍： 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程，免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(72)

  • 微信小程序实现一个电影信息查询的应用程序

    这个示例展示了一个电影信息查询应用程序，包括一个输入框和一个查询按钮，用于查询指定电影的详细信息。在下方显示了电影的海报、标题、评分、类型和简介。 到这里也就结束了，希望对您有所帮助。

    2024年02月03日
    浏览(47)

  • 微信小程序电影票订票小程序软件设计与实现

    摘 要 我们的生活水平正在不断的提高，然而提高的一个重要的侧面表现就是更加注重我们的娱乐生活。电影是我们都喜欢的一种娱乐方式，各式各样的电影给我们带来的喜悦也是大不相同的。带来快乐的同时也因为其复杂、繁琐的流程让电影爱好者们变得烦躁起来。信息技

    2024年02月10日
    浏览(45)
  • 基于SpringBoot+Vue+微信小程序的电影平台

    基于SpringBoot+Vue+微信小程序的电影平台

    ✌全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅 文末获取项目下载方式 🍅 一、项目背景介绍： 研究背景： 随着移动互联网的普及和用户对个性化

    2024年02月11日
    浏览(54)
  • 微信小程序电影票售票系统设计与实现

    微信小程序电影票售票系统设计与实现

    目的 ：本课题主要目标是设计并能够实现一个基于微信小程序电影院订票选座系统，前台用户使用小程序，后台管理使用基PHP+MySql的B/S架构；通过后台添加电影、场次，用户通过小程序登录，查看电影、订购电影票、选择座位。 意义 ：影院售票系统是计算机技术与影院管理

    2024年02月02日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包