2.1 从splash功能开始
首次进入某些App时，通常在界面的底部有三个面板指示点，分别对应于三张图片，可以左右滑动查看。
本节将以实现这个功能来开启小程序的实践之旅。
2.1.1 创建项目
接下来开始逐步实现splash功能，首先打开微信开发者工具，单击“+”号按钮创建新项目，如图2-1所示。
图2-1
相关参数在图2-1中已有展示，需要注意的是，“项目目录”必须选择一个空目录，“AppID”和“项目名称”需要根据自己的实际情况来填写，然后单击“添加项目”按钮。
之后，单击工具栏中的“详情”按钮，得到图2-2所示的界面。
图2-2
在图2-2中，选中框线中的所有复选框，特别是其中的“开发环境不检验请求域名”、TLS版本以及HTTP证书。如果不选中该复选框，那么请求豆瓣API将会失败。
操作完成，至此即成功创建了一个新的项目。
2.1.2 隐藏模拟器
在创建项目之后，我们就来完成这项操作。在微信开发者工具中，单击工具栏中的“编辑”按钮，切换到编辑状态，如图2-3所示。
图2-3
单击左上角的手机图标，使得模块器在编辑模式下隐藏，此举将便于编辑代码。如果需要预览，请切换至调试模式。
2.1.3 快捷创建页面
创建新页面的常用方法有以下两种：
第一种方法是在文档树中单击打开app.json文件，如图2-4所示。
图2-4
app.json是小程序的全局配置文件，在这个文件中可以设置页面路径、窗口样式、网络超时时间及tarBar等。
在打开的app.json文件中，将光标定位在“pages/index/index”这一行，同时按<Alt+Shift+Down>组合键两下，复制出两行新的“pages/index/index”。将新复制的两行分别修改为“pages/douban/index”和“pages/douban/splash”，如图2-5所示。
图2-5
因为在1.2节中已经设置了编辑器自动保存文件，所以此处无须保存。
在文档树中单击展开pages目录，可以看到文件已经自动生成，如图2-6所示。
图2-6
使用这种方法可以显著提高新建page页面文件的效率。
第二种标准的新建页面的方法如图2-7所示。
图2-7
首先，在文档树中点选目标后面的“…”选项按钮；其次，单击“新建”；最后，选择新建的文件类型。
这种方法比较麻烦、低效，建议直接使用快捷自动创建法。至于自动生成的．json与．wxss文件，如果用不到也不用删除。项目在上传过程中会自动压缩，无须介意这些空文件。如果要用到．json页面配置文件，则省去了再次创建的麻烦。
2.1.4 引用sim.js类库
sim.js类库是笔者开发的一个开源类库，旨在帮助初学者快速开发小程序前端。
在电脑上打开https://github.com/rixingyike/sim.js，或者直接扫描下方的二维码，下载sim.js类库压缩包。
打开github页面，单击Download Zip按钮，下载源码包，如图2-8所示。
图2-8
另外还有一种方法，即在命令行终端中使用git clone指令下载源码，这种方法更普遍，稍后会有介绍。
现在将下载的源码，解压至豆豆电影小程序的根目录之下，如图2-9所示。
图2-9
然后在文档树中打开app.js文件，在顶部引用sim.js类库：
let app = require("./sim.js/index.js")
将第4行代码
App({
替换为
App(Object.assign(app, {
将最后一行替换为：
}))
经过以上步骤，sim.js引入完毕。这两步注入将sim.js类库提供的工具类方法，附在了App对象之上。在接下来的开发中，通过getApp()来获取App对象将能通过它使用sim.js类库提供的这些方法。
let是JS语言声明变量的关键字，关于变量的更多信息，请参见本书的15.1.1节。
2.1.5 实现splash效果
首先，在文档树中打开pages/douban/splash.wxml文件，将代码修改为：
<swiper style="height: 100%; width: 100%; " indicator-dots>
<swiper-item wx:for="{{ subjects }}" wx:key="{{ item.id }}" style="flex: 1; ">
<image src="{{ item.images.large }}" mode="aspectFill" style="position:
absolute; height: 100%; width: 100%; opacity: .8; " />
</swiper-item>
</swiper>
这里使用了swiper组件，其中的indicator-dots是布尔属性，不需要填写任何值，仅仅放在那里就能表示其值为true，与填写任何值均等效。
swiper-item是swiper组件的子项，有多少张图片便有多少个子项。它的宽高会被自动设置为100%，所以无须重复设置。对全屏起决定性作用的，则是swiper的style属性，它将宽高均设置为100%。关于swiper组件的更多内容，请参见本书的11.3节。
image组件的mode属性，用于设置图像的缩放策略。aspectFill是最常用的缩放模式，它会保持一定的比例将图片完整地显示出来。关于image组件的更多内容，请参见本书的14.3节。
然后，在文档树中打开pages/douban/splash.js文件，将代码修改为：
// pages/douban/splash.js
Page({
data: {
subjects: [],
},
onLoad(options) {
let app = getApp()
app. request("https://api.douban.com/v2/movie/coming_soon? start=
0&count=3").then(
data => {
this.setData({ subjects: data.subjects })
}
)
}
})
在上述代码中，subjects是wxml代码中用于数据绑定的数组。这里使用了app.request方法，用于请求豆瓣的API。获取到数据之后，即可使用setData方法渲染视图。这里的setData会实现如下两个功能。
❑ 保存数据至subjects变量。
❑ 通知页面视图，若数据有更新，则进行渲染。
在app.request()方法返回的对象上调用then方法，是处理接口调用成功之后的逻辑。then方法接受一个函数为参数，笔者在这里传入的是使用箭头符号简写的匿名函数。关于箭头函数，参见本书的15.2.9节。
在2.1.4节引用sim.js类库，就是为了此时在这里使用。2.1.4节通过注入方法修改了默认的App定义，是为了把sim.js类库的request方法加到App对象上。选择App对象注入，可以最大限度地减少项目对框架的注入依赖。
在任何页面，只要能通过getApp()取得全局唯一的App对象，就可以使用sim.js类库的功能。
1．如何设置首页
在文档树中打开app.json文件，将光标定位到图2-10所示的这一行。
图2-10
同时按下<Command+Up>（或<Ctrl+Up>）组合键，将“pages/douban/splash”移至首行，因为首行意味着首页。
2．如何添加样式
此时已将“pages/douban/splash”设置为首页，同时按下<Command+B>组合键（或<Ctrl+B>组合键）刷新项目，什么都看不到。为什么？接下来将通过调试面板来寻找原因。
在调试工具区域，切换至wxml面板，可以看到已经渲染了三个swiper-item，如图2-11所示。
图2-11
但是swiper的高度为0。这是因为在小程序中，page容器的高度默认是0。将swiper组件的高度样式设置为100%是无用的，因为父容器没有高度。
解决办法很简单，在文档树中打开app.wxss文件，在尾部添加以下样式：
page{
height: 100%;
background-color: #f9f9f9;
}
这里除了高度以外，还添加了一个浅灰色的背景色。浅灰色的默认背景有助于设计产品的UI。
再次按下<Command+B>组合键（或<Ctrl+B>组合键）刷新项目，功能已然正常。之前没有显示，是因为swiper容器没有获得足够的高度，我们通过调试面板查出了问题所在。善用调试面板，有助于在开发中快速找到出错的缘由。
2.1.6 下载源码
在本节的学习过程中，如果遇到问题，可以通过如下方式来解决。
❑ 加入小程序微信群与作者以及其他读者一同探讨。微信扫描前言中的二维码，关注“艺述思维”，发送“小程序”进群。
❑ 下载作者的源码，对照查找问题。在公众号发送“豆豆电影2.1”获取下载地址。