全棧工程師之路-中級篇之小程序開發-第二章第二節小程序電影卡片模板

上一節課，有朋友反映我最後寫的操作步驟太瑣碎了。

其實我只是想表達一下我自己的思想過程，從分析方法到關注點。

我覺得這對於新手還是有點作用的。

如果你不知道怎麼入手解決一個問題，不放跟着我的節奏，進去試試。

言歸正傳，我們接下來編寫，電影卡片的模板。

還是一樣的先分析界面，這個界面是上下結構的，最上方一張圖片，中間一行文字，下面一個stars模板（我們上一節課編寫的內容）

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

一樣的我們在pages/public/tpl目錄下，新建moviecard.wxml和moviecard.wxss

編寫代碼如下：

moviecard.wxml

<import src="stars.wxml"/>
<template name="moviecardTpl">
    <view class="cardcontainer">
        <image src="{{imgUrl}}"></image>
        <text>{{movieName}}</text>
        <template is="starsTpl" data="{{starScore:starScore}}"></template>
    </view>
</template>

moviecard.wxss

@import "stars.wxss";
.cardcontainer{
  display: flex;
  flex-direction: column;
}

上節課我們是直接在index頁面直接使用stars模板，這節課我們在index界面引用moviecard模板，在moviecard模板中引用stars模板。

如果發現添加後界面沒有展示出來，打開控制檯提示

說明文件路徑或者文件名寫錯了，上圖中是我故意刪掉了一個d，導致的。

修改index中的兩個地方（就是引用stars那些地方都要修改成引用moviecard模板）

運行效果如下：

佈局已經基本上實現我們要的效果，然後我們再根據效果圖調整一下大小和其他細節。

最後moviecard.wxss如下：

@import "stars.wxss";
.cardcontainer{
  display: flex;
  flex-direction: column;
  padding: 0 22rpx;
}
.cardimg{
  width: 200rpx;
  height:280rpx;
}
.cardname{
  font-size: 28rpx;
  padding-top: 20rpx;
  font-weight:500;
}

運行效果如下：