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

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

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

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

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


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

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

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

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

感谢您的阅读。



目录
相关文章
|
2月前
|
小程序 安全 搜索推荐
【社区每周】新版O站上线,小程序新增无需审核的普通模板(2022年7月第三期)
【社区每周】新版O站上线,小程序新增无需审核的普通模板(2022年7月第三期)
34 1
|
1月前
|
小程序 前端开发 开发者
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
1月前
|
小程序 容器
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
|
1月前
|
JSON 小程序 搜索推荐
【微信小程序】-- 模板语法与配置的总结(二十一)
【微信小程序】-- 模板语法与配置的总结(二十一)
|
1月前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
1月前
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
|
1月前
|
小程序
TDesign电商小程序模板解析02-首页功能
TDesign电商小程序模板解析02-首页功能
|
1月前
|
小程序 前端开发 开发者
TDesign电商小程序模板解析01-自定义底部导航栏
TDesign电商小程序模板解析01-自定义底部导航栏