【微信小程序从入门到精通(项目实战)】——微电影小程序

在这里插入图片描述


👨‍💻个人主页:@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏:微信小程序开发

🅰

请添加图片描述


文章目录

    • 🅰
    • 前言
    • 🎶==一、==创建页面
    • 🎶==二、== 页面配置与布局
    • 🎶==三、== wx:key的使用
    • 🎶==四、==添加页面视图
        • 结束语🥇


前言

本项目是一个微电影的介绍页面,首页是”电影周周看“,在底部导航栏用于切换跳转。如图所示:每一周推荐页是关于电影的详细资料,采用轮播图效果实现。


🎶一、创建页面


(1)建立项目
在微信小程序开发者工具中新建一个空的项目,创建后,新建app.js文件,文件內容为空即可:
新建app.json文件,编写代码即可:

{
  "pages": [
    "pages/about/about",
    "pages/weekly/weekly"
    ]
        }

保存上述代码后,开发者工具后自动创建about页(首页)、weekly页(推荐页)相关文件。
(2)页面组件
本项目所需要的素材包括图片、图标等文件统一放在项目根目录下的/images目录中。
about页的本项目的首页,是运行时打开的第一个界面,界面需简洁美观所以本案例文本和文件的组件,则在/pages/about/about.wxml的文件中编写如下代码:

<image src="/pages/about/OIP-B.jpg" class="about-banner"></image>

<text style="font-weight: bold; font-size: 60rpx;">电影周周看</text>
<text>我每张推荐一部好电影</text>
<text>我的微博:weibo.com/simbasong</text>
</view>
<view>
<text>我</text><navigator style="display: inline;" url="/pages/weekly/weekly" hover-class="nav-hover" class="nav-defalut">每周推荐</navigator><text>一部好片</text>

weekly页是显示每周电影的详情,本案例只放电影图片,电影名称,电影点评,是否强烈推荐文本组件则在/pages/weekly/weekly.wxml的文件中编写如下代码:

<image src="/pages/weekly/xhr.jpeg"></image>
<text>电影周周看</text>
<text>第一周:小黄人</text>
<text>点评:它是一个非常好看的电影</text>

当然若要浏览weekly页的内容,这时需要在app.json文件把weekly页放在首位才行。


🎶二、 页面配置与布局


(1)顶部导航栏配置
小程序导航栏,一般在app.json种全局设置,这样每个页面的顶部导航栏都一样(除非在页面中重新设置)。在本案例中我们不需要一样的导航栏,所以我们单独在页面中设置。
①about页的设置,在/pages/about/about.json的文件中编码如下代码:

{
  "usingComponents": {},
  "navigationBarTitleText": "关于",
  "navigationBarTextStyle": "black",
  "navigationBarBackgroundColor": "#fff"
}


②weekly页面的设置,在/pages/weekly/weekly.json的文件中编写的代码:

{
  "usingComponents": {},
  "navigationBarTitleText": "每日推荐"
}

(2)about页面布局
单独为 组件设置样式,具体代码如下:

<text style="font-weight: bold; font-size: 60rpx;">电影周周看</text>
<text>我每张推荐一部好电影</text>
<text>我的微博:weibo.com/simbasong</text>

在上述代码中文本”电影周周看“单独用style="font-weight: bold; font-size: 60rpx;"表示字体加粗,大小为60px。

用弹性盒子flex属性重新编写/pages/about/about.wxss文件中的代码,具体如下:

.container{
  background-color: #eee;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
 
}

这种布局可以统一属性,布局灵活。、
接下来我们对图片进行设置,我们不需要图片的完整的显示,只需要显示图片的宽高为屏幕的一半。我们先在/pages/about/about.wxml文件中的< image >添加样式规则:class=“about-banner”,然后再/pages/about/about.wxss文件中的增加样式设置,具体的代码如下:

.about-banner{
width: 375rpx;
height: 375rpx;
border-radius: 50%;
}

(3)weekly页布局
我们要求weekly页也要采用about页样式规则,则在/pages/weekly/weekly.wxss的文件中添加about页面一样的样式规则,具体代码如下:

<image src="/pages/weekly/xhr.jpeg"></image>
<text>电影周周看</text>
<text>第一周:小黄人</text>
<text>点评:它是一个非常好看的电影</text>

接下来about.wxss的样式定义:.container的代码移到app.wxss文件中来定义,实现了weekly页面的样式规则与about页统一定义,具体代码如下:

.container{
  background-color: #eee;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
 
}

🎶三、 wx:key的使用


为了实现从about页面跳转到weekly页的页面之间的链接的点击效果,我们用最简单的方法:用navigator组件实现文本之间的页面跳转。假设我们点击的文本”每周推荐“跳转到weekly,则在about.wxml文件中添加如下代码:

<text>我</text><navigator style="display: inline;" url="/pages/weekly/weekly" hover->每周推荐</navigator><text>一部好片</text>
</view>

接下来我们实现链接文本定义颜色,则上面的代码添加点击颜色和默认颜色,具体的代码如下

<view>
<text>我</text><navigator style="display: inline;" url="/pages/weekly/weekly" hover-class="nav-hover" class="nav-defalut">每周推荐</navigator><text>一部好片</text>
</view>

接下来about.wxss文件中给点击颜色为红色默认颜色为蓝色的样式定义,具体的代码如下:

.nav-hover{
color: blue;
}
.nav-defalut
{
color:red;
}

很多时候,对于about页、weekly页一样的一级页面,我们希望他们能够任意的进行切换,我们可以通过在顶部或底部添加标签栏tabBar来实现。本案例采用的是底部标签tabBar来实现。
假如配置icon图已经添加在/images/icon目录中,全局配置app.json文件中添加标签栏tabBar的实现代码具体如下:

"tabBar": {
    "list": [
      {
        "text": "每日推荐",
        "pagePath": "pages/about/about",
        "iconPath": "/pages/images/home-icon-svg-4.png",
      "selectedIconPath": "/pages/images/home-icon-svg-4.png"
        
      },{
      "pagePath": "pages/weekly/weekly",
      "text": "关于",
      
      "iconPath": "/pages/images/OIP1-C.jpg",
        "selectedIconPath": "/pages/images/OIP1-C.jpg"
    }],
    "color": "#000",
    "selectedColor": "#00f"
    },

🎶四、添加页面视图


在/pages/weekly/weekly.js页面添加如下代码:

data: {
weekMovieList:[
  {
    name:"小黄人",
    comment:"最精彩的电影",
    imagePath:"/pages/weekly/xhr.jpeg",
    isHighlyRecommended:false
  },{
    name:"泰坦尼克号",
    comment:"失去的才是永恒的",
    imagePath:"/pages/weekly/xhr.jpeg",
    isHighlyRecommended:false
  },{
    name:"这个杀手不太冷静",
    comment:"小萝莉与怪蜀的爱情故事",
    imagePath:"/pages/weekly/xhr.jpeg",
    isHighlyRecommended:false
  }
]
  },

把原来的/pages/weekly/weekly.wxml页面代码修改如下:

<view class="">
<swiper class="movie-swiper" indicator-dots="{{true}}">
<swiper-item class="movie" wx:for="{{weekMovieList}}" wx:key="{{item}}">
<view class="container movie-card">
<image class="movie-image" src="{{item.imagePath}}"></image>
<text>第{{index+1}}周:{{item.name}}</text>
<text>点评:{{item.comment}}</text>
<text wx:if="{{item.isHighlyRecommended}}" style="font-size: 40rpx;color: red;">强烈推荐</text>
</view>
</swiper-item>
</swiper>
</view>

上述采用条件渲染wx:if和列表渲染:wx:for来实现页面组件的定义。还采用了< swriper>组件来实现幻灯片轮播效果,每个电影都有一张幻灯片< swriper-item>。
在/pages/weekly/weely.wxss样式页面中添加各个组件样式规则,去实现代码如下:

.movie-swiper
{
height: 90vh;
}
.movie-card
{
height: 100%;
width: 100%;
}

保存代码后,运行程序,页面效果就会展示以下的效果:
在这里插入图片描述

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/554128.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Modelsim自动化仿真脚本(TCL)——简单实例

目录 1. Modelsim与TCL脚本的关系 2.实验文件 2.1设计文件 2.2仿真测试文件 2.3. 脚本文件 3. 实验步骤 3.1. 创建文件夹 3.2. 指定路径 3.3. 创建工程 3.4. 运行命令 3.4. 实验效果 1. Modelsim与TCL脚本的关系 TCL&#xff08;Tool Command Language&#xff09;是…

吴恩达深度学习笔记:深度学习的 实践层面 (Practical aspects of Deep Learning)1.4-1.5

目录 第一门课&#xff1a;第二门课 改善深层神经网络&#xff1a;超参数调试、正 则 化 以 及 优 化 (Improving Deep Neural Networks:Hyperparameter tuning, Regularization and Optimization)第一周&#xff1a;深度学习的 实践层面 (Practical aspects of Deep Learning)…

[C++][算法基础]分解质因数(试除法)

给定 n 个正整数 ai&#xff0c;将每个数分解质因数&#xff0c;并按照质因数从小到大的顺序输出每个质因数的底数和指数。 输入格式 第一行包含整数 n。 接下来 n 行&#xff0c;每行包含一个正整数 ai。 输出格式 对于每个正整数 ai&#xff0c;按照从小到大的顺序输出其…

同城O2O跑腿系统源码:外卖配送APP的技术架构与设计思路解析

今天&#xff0c;我将为大家详解同城O2O跑腿系统源码&#xff0c;剖析外卖配送APP的技术架构与设计思路。 一、用户端与商家端 用户端提供用户注册、登录、浏览菜单、下单、支付等功能&#xff0c;而商家端则负责商家入驻、菜单管理、订单处理等。这两个端的技术架构相对独立…

在Linux操作系统中文件目录特殊权限

管理员用户和普通用户都可以使用passwd命令来给用户设置密码 用户密码保存在/etc/shadow suid 4 sgid 2 sticky bit 1 suid&#xff08;只要是针对可执行文件进行设置。&#xff09; {当没有操作要求时&#xff0c;不可以擅自对shell&#xff0c;python脚本加上suid权…

java动态代理--cglib代理

1.概述 CGLIB动态代理是针对类实现代理&#xff08;无需实现接口&#xff09;&#xff0c;为了弥补jdk的不足&#xff0c; Cglib 不基于接口&#xff0c;是基于父子的继承关系&#xff08;被代理的对象是代理对象的父类&#xff09;&#xff0c;通过重写的形式扩展方法 2.定…

带头循环双向链表专题

1. 双向链表的结构 带头链表⾥的头节点&#xff0c;实际为“哨兵位”&#xff0c;哨兵位节点不存储任何有效元素&#xff0c;只是站在这⾥“放哨 的” “哨兵位”存在的意义&#xff1a; 遍历循环链表避免死循环。 2. 双向链表的实现 2.1双向链表结构 typedef int DataTyp…

【光伏科普】光伏软件都有些什么功能?

光伏软件是为满足光伏行业特定需求而设计的工具&#xff0c;它涵盖了多个方面的功能&#xff0c;以支持光伏系统的设计、分析、优化和运营。以下是光伏软件通常具备的一些核心功能&#xff1a; 1.光伏系统设计 组件布局优化&#xff1a;根据地理位置、光照条件、阴影遮挡等因素…

开源在线表单工具 HeyForm 使用教程

HeyForm 是一个非常出色的开源在线表单工具&#xff0c;可以通过直观的拖拽式编辑器&#xff0c;快速构建出美观实用的表单。 HeyForm 的功能非常丰富&#xff1a; 支持丰富的输入类型&#xff0c;从基础的文本、数字到高级的图片选择、日期选择、文件上传等&#xff0c;一应俱…

Java web第三次作业

springboot入门程序撰写并启动 2.使用postman练习参数的获取。 简单参数 复杂参数 数组参数 日期参数 json参数 路径参数 3、体会前端页面向后端发送数据的过程。并且自己尝试将之前的注册页面的信息发送到服务端。 &#xff08;1&#xff09;、product.html的操作代码&#…

后端返回的数据中含有Null的则不在前端展示

方式 1&#xff1a;application 上加配置 只需要在配置文件 上&#xff0c;增加 如下配置。 application 格式配置&#xff1a; spring.jackson.default-property-inclusionnon_null yml 格式配置&#xff1a; spring:jackson:default-property-inclusion: non_null注意&a…

数字逻辑课程实验环境配置与使用说明

文章目录 I.虚拟机搭建1.1 Vmware安装1.2 Win XP安装1.3 xftp7安装 I. Quartus II安装II. 使用说明2.1 新建工程2.2 在工程中加入代码2.3 代码编译波形仿真 I.虚拟机搭建 1.1 Vmware安装 Vmware17安装教程 1.2 Win XP安装 Win XP安装教程 1.3 xftp7安装 给虚拟机添加FTP …

【团体程序设计天梯赛 往年关键真题 详细分析完整AC代码】L2-009 抢红包(排序) L2-010 排座位 (dfs)

【团体程序设计天梯赛 往年关键真题 详细分析&完整AC代码】搞懂了赛场上拿下就稳 【团体程序设计天梯赛 往年关键真题 25分题合集 详细分析&完整AC代码】&#xff08;L2-001 - L2-024&#xff09;搞懂了赛场上拿下就稳了 【团体程序设计天梯赛 往年关键真题 25分题合…

MCU最小系统的电源模块设计和复位模块的设计

最小操作系统就是一个电路&#xff0c;这个电路里面必须要的东西&#xff08;如人需要喝水吃饭温度等情况&#xff0c;才能或者&#xff09; 现在我们要解决这三个问题 这里V开头的&#xff0c;都是电源管脚 这里解释一下&#xff1a; 这里要注意哪些是电路电压&#xff0c;哪…

盲人导航功能特点:革新出行体验的实时避障应用深度解析

作为一名资深记者&#xff0c;我有幸亲历并详尽报道一款专为盲人群体设计的导航应用叫做蝙蝠避障&#xff0c;它不仅提供了精准的路线指引&#xff0c;更创新性地融入了实时避障功能。这款应用凭借其盲人导航功能特点&#xff0c;正以前所未有的方式提升盲人的出行自由度与安全…

YOLOv9最新改进系列:YOLOv9改进加入新型高效的多尺度注意力(EMA)模块保留每个通道的信息并减少计算成本!助力v9检测性能遥遥领先!

YOLOv9最新改进系列&#xff1a;YOLOv9改进加入新型高效的多尺度注意力&#xff08;EMA&#xff09;模块保留每个通道的信息并减少计算成本&#xff01;助力v9检测性能遥遥领先&#xff01; YOLOv9原文链接戳这里&#xff0c;原文全文翻译请关注B站Ai学术叫叫首er 详细的改进…

SqlServer专题

目录 1&#xff0c;连接数据库 2&#xff0c;连接池 1.何为连接池&#xff1f; 2.连接池运行原理。 3.如何查看连接池&#xff1f; 4.连接池注意事项。 3&#xff0c;一般SQL语句。 4&#xff0c;控制语句 1.判断语句 2.循环语句 5&#xff0c;视图 1.使用…

Java高阶私房菜:快速学会异步编程CompletableFuture

为了使主程代码不受阻塞之苦&#xff0c;一般使用异步编程&#xff0c;而异步编程架构在JDK1.5便已有了雏形&#xff0c;主要通过Future和Callable实现&#xff0c;但其操作方法十分繁琐&#xff0c;想要异步获取结果,通常要以轮询的方式去获取结果&#xff0c;具体如下&#x…

电脑开不了机?不要慌,三招教你快速解决!

电脑开不了机是我们在日常使用中可能遇到的一个严重问题&#xff0c;它会影响我们的工作和生活。了解如何解决电脑开不了机的问题对于维护电脑正常运行至关重要。本文将介绍三种常见的解决电脑开不了机的方法&#xff0c;帮助您快速恢复电脑的正常使用。 方法1&#xff1a;检查…

Java实现生成中间带图标的二维码

Java实现生成中间带图标的二维码 生成Base64格式的二维码&#xff0c;返回html渲染 package your.package;import com.google.zxing.*; import com.google.zxing.client.j2se.MatrixToImageWriter; import com.google.zxing.common.BitMatrix; import com.google.zxing.qrcod…