您的位置: 首页  >  文章  >  【20190321】电影周周看V1

【20190321】电影周周看V1

分类: 文章 • 2025-03-01 22:58:58

本周实验课完成一个小项目《电影周周看》，主要包括三个页面：

  • 关于页： 小程序的基本介绍
  • 每周推荐页： 以幻灯片轮播的方式展示每周推荐的电影
  • 电影详情页： 调用豆瓣电影相关API，获取并展示指定电影的详情信息

通过本实验的学习，可以帮助同学们快速的掌握微信小程序的相关开发知识。

【20190321】电影周周看V1

1. 项目背景

本实验覆盖的小程序技术主要包括如下几点：

  • 小程序的整体架构和运行原理
  • 常用组件的使用（view, text, image, navigator, swiper）
  • 配置详解
  • 数据绑定（包括条件渲染，列表渲染等）
  • 事件机制
  • 页面生命周期
  • 导航API
  • 网络请求API

因为时间原因，模板、自定义组件并未涉及，感兴趣的同学可以自已结合官方文档学习。

学习方法： Learing by doing （做中学），从一个人项目需求和问题出发，引出技术和知识点。
其实技术学习中的师生关系更像是 健身教练 与 健身学员 的关系，教练有一定经验，但是要努力练出肌肉，必须靠学员自己的努力。

本项目会从一个个项目需求和问题出发，引出技术知识点。 对同学们的要求：一方面，多敲代码多思考；另一方面，多看官方文档。

2. 创建项目和目录文件结构

首先，创建一个完全空的项目，这里控制台会输出：

未找到入口 app.json 文件，或者文件读取失败，请检查后重新编译。

接下来，我们需要创建空的app.js（小程序逻辑）、app.json（小程序的公共设置）、app.wxss（小程序公共样式表）。

然后，创建一个pages文件夹，在里面创建一个about文件夹（这个是"关于"页面），about文件夹里面创建4个空文件，分别是 about.js, about.json, about.wxml, about.wxss （注意：上述文件都是空文件）

这样，就完成了一个单页面微信小程序目录结构的创建。

这时，我们为app.json添加代码，告诉编译器，我们有一个页面：

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

这时，系统会提示错误：about/about.json
Expecting ‘STRING’,‘NUMBER’,‘NULL’,‘TRUE’,‘FALSE’,’{’,’[’, got EOF

这是因为 about.json 里面不能是空，哪怕是一个空的文件，我们给 about.json添加一个大括号，代码如下:

{
}

现在程序就不会报错了。课上我们说过，微信小程序搜索页面，主要通过搜索 js 文件来实现，我们现在给 about.js 添加代码如下：

Page({})

但是这个时候，页面里面什么都没有，我们需要在 about.wxml 中添加一些组件元素来显示出来内容。这时我们可以使用最简单的 text 组件显示 hello world，代码如下：

<text> Hello world </text>

同时，我们也可以给它添加一些样式，代码修改如下：

<text class="info"> Hello world </text>

同时，在about.wxss中定义这个 info 样式，添加代码如下：

.info {
  font-weight:bold;
  font-size:30px;
}

这样，我们就完成了一个字体加粗加大的 hello world 页面，效果如下：
【20190321】电影周周看V1

3. 页面配置

给about.json设置代码如下：

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

导航栏标题、背景、字体颜色完成设置。

接下来我们来快速实现页面布局，主要应用弹性盒子布局：

  • 从上往下
  • 相对均匀分布
  • 水平居中

给 about.wxml 添加下面代码：

<view class='container'>
  <image class='about-banner' src='/images/simba.jpg'></image>
  <text style='font-weight: bold; font-size: 60rpx;'>电影周周看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博：weibo.com/xxxxxx</text>
</view>

注意，为保证图片显示，需要在根目录下新建一个 images 目录，把 simba.jpg 图片添加到里面。图片如下，可直接右键另存在本地。
【20190321】电影周周看V1
此时，页面效果如下：
【20190321】电影周周看V1
此时，我们给 about.wxss 添加如下样式：

.container {
  background-color: #eee;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

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

这时可以看到界面样式大为改进。具体细节，可以百度一下，查阅相关介绍。

4. 新增每周推荐Weekly页

首先，在app.json中添加 weekly 页面，文件内容变为如下：

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

此时，可以看到页面目录中，weekly相关的文件已经默认创建好。

给 weekly.wxml 添加如下代码：

<view class='container'>
  <text>本周推荐</text>
  <image src='/images/jf.jpg'></image>
  <text>教父</text>
  <text>点评：最精彩的剧本，最真实的黑帮电影。
  </text>
</view>

这里需要 jf.jpg 图片，如下（可直接点右键另存在本地）
【20190321】电影周周看V1

编写完视图文件后，我们如何查看效果呢？可以在 app.json 里面，把weekly 页面放在上面，作为默认页。

接下来，我们使有和 navigator 组件实现从 about 页， 向 weekly 页面的跳转

我们希望给 about 页面里面，“每周推荐” 这个文本添加一个跳转链接。修改 about.wxml 里面 “我每周推荐一部好片” 的代码为：

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

其中，style=‘display:incline;’ 使用 navigator 可以在同一行显示。我们在跳转以后，发现在左上角有一个返回，点击可以返回刚才的页面。

但很多时候，我们不希望左上角没有返回按钮，如何修改呢？把 open-type 修改为 redirect 即可。

5. 新增 Tab 页

很多时候，对于about页和weekly页，这样的一级页面，我们希望是在它们之间的快速和任意的切换。这样，就需要给小程序配置 tabBar。

为了给小程序添加两个 tab ，我们需要4个 icon图，分别对应两个 tab 默认状态的 icon 图和选中状态的 icon 图
四个图片如下（可右键保存到本地 /images/icons 文件夹下，需要自己新建一个）

【20190321】电影周周看V1
【20190321】电影周周看V1
【20190321】电影周周看V1
【20190321】电影周周看V1
给 app.json 添加下面的代码：

  "tabBar": {
    "list": [
      {
        "text": "每周推荐",
        "pagePath": "pages/weekly/weekly",
        "iconPath": "images/icons/weekly.png",
        "selectedIconPath": "images/icons/weekly-selected.png"
      },
      {
        "text": "关于",
        "pagePath": "pages/about/about",
        "iconPath": "images/icons/about.png",
        "selectedIconPath": "images/icons/about-selected.png"
      }
    ],
    "color": "#000000",
    "selectedColor": "#0000ff"
  }

其中，color 和 selectedColor 属性设置的是文字默认与选中时的颜色。
这样，默认时为 黑色， 被选中时为 蓝色。

同时，还要注意，“每周推荐” 的 open-type 要修改为 “switchTab” ，否则会出错。

6. 配置统一导航栏

一般来说，同一个小程序，导航栏的样式应该是一样的。所以，我们需要在 app.json 中配置导航栏的样式，需要添加如下代码：

  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "电影周周看"
  }

这样，所有页面的样式默认为 白底黑字 ，如果没有自定义的话，导航栏标题显示为“电影周周看”。

本周实验课的内容就如上所示，希望大家能够有所收获。有任何问题，可以在页面底下评论，或者直接在微信，QQ里面联系我。

相关推荐