宁皓网 微信小程序：案例 有大用

微信小程序就是可以在微信里面运行的应用 .. 不需要安装，而且很容易传播，你可以把它嵌入到公众号里，可以发到朋友圈，可以分享给好友 .. 这个课程我们就去做一个小程序的案例 ..

先预览一下做好之后的样子 .. 这个是微信的开发者工具 .. 点一下预览 .. 会给我们生成二维码 .. 右边这里显示的是一部真实的手机的屏幕 ..

打开微信 .. 扫一下这个二维码 .. 会打开我做好的这个小程序 ..

现在显示的是小程序的首页 .. 上面有一组幻灯片 .. 可以滚动浏览 ..

它的下面是一些产品的列表 ..

按一下这个列表项目 .. 会打开产品的详情页面 .. 在这个页面上展示的就是产品的详细信息 ..

页面上还有一些可以滚动显示的幻灯片 ..

点开图片可以打开一个图片预览窗口 .. 这样用户可以更好地浏览这些图片 ..

在标签栏上还有个 故事 标签 .. 打开它 .. 会显示一组故事列表 .. 每个故事都有个视频 .. 按一下这个图片会播放视频内容 ..

再按一下其它的项目上的图片 .. 也会播放这个视频 .. 同时之前播放的视频会自动停止 .. 然后显示出之前的封面图片 ..

这个视频也可以全屏幕播放 ...

按一下视频下面的内容 .. 可以打开这个视频的详情页面 ...

下面我们就一起从头开始，去做一下这个小程序 ...

来自 https://ninghao.net/video/5174#info

我们可以先登录到微信的公众平台 .. 添加一个新的小程序 .. 选择 快速注册并认证小程序 .. 我明白 .. 快速创建 ..

用公众平台的管理员扫描一下页面上这个二维码 .. 进来以后，选择一下主体资质 .. 运营者信息 .. 微信认证资质 ..

下一步 .. 输入小程序登录用的邮箱 .. 再设置一个密码 .. 确认一下 .. 输入验证码 .. 然后点击 提交 ...

下面我们要登录到刚才注册的时候填写的邮箱 ..

找到小程序的激活邮件 .. 点一下邮件里面的激活链接 ..

这里让我们绑定小程序的管理员 .. 输入姓名 .. 身份证号 .. 还有管理员的手机 .. 发送一个验证码 .. 在下面再输入收到的验证码 .. 然后用微信扫一下这个二维码验证一下我们的身份 ..

再点击下一步 ... 回到小程序的首页 ...

基本信息

先去填写一下小程序的信息 .. 给小程序起个名字 .. 再选择一个头像 ..

然后添加一段介绍 ..

选择一下分类 ..

再提交一下 ..

然后再给小程序添加一个开发者 .. 管理员默认会有开发权限 .. 这里我们可以再给它添加一个开发者 ..

用管理员身份扫描一下 .. 验证一下身份 ..

添加成员 ..

搜索一下成员的微信号 ..

勾选一下权限 ... 再确认一下 ...

开发者工具

这里可以再去下载一下小程序的开发者工具 .. 选择下载适合自己系统的版本 ..

完成以后再安装一下这个开发者工具 .. 打开它 ...

项目
这里可以选择小程序项目 .. 添加一个新的项目 ... 让我们输入小程序的 AppID .. 回到小程序的管理后台 .. 打开设置 ... 开发设置 .. 复制一下里面的 AppID ..

粘贴到开发者工具这里 .. 再输入项目的名字 .. 然后指定一下项目所在的目录 .. 创建一个新的目录 .. 名字是 wxapp-case ... 创建 .. 再选择一下这个空白的目录 ..

去掉这个创建 QuickStart 项目选项 .. 再确定一下 ..

下面可以用我们自己喜欢的编辑器打开小程序项目所在的目录 ... 这里我用的是 Atom 编辑器 ...

现在我们就可以去编写小程序的代码了 ..

来自 https://ninghao.net/video/5175#info

我们可以给小程序项目做一下版本控制 ..

如果下面的操作你还看不太明白 .. 可以跳过这个视频， 在宁皓网，你可以找到 Git 相关的课程，去学习一下为项目做版本控制的方法 ..

先去创建一个远程仓库 .. 我要在 github 网站上为项目创建一个远程仓库 .. 打开 github 网站 ..

创建一个新的 Repository .. 输入仓库的名字 .. wxapp-case .. 再输入一段描述 .. 然后点击 创建 ...

https://github.com/ninghao/wxapp-case

打开命令行工具 .. 进入到项目所在的目录 .. 我的项目是在桌面上的 wxapp-case 这个目录 ..

git init .. 初始化一个本地的仓库 ..

touch README.md ... 创建一个 Markdown 文件 .. 可以在编辑器里面，打开这个文件 ... 然后输入点内容 .. 微信小程序开发案例 ..

再给项目去找一个 .gitignore 文件

https://github.com/ninghao/nest/blob/master/.gitignore

https://raw.githubusercontent.com/ninghao/nest/master/.gitignore
...
http

把它下载到项目的下面 ..

然后执行一下 git add . 添加所有的修改 ...

接着再 git commit ，提交一下 ...

然后回到之前我们创建的这个远程仓库 .. 复制一下这行命令 .. 回到命令行，执行一下 .. 它可以给项目添加一个远程仓库 .. 名字叫 origin .. 地址就是刚才我们创建的那个远程仓库的地址 ..

https://github.com/ninghao/wxapp-case

再把项目 push 到远程仓库 .. git push origin master ...

完成以后再回到我们创建的这个远程仓库 ..

刷新一下 ... 这里会出现刚才我 push 上来的项目 ...

以后你每次对项目做了一些修改，都可以提交一下 .. 然后再把修改 push 到项目的远程仓库 ..

完成每个视频以后，如果对项目做了修改我都会做一次提交 .. 在这个远程仓库里面，你可以浏览到我对项目做的所有的修改 ...


来自 https://ninghao.net/video/5176#info

先去准备一下在这个课程里需要用的一些资源 .. 下载一个压缩包 .. 地址是 http://resources.ninghao.net/wxapp-case/wxapp-case-files.zip ..
已上传到 本页面的附件里

找到这个压缩包 .. 解压一下 .. 然后把里面的 assets 目录下面的东西放在我们之前创建的小程序项目里面 .. 在 assets 下面的 icons 里面有几个小图标，等会儿我们会用到 ..

还有一个 js，跟 json 文件 .. 里面的内容是一样的，只不过是两种格式， js 里面是一个 javascript 对象 .. json 文件里是些 json 格式的数据 .. 它是我们的小程序需要用到的一些数据 .. 比如一些文章的内容 ..

这个数据可以来自我们的后端应用 .. 不过一开始，我们先不考虑后端服务 .. 专注小程序本身 .. 如果你有兴趣了解后端服务接口，可以在宁皓网上找一些创建 REST 接口相关的课程 .. 比如你可以用 WordPress，Drupal 或者 Node.js 去为小程序创建后端服务 ..

这里这个 json 格式的数据假设就是我们的后端服务接口提供的 .. 先简单看一下 .. 了解一下数据的形状 .. 有三个主要的东西 .. slides 里面是我想在小程序首页上显示的一组幻灯片 ..

vehicles 是一组汽车内容 .. stories 里面是一些故事内容 .. 在用到具体的数据的时候，我们再回来看一下 ...

这个 json 版本的数据，我传到了网上一份 .. 我们可以先用一个 rest 客户端去试一下 .. 请求的方法是 get .. 地址是 resources.ninghao.net/wxapp-case/db.json .. 发送一下这个请求 ..

https://github.com/ninghao/wxapp-case

返回来的数据跟刚才我们看到的那个 json 数据是一样的 ... 在你的小程序里面也可以请求使用这个在互联网上的数据 ..

来自 https://ninghao.net/video/5178#info

先在项目的根目录的下面，创建几个小程序必须的文件 .. app.js .. 小程序的主要逻辑 .. app.json .. 是小程序的主要的配置文件 .. 还有一个 app.wxss ，这里可以存储小程序要用的一些样式 ..

打开 app.js，在里面用一下 App 方法注册一个小程序 .. 给它一个对象参数 ..

再去创建两个页面 ..

页面

创建一个 js 文件 .. 放在 pages 下面的 index 目录的下面 .. 名字是 index.js .. 它是我们小程序的首页 .. 里面可以用一下 Page 方法注册一个页面 .. 先给它一个空白的对象 ..

再给它添加一个配套的视图文件 .. 放在同样的目录的下面 .. 文件的名字是 index.wxml .. 里面用一个 view 组件，包装一个 hello ~ ..

再去添加一个页面 .. 放在 pages 下面的 stories 下面，名字是 index.js .. 里面同样用一下 Page() 方法注册一个页面，先给它一个空白的对象参数 ..

然后再去给它添加一个视图文件 .. 放在同样的目录的下面 .. 名字是 index.wxml .. 在它里面也先添加一点简单的文字 .. 一组 view ，包装一个 stories ..

配置

打开小程序的主配置文件，app.json .. 先用一个 pages ，在它里面说明一下小程序里面的页面 .. 添加一个 pages/index/index ... 再添加一个 pages/stories/index

它们就是刚才我们创建的两个空白的页面 ..

然后用一个 window 属性，设置一下小程序的窗口样式 .. 先用 navigationBarTitleText ，设置一下小程序的导航栏上的文字 .. 宁皓汽车 ..

再用 navigationBarBackgroundColor，把导航栏的背景颜色设置成白色 #fff .. ，再添加一个 navigationBarTextStyle ，把导航栏上的文字的颜色设置成 black ，也就是黑色 ..

tabBar
下面再添加一个 tabBar 属性，它里面是一组标签还有相关的配置 .. 这组标签会显示在小程序页面的底部 .. 先添加一个 selectedColor ，激活状态下的文字的颜色设置成 #000000 ，也就是黑色 .. borderStyle 是标签栏的边框的颜色，把它设置成 white，白色 .. 再用一下 backgroundColor 设置一下它的背景颜色 .. #ededed .. 下面是一个 list .. 它里面是具体的标签项目 ..

每个项目都有一些特定的属性，text 是标签上的文字 .. 这里先添加一个 首页 .. pagePath 是标签打开的页面的地址 .. 首页我们用 pages/index/index .. iconPath 是标签项目上显示的小图标 .. 一开始我们已经把小图标放到了 assets/icons 目录的下面，首页可以使用 home.png 这个小图标 ..

selectedIconPath，设置的是激活状态下的小图标的地址 .. 这里用一下 assets/icons 下面的 home-active.png ..

然后照这个样子再添加一个标签项目 .. 复制一下 .. 这个标签上的文字是 故事 .. 页面的地址是 pages/stories/index .. 用的图标是 event.png ... 激活状态的图标是 event-active.png ..

预览

完成以后，我们再去预览一下 ...

现在我们就准备好了一个基本的小程序 ..

来自  https://ninghao.net/video/5179#info

我们小程序里需要用到一些数据，这些数据可以来自我们的后端服务 .. 这个后端服务你要单独去创建 .. 暂时你可以使用我提供的一组数据 .. 地址就是这个 resources.ninghao.net/wxapp-case/db.json .. 小程序可以请求的域名我们先要去配置一下 ..

安全域名

在小程序的后台 .. 设置 .. 开发设置 .. 这里可以先配置一下允许小程序的 request 请求的域名 .. 先添加一个 resources.ninghao.net ... 等你有了自己的后端服务接口以后，可以把你的后端服务的主机名放在这里 ..

然后关掉微信开发者工具 .. 重新再打开它 .. 打开详情 .. 域名信息 .. 这里会出现我们配置好的允许请求的域名 .. 或者你也可以暂时先在项目设置这里 .. 勾选一下 不校验安全域名 .. 这样就不需要在小程序的后台去配置允许的安全域名了 ..

获取数据

回到项目 .. 打开小程序的主逻辑 app.js .. 添加一个 onLaunch 生命周期方法 .. 小程序初始化完成以后会执行这个方法 ..

在它里面用一下 wx.request 这个接口，它可以发生 http 请求 .. 一个对象参数 .. 添加一个 url 属性，设置一下请求的地址 .. https://resources.ninghao.net/wxapp-case/db.json

请求成功会执行 success 回调 .. 得到的响应会在 response 里面 .. 我们可以先把这个响应输出到控制台上检查一下 ..

在控制台上，你会看到得到的响应 .. 得到的具体的数据会在 data 这个属性里面 ..

初始数据

在上面添加一个 globalData 属性 .. 它里面可以放一些小程序的初始化数据 ..

这些是我们在小程序的页面上要用的一些数据 ..

我们也可以在每个页面加载以后，去请求页面需要的数据 .. 因为我的小程序的数据不多，所以我直接在初始化小程序以后得到数据然后放到小程序的全局数据里面 ..

在这个 request 的 success 回调这里 .. 用一下 Object 的 assign .. 把请求得到的数据放到 globalData 这个对象里面 .. 请求得到的数据是在 response 的 data 属性里面 ..

预览

回到开发者工具 .. 在控制台上可以测试一下 ... const app = getApp() .. 这个 getApp 可以得到小程序实例 .. 然后看一下 app 里面的 globalData 属性里的东西 ..

你会发现，这里会包含我们请求回来的这些数据 ...

来自 https://ninghao.net/video/5180#info

小程序页面上有些样式我们可以重置一下 .. 先添加两张图片，用一下 image 组件 .. 在 src 属性里设置一下图片的地址 ..

然后再添加一张图片 ..

你会发现，页面上显示的这两张图片之间会有一个间隔 .. 我们可以先去创建一个样式文件 .. 放在 styles 目录的下面 .. 名字是 reset.wxss ..

然后打开小程序的主样式文件 app.wxss .. 在这里可以用一下 import 导入刚才创建的 styles 目录下面的 reset.wxss ..

@import 'styles/reset.wxss';

打开这个 reset.wxss .. 重新设置一下 image 组件的样式 .. 把 display 设置成 block .. 这样图像之间的间隔就不见了 ..

默认图像的显示比例会有点问题 .. 我们可以在 image 组件上面添加一个 mode 属性，把它的值设置成 aspectFill ，如果你想按比例显示完整的图像，可以把 mode 值设置成 aspectFit ..

在这个 reset 样式文件里，可以再把 width 设置成 100% .. 另外再重新设置一下 video 的样式 .. 把它的 width 也设置成 100% ..

文字
再回到首页这个页面 .. 添加一段文字 .. 用一个 view 组件 .. 文字的行间距我们也需要重新设置一下 .. 因为默认在不同的设备上这个行间距的值都不太一样 ..

添加一个 page .. 统一把 line-height，也就是行间距设置成 1.5 ... 这里可以再重新设置一下页面上的文字的大小 .. 把 font-size，设置成 32rpx .. 这个 rpx 单位是小程序里面特有的一种单位 .. 它的值会随着设备的宽度的变化而变化 ..

来自 https://ninghao.net/video/5181#info

打开小程序的主样式文件 .. 这里可以先设置一下 page 的背景颜色 .. 一个 page，把 background 设置成 #f8f8f8 .. 是一种淡淡的灰白色 ..

如果一组内容要点满整个页面的高度，我们可以把它们放在一个带 section 类的容器里 ..

这里可以再设置一下 .section 的样式 .. 用一个 height，把容器的高度设置成 100vh .. vh 表示 viewport height ，100vh 就是占满整个视口的高度 ...

回到页面的视图 .. 在这个 section 容器里再嵌套一个容器 .. 里面可以添加点样式 .. 一个 background 设置一下背景颜色 .. 再用 height 设置一下高度 ..

这个 section 里的容器会占用百分之 38.2 的页面高度 ..

再复制一份这个 section 容器，还有它里面包装的东西 ..

你会发现，每个 section 容器都会占用一个页面的高度 ..

来自 https://ninghao.net/video/5182#info

在首页上我想显示一组幻灯片 .. 先看一下幻灯片的数据形状 .. 幻灯片数据在 slides 里面，每个幻灯片项目都有一个 id 属性，它的值是幻灯片对应的内容的 id .. 使用这个 id 的值，我们可以在用户点了幻灯片以后，显示具体的内容页面 ..

幻灯片还有个 header ，大标题 .. sub_header 是子标题 .. description 是描述 .. image 是幻灯片上的图像 ..

打开 pages/index 下面的 index.js .. 在这个页面上我们可以显示一组幻灯片 .. 先在页面顶部得到小程序实例 .. const app = getApp() ..

然后在 Page 方法的对象参数里面，添加一个 data 属性，它是页面上的数据 .. 先添加一个 slides ，先把它的值设置成 null

下面再添加一个 onLoad .. 页面加载以后会执行这个方法 .. 里面用一下 this.setData 去设置一下页面上的数据 .. 要设置的是 slides，把对应的值设置成 app.globalData.slides ..

这样我们就可以在页面上使用 slides 里的数据了 ..

来自 https://ninghao.net/video/5184#info

打开首页的视图文件 .. index.wxml .. 去掉里面的东西 .. 先添加一个幻灯片 .. 可以用一下小程序的 swiper 组件 .. 上面加上一个 section 类 .. 再把它的 indicator-dots 属性的值设置成 true ..

它里面可以包装一组幻灯片项目，每个幻灯片项目在一个 swiper-item 组件里面 ..

这里我们可以用一个循环，先添加一个 block ，它不是一个组件，循环的时候不会包装这个 block 本身 .. 上面添加一个 .. wx:for ，给它一组数据 .. 就是页面上的 slides ..

再用一个 wx:key 去设置一下 key 的名字 .. 如果列表里的数据是动态的，这个 wx:key 的值会比较关键 .. 如果列表内容不会变，可以不用管 wx:key .. 它的值应该是循环的列表里面的一个属性，这个属性的值在这个列表里必须是唯一的 .. 这里我们可以使用 slides 里的 id 属性作为这个 wx:key 的值 ..

循环的每个项目是一个 swiper-item ... 这个组件里面包装的就是每个幻灯片的具体的内容 .. 添加一个 image 组件 .. src 是图片的地址 .. 这里可以用 item.image .. 每次循环的时候，项目的名字默认就是这个 item ..

再加上一个 mode 设置一下图像的模式 .. 这里用一下 aspectFill

图像的下面是一些文字内容 .. 一个 view，上面加上一个 content 类 .. 这里面再包装一个 view，加上一个 sub_header .. 里面绑定一个 item.sub_header

再添加一个 view，加上 header 这个类 .. 绑定的数据是 item.header .. 接着是幻灯片上的描述文字 .. 这个容器上添加一个description .. 显示的数据是 item.description ..

然后是一个按钮 .. 先用一个 view，加上 action 类 .. 里面包装一个 button .. 上面加上 button 类 .. 按钮上的文字是 预约试驾 ..

再添加一个按钮 .. 这个按钮上除了 button 类，再添加一个 primary 类 .. 按钮上的文字是 了解更多 ...

来自 https://ninghao.net/video/5185#info

这里可以给幻灯片这块内容起个名字 .. 比如 hero .. 在这个 swiper 组件上面再添加一个 hero .. 然后去创建一个样式文件 .. 放在 styles 目录的下面，名字是 hero.wxss ..

打开小程序的主样式文件 .. 用 import 导入在 styles 下面的 hero.wxss 这个样式文件 .. 再回到这个样式文件 ..

下面可以给 .hero 添加一些样式 ..

先设置一下 .hero 下面的 image 的样式 .. 还有 hero 下面的 video 的样式 .. 把 height 设置成 38.2vh ..

再设置一下 .hero 下面的 .content ，padding-top 设置成 10% .. 首页幻灯片上的这些文字内容可以居中对齐 .. 在这个 .content 容器的上面，再添加一个 .centered ..

回来再设置一下 .hero .content.centered .. text-align 是 center，让文字居中对齐 ..

sub-header

接着再设置一下 hero 下面的 sub-header .. font-size 是 32rpx .. text-transform 是 uppercase，把文字改成大写的 .. letter-spacing ，添加 3 个像素的字间距 ..

margin-bottom，是 8 个像素 .. 再用一个 color ，文字的颜色可以使用 rgba 表示 .. 颜色是黑色 .. 不透明度是 0.85 ..

header

然后是 .hero 下面的 .header 的样式 .. font-size，字号可以是 72rpx，用一个相对的大小，这样文字的大小会随着设备的宽度的变化而变化 ..

font-weight 是 bold .. 再用 margin 添加点外边距 .. 0 12% 8px .. 上边是0，左右两边留出 12% 的距离 .. 下边是 8 个像素 ..

description

再设置一下 hero 的 description 的样式 .. 先设置一下内边距 .. 上下是 0，左右是 12% .. 再用一个 margin-bottom 添加点下边的外边距 ，值是 32px ..

来自 https://ninghao.net/video/5186#info

创建一个样式文件 .. 放在 styles 下面，名字是 button.wxss .. 打开小程序的主样式 .. 用 import 导入刚才我们创建的 button 这个样式文件 .. 再回到这个样式文件 ...

添加一个 .button .. 先把它变成 inline-block 类型的元素 .. display: inline-block ..

小程序里的按钮都有个边框 .. 要去掉它可以这样 .. .button::after .. 设置一下按钮的 after 伪元素的样式 .. 把 content 设置成 none ..

再继续去设计按钮的样式 .. 用 margin 添加点外边距，大小是 4 个像素 .. 再用 background 设置一下背景颜色，颜色的值是 #e0e1e2 ..

然后用 padding 在按钮的内部添加点内边距 .. 上下是 0，左右是 24px .. 接着再用 color 设置一下文字的颜色 .. 用 rgba 表示，颜色是黑色 .. 不透明度设置成 0.6 ..

添加一个 font-weight，值是 bold，让文字加粗显示 .. border-radius 可以设置成 1 像素 .. font-size 是 32rpx ...

可以再添加一个 transition，过渡的效果 ，时长是 0.3s ，支持所有的属性 ..

我们再单独设置一下带 primary 类的按钮 .. .button.primary .. 把背景设置成黑色 .. 文字的颜色是白色 .. 不透明度是 0.9 ..

按一下按钮会应用 .button-hover 类里的样式 .. 添加一个类选择器 .. 里面可以把 opacity 设置成 0.8 ...

再去预览一下 ..

按一下按钮 .. 会有一个过渡效果 ...

来自 https://ninghao.net/video/5187#info

现在遇到了一个问题 .. 有时候小程序的页面的加载以后什么也不显示 .. 这个是因为，页面需要的数据是从小程序的全局那里来的 .. 这里我们用了一个 onLaunch 方法 .. 它里面用了 wx.request 接口去请求了网络上的数据 .. 这个请求是异步的 ..

也就是很可能页面在加载完成以后，我们请求的数据还没回来 .. 这样页面也就没有可以显示的数据了 .. 解决的方法是我们可以在成功的得到了请求的数据以后，做一下判断，看看页面是不是已经显示了 ... 如果已经显示了，说明页面在得到数据之前就已经显示了 .. 这样我们就可以，再执行一下当前页面的 onLoad 方法 ..

页面的这个方法里用了 setData，它可以让页面重新使用得到的数据再渲染一次 ..

这里改造一下 app.js .. 在这个 request 的成功回调这里 .. 添加一个 currentPages .. 它的值用一下 getCurrentPages() ，这个方法可以返回当前页面 ... 这里会包含页面的上一页 ..

下面判断一下 .. 看看 currentPages 的 length 是不是不等于 0 .. 如果页面还没有显示呢， currentPages 的值就会是 0 .. 这样我们什么也不用做 ..

如果页面已经显示了 .. 我们可以得到当前页面 .. 当前页面的索引值应该是 currentPages 的 length ，也就是数量，减去 1 .. 调用一下 onLoad() ..

现在我们的页面就不会再显示空白页了 ...

来自 https://ninghao.net/video/5189#info

现在我们去做一个产品列表，这个列表可以放在小程序的首页上显示 .. 打开 pages/index/index.wxml .. 先暂时把之前我们在首页上添加的这个幻灯片注释掉 ..

数据

打开首页的主逻辑 .. 先准备一下产品列表需要的数据 .. 我已经在小程序启动以后把应用需要的所有数据都准备好了 .. 放在了小程序的 globalData 里面 ..

在首页的数据里先添加一个 entities ，先让它等于 null，这个 entities 表示的就是一些内容 ..

然后在 onLoad 方法里面，用了 setData 去设置了一些数据 .. 这里再添加一个 entities .. 对应的值就是 app.globalData 里面的 vehicles ..

一般你可以在页面的onLoad 方法里 .. 去对应用的后端接口请求数据 .. 得到数据以后可以再用一下 setData 去设置一下 .. 这样页面就会显示我们请求回来的数据了 ..

每次请求回新的数据以后，你都可以使用页面的 setData 这个方法去设置一下 .. 这样页面会重新被渲染，显示更新之后的数据 ..

我们可以再去看一下产品列表里的数据的形状 .. 在 assets 下面，打开 db.json ..

vehicles 里面的东西就是我们要显示的一组产品 .. 它表示汽车 .. 每个项目都有一个 id ，每个内容的 id 属性的值都不一样 ..

header 是内容的标题 .. sub_header 是子标题 .. description 是描述 .. image 是一个产品图片地址 ..

meta 里面还有一些内容 .. price 是产品的价格 .. carbon_dioxide [daɪˈɑ:ksaɪd] 表示汽车的每公里的二氧化碳的排放克数 .. fuel 指的是百分里的耗油量 ..

exterior_design 是一组数据，我们会在产品的详情页面上用到 .. 它表示的是汽车的外部的设计 .. 最后还有一个 interior_design ，它指的是汽车的内饰的设计 ...

每个项目都有自己的 header 标题，description 描述 .. 还有一个 image 图片 ...

来自 https://ninghao.net/video/5191#info

打开首页视图 .. 再去设计一下这个产品列表的显示 .. 一个 view ，上面可以加上一个 cards ，它里面的东西就是一组卡片 .. 卡片是界面上经常用到的一个词 .. 因为每个产品项目都像一个卡片 .. 所以这里我叫它们卡片 ..

里面包装一个 view，每个卡片上都有一个 card 类 .. 这个组件可以循环显示，wx:for ，循环的数据是页面上的 entities .. wx:key 设置一下 key 的名字，在每个项目的唯一的值是我们在 id 属性 ..

每个产品项目都要显示一张图片 .. 用一个 image 组件 .. src 是图片的地址，绑定一个 item.image .. 再把图片的 mode 设置成 aspectFill ，让它保持比例填充显示 ..

图片的下面是一些文字内容 .. 一个 view，上面加上 content 类 .. 它是文字内容的大包装 .. 里面先添加一个 view，加上一个 header，绑定一下 item.header .. 这个标题我打算用点特别的样式，所以我们把 sub-header 也放在这个 header 包装里面 .. 一个 view，加上 sub-header ，绑定输出的是 item.sub_header ..

标题的下面是一个 description .. 里面输出的是 item.description ，就是产品的描述.. 最后还有一个 meta ... 它里面可以显示一个 item.meta 下面的 price ，也就是产品的价格 ..

来自 https://ninghao.net/video/5193#info

创建一个新的样式文件 .. 放在 styles 目录的下面，名字是 card.wxss .. 打开小程序的主样式 .. 里面用 @import 导入刚才我们创建的 card.wxss 样式文件 .. 然后再回到这个样式文件 .. 去设计一下卡片组件的样式 ..

先添加一个 .cards ，设计一下大包装的样式 .. 里面用个 padding，总体的内边距设置成 16 像素 ..

下面再用一个 .card .. 每个卡片项目的背景都是白色的 .. background 是 #ffffff ... 下边的外边距设置成 16 像素 .. 再来点过渡效果 .. 时长 0.5s ，在所有的属性上应用这个过渡 ..

hover

片卡组件用了小程序的 view 组件，在 view 组件上面我们可以添加一个 hover-class 去设置一下按了这个组件以后应用的类 .. 这里设置成 hover ..

回到样式文件，再设计一下 .card.hover 的样式 .. 这个选择器表示同时包含 card 还有 hover 类的组件 .. 里面用一个 box-shadow 应用点阴影效果 .. box-shadow: 0 32px 48px rgba(0, 0, 0, 0.06);

现在按下卡片组件 .. 会在组件上面应用一个 hover 类，这个类的样式就是用了一个阴影效果 .. 我们在卡片组件上用了过渡，所以组件切换显示状态的时候会有一个过渡的动画效果 ..

内容样式

再设计一下 .card 里面的 image ，还有 .card 里面的 video .. 把 height 设置成 36vh .. 接着再设计一下 .card 里的 .content ，这个 content 是内容的包装 .. 调整一下它的内边距 .. padding: 48rpx 48rpx 64rpx; 把左边，右边，还有上边的内边距设置成 48rpx，下边的内边距设置成 64rpx ..

然后是卡片里的大标题的样式 .. .card .header .. font-size 字号是 48rpx .. font-weight 是 bold，加粗显示 .. letter-spacing 是 2rpx ，添加一点点字间距 .. margin-bottom 是 48rpx ..

在大标题的下面我需要一个小边线 .. 这里去设计一下 .card .header::after ，也就是大标题的 after 这个伪元素的样式 ..

content 是一个空白 .. 再把它变成块级元素 .. display: block .. width，宽度是 40px .. border-bottom ，下边线可以用 2 个像素的黑色实线 .. 2px solid #000000;

在下边再添加点内边距 .. 大小是 8px ..

再去设计一下子标题的样式 .. .card .sub-header .. font-size 32rpx ，再添加 3px 的字间距 .. 然后让它变成大写的 .. text-transform: uppercase ..

最后我们再统一地设计一下 .card 下面的 .description ，还有 .card 下面的 .meta .. margin-bottom 是 8px .. color，颜色用 rgba 表示 .. 黑色 .. 不透明度是 0.85 .. font-size 字号是 32rpx ...

现在我们就完成了这个产品列表的设计 ...

预览

回到首页的视图 .. 再取消对首页幻灯片的注释 ... 然后在开发者工具的模拟器上预览一下我们做好的这个小程序的首页 ..

这个幻灯片的背景颜色我们可以把它设置成白色 .. 这样幻灯片内容会跟下面的产品列表区隔开 ..

在这个幻灯片组件上，再多添加一个 white .. 然后打开 hero 这个样式文件 ... 添加一个选择器 .. hero.white .. 把背景颜色设置成白色 ..

再回到模拟器上预览一下 ...

来自 https://ninghao.net/video/5192#info

我们先预览一下在这一章里要制作的这个产品的详情页 ..

可以在真正的手机设备上去预览一下这个页面 .. 点一下开发者工具上的这个 预览 .. 会给我们生成一个二维码 ..

然后打开手机上的微信 .. 用扫一扫，去扫描一下开发者工具上的这个二维码 .. 这样会打开我们的开发的小程序 ..

这个产品详情页上，最开始是产品的图片，上面覆盖了一层文字 .. 下面是一些参数 .. 预约试驾这个动作暂时还不能做什么 ..

你可以在小程序提供一个后端服务接口 .. 用户点了预约试驾以后，可以打开一个页面，填写一些信息 .. 提交以后，可以把这些信息发送到我们的后端服务接口存储起来 ..

这些接口的创建方法，你可以在宁皓网上看一下 REST 相关的课程 ..

下面还有两组幻灯片 ... 可以左右滚动 .. 查看幻灯片里的项目 ..

点一下幻灯片上的图片，会打开一个图像预览窗口 .. 在这里用户可以更好的浏览这些图片 ...

来自 https://ninghao.net/video/5197#info

用户按下首页上的对应的产品可以打开一个详情页面 .. 下面我们再去创建这个可以显示产品详情的页面 ..

放在 pages 目录的下面，创建一个子目录，名字是 vehicles .. 页面的名字是 show .. 这是一种命名的风格 .. 比如 index 可以显示资源的列表，show 可以用来显示单个资源 ..

添加一个 show.js .. 在里面先得到小程序的实例 .. 用一下 getApp 这个方法 .. 下面再用 Page 方法注册一个页面 .. 先给它一个空白的对象参数 ..

在创建一个对应的视图文件 .. 名字是 show.wxml ..

然后打开小程序的主配置 .. 在 pages 里面，添加一个新的页面 .. 这里我们可以暂时把这个 vehicles 下面的 show ，作为小程序的首页 .. 这样我们就可以直接在模拟器上看到我们设计的这个页面了 ..

来自  https://ninghao.net/video/5198#info

再准备一下产品页上需要用的数据，打开产品页面的主逻辑 .. vehicles 下面的 show.js .. 在它的 Page 方法的参数对象里面 .. 添加一个 data 属性，这里就是页面上需要用的数据 .. 里面先添加一个 entity ，表示要显示的内容 .. 先让它等于 null

然后在添加一个 onLoad ，页面加载以后会执行这个方法 .. 在它里面我们可以得到具体要显示的内容 .. 这里你可以用 wx.request 去向应用的后端服务请求数据 .. 我们的小程序已经在加载以后把应用需要的所有的数据都准备好了 .. 放在了 globalData 里面 ..

这里我们先写一个简单的查询方法 .. 添加一个 id .. 它的值应该从页面的查询参数里得到 .. 一会儿我们再去处理，让它 id 等于一个静态的值 .. 比如 3 ..

然后添加一个 entity .. 用一下 app.globalData.vehicles ，这个 vehicles 是个数组，所以我们可以使用它的 filter 方法 .. 一个函数参数 .. 每个项目的名字可以是 item .. return 的是 item.id 等于 id 的项目 ..

意思就是，在我们的产品列表里，找到产品 id 的值跟我们上面定义的 id 的值相等的项目 ..

有了数据以后，下面再用一下 this.setData .. 设置的是 entity 这个数据 .. 对应的值就是得到的 entity 这个数组里面的第一个项目 ..

导航栏标题

我们可以再设置一下导航栏上的标题 .. 用的是 wx.setNavigationBarTitle 这个接口 .. 一个对象 .. 里面添加一个 title 属性，对应的值就是导航栏上要显示的标题文字 .. 这里可以用一下 this.data.entity.header ...

现在页面加载以后 .. 导航栏上的标题会就是当前要显示的页面的大标题 ..

来自 https://ninghao.net/video/5199#info

打开产品页面的视图 .. pages .. vechicles .. show.wxml .. 一个 view，加个 section .. 这样它里面的内容就会占满整页 ..

先包装一个 view .. 起个名字可以叫 cover .. 里面包装一个 image .. 图像的地址是 entity.image .. mode 可以设置成 aspectFill

然后是一个 content .. 里面先添加一个 header .. 绑定一个 entity.header .. 里面可以再添加一个 sub-header ，输出的数据是 entity.sub_header ..

标题的下面是一个 meta .. 这里可以显示一个 entity.meta 下面的 price ，也就是产品的价格 ..

样式

我们再去设计一下这块视图的样式 .. 添加一个新的样式文件 .. 放在 styles 的下面，名字是 cover.wxss .. 然后在小程序的主样式里面，import 一下这个样式文件 ... 再回到这个样式文件 ..

添加一个 .cover .. 我们把封面的包装的位置设置成 relative .. 因为我想让它里面的内容基于封面的包装绝对定位 .. 因为我想让内容覆盖在图片的上面显示 ..

再设置一下 .cover 的 image ，还有 .cover 下面的 video 的样式 .. 把 height 设置成 38.2vh ..

内容

然后是 .cover 下面的 .content ，也就是内容的样式 .. 先把它变成一个 flexbox .. display: flex .. 把 justify-content ，设置成 space-between .. 调整一下项目的间隔 .. 再把 align-items: 设置成 flex-end，设置一下项目的对齐 ..

然后添加点 padding .. 上下是 8 像素，左右是 16 像素 ..

内容的 position 可以设置成 absolute ，让它绝对定位 .. bottom 设置成 0 .. 这样它会在 cover 容器的底部显示 .. width，宽度可以设置成 100% .. 再把 box-sizing 设置成 border-box ..

再用 color 调整一下文字的颜色 .. 这里可以使用 rgba 表示的颜色 .. 白色 .. 不透明度是 0.85 .. 再给它添加点阴影 .. text-shadow . 0 5px 19px rgba(0, 0, 0, 0.5) ..

让文字在图片上显示的更清楚一点，我们可以给内容添加一个黑色到透明的渐变背景 .. background-image: linear-gradient(rgba(0,0,0,0.00) 7%, rgba(0,0,0,0.36) 100%);

文字

再去设计一下 .cover 下面的大标题 .. font-size 是 36rpx .. font-weight 是 bold .. letter-spacing 是 4rpx ..

接着是 .cover 的 .sub-header ，子标题 .. font-size 是 25rpx .. font-weight 可以是 normal .. text-transform 设置成 uppercase ... letter-spacing 是 4rpx ..

最后我们再调整一下 meta 的字号 .. .cover .meta .. font-size 是 26rpx ...

来自 https://ninghao.net/video/5200#info

我们继续完成这个产品详情页 .. 现在我们要去添加一个产品参数视图 .. 一个 view，上面可以加上一个 spec 类 .. 每个项目都是一个项目 .. 单独放在一个带 item 类的 view 组件里面 ..

然后是参数的标题 .. 这里我们先手工添加需要显示的参数项目 .. 以后你可以循环显示一组参数 ..

这个参数的标题是 二氧化碳排放 .. 下面再添加一个 view ，添加一个 value 类 .. 里面先用一组 text 组件，包装一下参数的值 .. 里面绑定一个 entity.meta.carbon_dioxide .. 在 text 组件的外面再添加一个单位 .. 克/公里 ..

然后再添加一组参数 .. 标题是 综合燃油 .. 具体的值是 meta 下面的 fuel .. 单位是 升/百公里

样式

下面去设计它的样式 .. 创建一个样式文件 .. 放在 styles 下面，名字是 spec.wxss .. 然后在主样式里面导入这个样式文件 .. 再回到这个样式文件 ..

一个 .sepc .. 先把它设置成 flexbox .. display: flex .. 然后用 border-bottom 添加一条 1 个像素的灰色的边线 .. border-bottom: 1px solid #ededed;

再把字号设置成 24rpx ..

下面是每个项目的样式 .. .spec .item .. 用 border-right 添加一个右边线 ..

border-right: 1px solid #ededed;

width，宽度是 100% .. padding，内边距设置成 64rpx ..

最后再设置一下 .spec .item .value 下面的 text 组件的样式 .. 让文字大一些 . font-size 设置成 60rpx .. margin-right ，添加 8rpx 的外边距 ..

来自  https://ninghao.net/video/5201#info

在产品页面上再添加一个可以执行的动作 .. 一个 view 组件，上面加上 action .. 里面包装一个 view，上面用一个 description .. 这里可以绑定输出 entity.description ..

描述的下面是个 button .. 添加一个 button 还有 primary 类 .. 按钮上的文字是 预约试驾 ..

样式

再去创建一个样式文件 .. 放在 styles 的下面，名字是 action.wxss .. 在小程序的主样式里面再导入这个样式文件 ..

设置一下 .action .. 让里面的内容居中对齐 .. text-align: center .. 再用 padding 添加点内边距 .. 大小是 48px ..

再设置一下 .action 下面的 .description .. margin-bottom .. 设置成 48rpx ..

来自  在产品页面上再添加一个可以执行的动作 .. 一个 view 组件，上面加上 action .. 里面包装一个 view，上面用一个 description .. 这里可以绑定输出 entity.description ..

描述的下面是个 button .. 添加一个 button 还有 primary 类 .. 按钮上的文字是 预约试驾 ..

样式

再去创建一个样式文件 .. 放在 styles 的下面，名字是 action.wxss .. 在小程序的主样式里面再导入这个样式文件 ..

设置一下 .action .. 让里面的内容居中对齐 .. text-align: center .. 再用 padding 添加点内边距 .. 大小是 48px ..

再设置一下 .action 下面的 .description .. margin-bottom .. 设置成 48rpx ..

汽车的外观还有内饰内容，我打算用幻灯片展示 .. 先打开产品详情页面的视图 .. pages/vehicles/show.wxml .. 注释掉之前添加的内容 ..

用一个 swiper 组件 .. 上面加上 section 类，让它占用整个页面的高度 .. 再起个名字可以叫 story .. 再把它的 indicator-dots 设置成 true，显示一组导航点 ..

幻灯片项目用一个循环 .. 添加一个 block .. 用一下 wx:for .. 循环的数据是 entity.meta.exterior_design ..

每个项目是一个 swiper-item .. 把要显示的内容放在这个组件里 .. 添加一个 view，加上 content 类 .. 里面包装一个 sub-header ... 文字是 外观 ..

再添加个 header .. 内容是 item.header ..

然后是一段描述文字 .. description .. 显示的数据是 item.description ..

内容的下面是一个 image .. 图片的地址是 item.image .. mode 设置成 aspectFill ..

内饰

再去添加一个用来展示内饰内容的幻灯片 .. 可以直接复制一份刚才添加的这些代码 .. 然后修改一下 .. 循环的数据是 meta 下面的 interior_design .. 这个子标题文字是 内饰 ..

这里可以做个区分 .. 我们在这个幻灯片的包装上添加一个 white ..

样式

下面去设计这块视图的样式 .. 添加一个新的样式文件 .. 名字是 story.wxss .. 打开小程序的主样式文件 .. 导入刚才我们创建的样式文件 ..

在这个样式文件里，添加一个 .story .. 如果 .story 跟 white 同时在组件上出现 ... 我们就把组件的背景颜色设置成白色 ..

再设置一下 story 下面的 .content 的样式，它里面包装的文字内容 .. 可以先让它变成一个 flexbox .. display:flex .. flex-direction .. 设置成 column .. height 设置成 38.2vh .. 上边留点内边距 .. 大小是 10% .. 再让文字居中显示 .. text-align: center ..

下面是大标题的样式 .. .story .header .. 字号是 48rpx ... 加粗显示文字 .. margin-bottom 是 16px ..

接着是子标题的样式 .. .story .sub-header .. 字号可以是 28rpx .. text-transform 设置成 uppercase .. 再添加 6 个 rpx 的字间距 .. margin-bottom 可以是 8px .. 文字的颜色是黑色 .. 不透明度是 0.75 ..

我们再设置一下 story 下面的 .description .. 添加点内边距 .. 上下是 0，左右可以是 12% ...

最后是 story 下面的 image ，还有 story 下面的 video 的样式 .. 给它们添加一个统一的高度 .. 41.8vh ..

来自  https://ninghao.net/video/5203#info

用户按一下产品页面上的图片，我希望可以显示一个图片预览窗口，这样用户可以更好地浏览这些图片 .. 先打开产品详情页 .. 找到想要可以预览的这个图像组件 .. 在它上面绑定一个 tap 事件 .. bindtap .. 然后指定用 preview 这个方法来处理 ..

按下图片，打开预览窗口，可以预览一组特定的图片，我们要得到这组特定的图片 .. 在这个 image 上面，再添加一个 data-slides .. 设置一下这组幻灯片是谁 .. 这个是 exterior_design .. 按下图片，我们要显示当前被按的图片 .. 这里再添加一个 data-index .. 这个 data-slides 还有 data-index 都是我们自己定义的属性 ..

在事件处理方法里面，我们可以得到这些属性的值 .. 这个 data-index 的值，给它绑定一个 index .. 就是循环的时候项目的索引值 .. 我们要用到这个值来判断按下图片要显示的图片到底是哪个 ..

再把这些属性添加到下面这个幻灯片里的图像组件上 .. 修改这个 data-slides 的值，这个是 interior_design ..

逻辑

再打开页面的逻辑文件 ... 在这里添加一个事件处理方法 .. 名字就是 preview .. 一个 event 参数，表示事件 ..

在它里面我们先得到被点的图像元素上的 slides 还有 index 这两个自定义属性的值 .. const slidesName 等于 .. event.target.dataset.slides ..

const index = event.target.dataset.index

下面我们可以根据 slidesName ，得到对应的 slides 数据 .. const slides .. this.data.entity.meta[slidesName]

我们可以从这组幻灯片里面把所有的图像地址都提取出来 .. 先添加一组空白的数据 .. const images = []..

再用 map 处理一下 slides 里的数据 .. 每个项目叫 item .. images.push ，把 item 里的 image push 到 images 里面 ..

现在我们就有了一组要显示的图像地址 .. 下面用一下 wx.previewImage 这个接口 .. 一个对象参数 .. urls 设置一下要显示的一组图像 .. 这里就是 images ..

再添加一个 current ，设置一下当前要显示的图片 .. images，再用一下上面得到的索引值，可以定位到要当前要显示的图片 .. images[index]

预览

完成以后，可以到模拟器上预览一下 .. 按一下幻灯片上的图像 .. 会显示一个图像预览窗口 ..

再试一下内饰上的图片 ... 同样会显示一个图像预览窗口 ..

现在我们这个产品详情页面就做好了 .. 回到视图 .. 去掉这块注释 ..

然后可以再去预览一下 ...

来自  https://ninghao.net/video/5204#info

打开小程序的主配置文件 .. 把小程序的首页换成 pages/index/index .. 在 pages 里面，第一个项目就是小程序的首页 ..

现在我想在按下这个首页上的产品列表里面的项目 .. 可以打开这个项目的详情页面 ..

先找到这个页面的视图文件 .. pages/index/index.wxml ..

找到 cards 里面的 card .. 它里面的东西我们可以用一个 navigator 组件包装一下 ... 在这个组件上添加一个 url，设置一下打开的地址 .. 页面是 pages/vehicles/show .. 添加一个 id 查询参数 .. 对应的值就是 item.id .. 再把 hover-class 的值设置成 none .. 不然按下 navigator 组件的时候会应用一个类，这个类会添加一些样式 .. 我们之前已经在 card 组件上应用了 hover 样式，可以这里可以去掉 navigator 上面的 hover 样式 ..

再打开用来显示产品详情的页面的主逻辑 .. pages/vehicles/show.js .. 在它的 onLoad 方法里，添加一个 options 参数 ..

然后把这个 id 的值换成 options.id .. 这个 id 就是地址里的 id 这个查询参数的值 ..

下面我们可以预览一下 ..

按下产品列表里的项目 .. 会打开这个项目的详情页面 .. 导航栏上会出现一个返回小图标 .. 点一下它，可以返回之前访问的页面 ..

来自  https://ninghao.net/video/5205#info

首页上还有一组幻灯片，这组幻灯片里面都有一个 了解更多 按钮，现在我想在按了这个按钮以后，也可以打开一个内容的详情页面 .. 这里我们可以使用一种不同的方法 ..

先找到这个幻灯片里的这个了解更多按钮 .. 给它绑定一个 tap 事件 .. 事件的处理方法的名字是 readMore ..

然后再添加一个自定义的属性，data-id ... 对应的值是 item.id ... 这样我可以在事件处理方法里面得到被按的这个按钮上的 data-id 这个属性的值，然后可以利用这个值把用户带到对应的页面上 ..

readMore

打开这个页面的主逻辑文件 .. pages/index/index.js .. 这里添加一个方法 .. 名字是 readMore .. 事件处理方法都有一个 event 参数 ，表示事件 ..

它里面，可以用一下 wx.navigateTo 这个接口 .. 它可以在不关闭当前页面的情况下，把用户带到新的页面上 .. 在它的对象参数里，添加一个 url 属性 .. 对应的值就是一个页面的地址 .. 这里用一个字符模板 .. /pages/vehicles/show?id=${event.target.dataset.id}

预览

再到模拟器上试一下 .. 按一下幻灯片上的这个了解更多按钮 ... 会把用户带到这个内容的详情页上 ..

来自 https://ninghao.net/video/5206#info

预约试驾，这个功能需要配合后端服务接口才能用 .. 比如你可以用 WordPress，Drupal，Laravel，Rails 这些框架去为小程序提供一个后端服务接口 .. 在宁皓网你可以找到创建这些接口相关的课程 ..

我们先简单的处理一下 .. 找到这个预约试驾按钮 .. 绑定一个 tap 事件 .. 处理的方法是 testDrive ..

在页面的主逻辑里面，可以再添加一个 testDrive 方法 .. 它里面我们用一下 wx.showToast 这个接口方法 .. 在页面上显示一个反馈信息 ..

在它的对象参数里，添加一个 title，设置一下信息上的文字 .. 暂不支持 ..

再去预览一下 .. 点一下这个预约试驾 .. 会显示一个 暂不支持 ...

模块

这个功能我们还会在产品的详情页面上用到 .. 因为这里也有一个 预约试驾 按钮 .. 所以我们可以考虑把这个 testDrive 做成一个模块 ..

先把在这个页面上定义的 testDrie 剪切下来 .. 再去创建一个文件 .. 可以放在 modules 目录的下面，名字是 test-drive.js

里面添加一个 testDrive 方法 .. 下面可以导出这个方法 .. export default testDrive ..

回到这个页面 .. 在文件的顶部可以导入刚才定义的模块 ..

import testDrive from '../../modules/test-drive'

在这个页面的 Page 方法的对象参数里，可以直接添加一个 testDrive ..

再打开 vehicles 里的 show.js .. 同样导入 testDrive .. 在 Page 方法的对象参数里添加一个 testDrive .. 再打开 vehicles 下面的 show.wxml ..

找到页面上的预约试驾这个按钮 ... bind 一个 tap 事件 .. 用 testDrive 方法处理这个事件 ..

预览
下面可以再去预览一下 .. 先试一下首页上的 预约试驾 .. 会显示一个反馈信息 .. 再打开一个产品的详情页 ... 按一下上面这个 预约试驾 ... 同样会显示一个反馈信息 ..

这个事件处理方法现在会来自我们定义的一个模块 ..

来自  https://ninghao.net/video/5207#info

下面我们要做的一个故事列表页面 .. 先预览一下做好之后的样子 .. 这里我们还是在真实的手机上测试一下 .. 点一下预览 .. 然后打开手机上的微信 .. 扫一下这个二维码 ..

现在你看到的就是一个故事列表页面 .. 每个列表项目上面都有一张图片 .. 按下这个图片 .. 可以播放一个视频 ..

再按一下其它项目上的图片 .. 同样会播放视频 .. 同时之前播放的视频也会停止播放 .. 并且会显示出最开始的那张图片 ..

按一下项目上的内容 .. 会打开一个详情页面 .. 在这个页面上我们也可以播放页面上的这个视频 ..

来自 https://ninghao.net/video/5209#info

打开小程序的主配置文件 .. 调整一下 pages 里面的页面的顺序 .. 把 stories/index 这个页面放在第一的位置上，暂时让它当小程序的首页 ..

再去准备一下故事列表页面需要的数据 .. 打开它的逻辑文件 .. pages/stories/index.js .. 在它的 Page 方法的对象参数里，先添加一个 data .. 它里面可以添加一个 entities 属性，先让它的值等于 null ..

然后添加一个 onLoad 方法 .. 里面用一下 this.setData .. 设置的是 entities .. 对应的值是 app.globalData 下面的 stories ..

在上面再得到小程序实例 .. const app = getApp()

打开 assets 下面的 db.json .. 故事列表的数据是在 stories 里面 .. 每个项目都有个 id .. header 是大标题 .. original_header 是一个英文标题 .. description 是描述 .. original_description 是英文版的描述内容 ..

video 是视频地址，image 是一个图片地址 .. duration_raw 是视频的时长 .. 下面的 duration 是一个格式化之后的可以直接显示在界面上的时长 ..

视图

再去准备一下故事列表的视图 .. 打开页面的视图文件 .. pages/stories/index.wxml .. 这里我们可以用一下之前在首页上添加的卡片样式来显示这个故事列表 ..

可以打开 pages/index/index.wxml .. 找到这块用了卡片样式的视图 ..

复制一下 .. 然后把它粘贴到 stories 下面的 index.wxml 这个视图文件里 ..

再简单修改一下 .. 循环的数据都是 entities .. 按下项目打开的页面的地址是 /pages/stories/show 这个页面 ..

sub-header 可以先去掉 ...

现在页面上会出现一组故事内容 ..

来自  打开小程序的主配置文件 .. 调整一下 pages 里面的页面的顺序 .. 把 stories/index 这个页面放在第一的位置上，暂时让它当小程序的首页 ..

再去准备一下故事列表页面需要的数据 .. 打开它的逻辑文件 .. pages/stories/index.js .. 在它的 Page 方法的对象参数里，先添加一个 data .. 它里面可以添加一个 entities 属性，先让它的值等于 null ..

然后添加一个 onLoad 方法 .. 里面用一下 this.setData .. 设置的是 entities .. 对应的值是 app.globalData 下面的 stories ..

在上面再得到小程序实例 .. const app = getApp()

打开 assets 下面的 db.json .. 故事列表的数据是在 stories 里面 .. 每个项目都有个 id .. header 是大标题 .. original_header 是一个英文标题 .. description 是描述 .. original_description 是英文版的描述内容 ..

video 是视频地址，image 是一个图片地址 .. duration_raw 是视频的时长 .. 下面的 duration 是一个格式化之后的可以直接显示在界面上的时长 ..

视图

再去准备一下故事列表的视图 .. 打开页面的视图文件 .. pages/stories/index.wxml .. 这里我们可以用一下之前在首页上添加的卡片样式来显示这个故事列表 ..

可以打开 pages/index/index.wxml .. 找到这块用了卡片样式的视图 ..

复制一下 .. 然后把它粘贴到 stories 下面的 index.wxml 这个视图文件里 ..

再简单修改一下 .. 循环的数据都是 entities .. 按下项目打开的页面的地址是 /pages/stories/show 这个页面 ..

sub-header 可以先去掉 ...

现在页面上会出现一组故事内容 ..

在这个故事列表上，现在显示图片的这个地方我想显示的是视频 .. 我们可以直接把图片替换成视频 ... 不过不太好控制展示的样式 .. 这里可以用点方法，默认把视频隐藏起来 .. 按了图片以后，隐藏图片，把视频展示出来，并且播放视频 .. 我们还要实现，在这个列表页面上同时只能播放一个视频 ..

先打开故事列表页面视图 ... 在图片的上面，再添加一个 video 组件 .. 可以添加一个 poster 属性，设置一下默认显示的视频的截图 .. 这里可以用一下 item.image ..

src 是视频的地址 .. 绑定一个 item.video .. 然后添加一个 objectFit ，把它设置成 cover .. duration 是视频的时长 .. 绑定一个 item.duration_raw ..

现在每个故事项目都会显示一个视频，还有一个图片 ..

bindtap

我们可以先让下面的图片控制视频的播放 .. 在这个 image 组件上面，bind 和个 tap 事件 .. 处理的方法是 play .

在这个 video 组件上，可以再添加一个 id 属性 .. 它的值是 item.id .. 我们要用到这个 id 属性来控制视频的播放 ..

在 image 组件上再添加一个自定义的 data-vid 属性 .. 对应的值也是 item.id .. 在事件处理里面可以得到这个 vid 的值，然后我们就可以根据这个 vid 的值去控制视频的播放了 .. 因为这个 vid 的值跟视频组件上的 id 的值是一样的 ..

play

回到页面的主逻辑 .. 里面添加一个 play 方法 .. 一个 event 参数，表示事件 .. 在方法里，先添加一个 currentVideo .. 它的值我们可以用一下 wx.createVideoContext 这个接口 .. 把视频的 id 告诉它 .. 这里可以用一个字符模板 .. event.target.dataset.vid ..

现在我们就可以用这个 currentVideo 去控制播放视频了 .. 用一下它的 play() 这个方法 ..

预览

再到模拟器上预览一下 .. 点一下视频下面的这个图片 ... 会播放它上面的这个视频 ...

来自 https://ninghao.net/video/5211#info

按一下图片 .. 可以播放它上面的视频 .. 再找一个项目 .. 按一图片，同样会播放视频 .. 现在这个页面上同时会有两个视频播放 ..

我想改进一下，让同一页面同时只能播放一个视频 ..

打开这个页面的主逻辑文件 .. 在页面的数据里面，添加一个 currentVid .. 先让它等于 null .. 再添加一个 currentVideo .. 它的值也是 null ..

在改造一下这个 play 方法 .. 下面用一下 this.setData .. 设置一下页面上的 currentVideo .. 对应的值就是上面我们用 createVideoContext 创建的东西 .. 然后再把 currentVid ，设置成 event.target.dataset.vid .. 就是当前被按的图像上的 data-vid 属性的值 .. 这个值跟它上面的视频上的 id 是一样的 ..

每次点了图片，我们都重新设置一下这个 currentVid 的值 .. 在最上面，可以再判断一下 .. 如果 this.data.currentVid 不等于 null .. 我们就用一下 this.data.currentVideo 的 pause() 方法停止播放视频 ..

这里停止的就是上一个正在播放的视频 ..

预览

再去预览一下 .. 按一下图片 .. 会播放上面这个视频 ... 再找一个图片 .. 按一下 .. 同样会播放它上面的视频 .. 不过这次会停止之前播放的这个视频 ...

视图

现在我们再去改进一下故事列表视图 .. 先在 video 上面添加一个 hidden .. 绑定一个 hidden="{{ currentVid !== item.id }}" .. 如果当前播放的视频不是这个视频，我们就把视频组件隐藏起来 ..

在 image 上也得添加一个 hidden .. 绑定的是 {{ currentVid == item.id }} .. 意思就是，如果当前播放的视频是这个图片上面这个，就把这个图片隐藏起来 ..

预览

再到模拟器上预览一下 .. 按一下图片，会隐藏图片，显示并且播放视频 ... 再按一下其它的图片 .. 同样会播放视频 ..

同时之前播放的视频会停止 .. 显示出原来的图片 ..

来自  https://ninghao.net/video/5212#info

在这个图片的右下角我想显示一个表示视频时长的小标签 .. 打开页面的视图 .. 改造一下这个 image 组件 .. 添加一个关闭 .. 然后在它里面，包装一个 view .. 上面加个 label 类 .. 里面绑定输出一个 item.duration ..

下面再去添加点样式 .. 在 styles 下面，打开 card.wxss .. 添加一个 .card image .. 把 position 设置成 relative .. 然后让 card 下面的 .label 基于 image 绝对定位 ..

把 position 设置成 absolute .. bottom 是 8px .. right 也是 8px .. font-size 字号是 24rpx .. padding 添加点内边距 .. 上下是 4rpx .. 左右是 8rpx .. background 设置一下它的背景，用 rgba 表示 .. 颜色是黑色 .. 不透明度是 0.85 ..

再用 color 设置一下文字颜色 .. rgba .. 颜色是白色 .. 不透明度是 0.9 ..

最后可以再来点圆角效果 .. 大小是 2 个像素 ..

来自 https://ninghao.net/video/5213#info

现在开发者工具上会出现一些错误 .. 提示不能加载一些媒体资源 .. 这个是开发者工具本身的问题 .. 以后应该会得到修复 ..

按一下图片 ... 应该会播放视频 .. 但是在开发者的模拟器上没有播放视频 .. 这也应该是工具本身的 bug .. 因为我在手机上试的是没有问题的 ..

还有个小 bug 是我的失误 .. 你会发现按了图片以后，在控制台上会出现 pages/stories/show 这个页面还不存在 .. 这个页面的确还不存在 .. 我们会在后面的视频里去创建 ..

不过我不应该用 navigator 组件里面包含这个视频还有图片 .. 因为我想用户按了图片以后直接播放视频，不用打开视频的详情页面 ..

打开故事列表页面的视图 .. 找到这个 navigator 组件 ..

这里我们只用它包装一下文字内容 ..

再到模拟器上试一下 ... 现在按下图片的时候就不会提示找不到页面的错误了 ..

只有在按下面的文字内容的时候才会出现 .. 下面我们就去创建这个页面 ..

来自  https://ninghao.net/video/5215#info

按一下故事列表里的项目可以打开一个详情页面 .. 先去创建一个页面 .. 放在 pages/stories 的下面，添加一个 show.js .. 里面先得 app .. const app = getApp() ..

再用 Page 方法注册一个页面 .. 给它一个对象参数 .. 再去创建一个对应的视图文件 .. 也要把它放在 pages/stories 的下面，名字是 show.wxml ..

打开小程序的主配置 .. 在 pages 里面添加一个新的页面 .. pages/stories/show..

再去处理一下这个页面的主逻辑 .. 添加一个 data 属性 .. 里面再添加一个 entity .. 先让它等于 null .. 然后我们可以复制一块代码 .. 打开 vehicles 下面的 show.js .. 复制一下它的 onLoad 方法 ..

然后把它粘贴到 stories 的 show.js 里面 ..

把这个 app.globalData.vehicles ，换成 stories .

视图

再打开故事页面的视图 .. 编辑器上用了 emmet 插件以后可以用编写的形式去编写小程序的视图结构 ..

一个 view 加上 section 还有 hero 两个类，下面是一个 video ，同级别的还有 view.content.centered ，它的下面是一个 view.header 里面有个 view.sub-header ，跟 header 同级别的还有一个 view.description ..

view.section.hero>video+view.content.centered>(view.header>view.sub-header)+view.description

再用快捷键 shift + command + E .. 展开这个缩写 ... video 的 src 是 entity.video .. 再添加一个 poster，绑定一个 entity.poster .. objectFit 设置成 cover .. duration 是 entity 的 duration_raw .. 再把 controls 设置成 true ..

header 里面绑定一个 entity.header .. sub-header 里绑定一个 entity.original_header ..

description 里面是 entity.description ..

这里我们可以在这个 hero 上面再加点修饰 .. 添加一个 small ..

打开 styles 下面的 hero.wxss .. 添加一个 .hero.small 设置一下 .header .. 把字号设置的比原来小一点 .. 设置成 56rpx .. margin-bottom ，添加点下边距 .. 大小是 48rpx ..

再设置一下 .hero.small .sub-header .. 字号设置成 24rpx ..

预览

再到模拟器上预览一下 ..

按一下故事列表里的项目 .. 会打开一个故事的详情页面 ..

来自 https://ninghao.net/video/5217#info