小程序开发-第二章第二节小程序电影卡片模板-全栈工程师之路-中级篇

简介: 小程序开发-第二章第二节小程序电影卡片模板-全栈工程师之路-中级篇

上一节课,有朋友反映我最后写的操作步骤太琐碎了。

其实我只是想表达一下我自己的思想过程,从分析方法到关注点。

我觉得这对于新手还是有点作用的。


如果你不知道怎么入手解决一个问题,不放跟着我的节奏,进去试试。

言归正传,我们接下来编写,电影卡片的模板。

image.png

还是一样的先分析界面,这个界面是上下结构的,最上方一张图片,中间一行文字,下面一个stars模板(我们上一节课编写的内容)


我们就能使用display:flex;flex-direction: column;

一样的我们在pages/public/tpl目录下,新建moviecard.wxml和moviecard.wxss

编写代码如下:

moviecard.wxml

image.png

moviecard.wxss

image.png

上节课我们是直接在index页面直接使用stars模板,这节课我们在index界面引用moviecard模板,在moviecard模板中引用stars模板。


如果发现添加后界面没有展示出来,打开控制台提示

image.png说明文件路径或者文件名写错了,上图中是我故意删掉了一个d,导致的。

修改index中的两个地方(就是引用stars那些地方都要修改成引用moviecard模板)

image.png

image.png运行效果如下:

image.png

布局已经基本上实现我们要的效果,然后我们再根据效果图调整一下大小和其他细节。

最后moviecard.wxss如下:

image.png

运行效果如下:

image.png

这节课的内容就到这里结束了。

感谢您的阅读。



目录
相关文章
|
17天前
|
小程序 前端开发 开发者
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
|
17天前
|
小程序 容器
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
|
4天前
|
JavaScript Java 测试技术
基于小程序的电影订票系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的电影订票系统+springboot+vue.js附带文章和源代码设计说明文档ppt
15 0
|
14天前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
17天前
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
|
17天前
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
|
17天前
|
JSON 小程序 搜索推荐
【微信小程序】-- 模板语法与配置的总结(二十一)
【微信小程序】-- 模板语法与配置的总结(二十一)
|
17天前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
17天前
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
|
4天前
|
小程序 UED
人力资源小程序的设计与开发步骤
人力资源小程序的设计与开发步骤