本期主要内容
1.网络域名的配置
2.微信小程序异步获取服务器数据
3.豆瓣电影的项目实践
1.网络域名的配置
1.1 微信小程序访问外部数据时的限制
域名只支持 HTTPS
域名必须经过 ICP 备案
域名不能配置为本机 IP 地址
每个小程序最多配置 20 个域名
1.2 微信小程序访问外部数据时的域名配置
A.小程序后台-开发-开发设置-服务器域名
B.进行域名的配置
C.查看开发者工具是否正常启用配置的域名
2.微信小程序异步获取服务器数据
wx.request()方法用于发送HTTPS网络请求，其语法结构为：
wx.request({
url:"URL地址",
method:"请求方式(GET|POST|PUT|DELETE)",
data:"请求参数(string|object)",
header:{
//设置HTTP请求头信息
},
success:res=>{
//成功时调用的回调函数
},
fail:err=>{
//失败时调用的回调函数
},
complete:()=>{
//完成时调用的回调函数
}
})
content-type 默认为 application/json
3.豆瓣电影的项目实践
3.1 首页的实现
A.修改 app.json 实现标题的设置，代码如下：
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#0aa1ed",
"navigationBarTitleText": "学子影院",
"navigationBarTextStyle":"white"
}
B.修改app.json，添加tabBar属性实现底部选项卡的业务功能，示例代码如下：
"tabBar": {
"color":"#888",
"selectedColor":"#0aa1ed",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"images/home_disabled.png",
"selectedIconPath":"images/home_enabled.png"
},
{
"pagePath":"pages/ranking/ranking",
"text":"排行榜",
"iconPath":"images/ranking_disabled.png",
"selectedIconPath":"images/ranking_enabled.png"
}
]
}
因为底部选项卡需要两个页面，所以还需要在pages属性中指定另一个页面的路径，示例代码如下：
"pages": [
"pages/index/index",
"pages/ranking/ranking",
"pages/logs/logs"
]
C.修改app.wxss设置全局样式，示例代码如下：
/**app.wxss**/
.container {
height: 100%;
}
page{
width: 100%;
height: 100%;
background-color: #f9f9f9;
}
3.2 豆瓣电影API
以正在上映为例（注意：这是豆瓣电影返回的数据）：
{
//电影信息列表
subjects:[
{
alt:"当前影片的详情的URL地址",
title:"当前影片的名称",
year:"上映年份",
images:{
small:"当前影片的小图URL地址",
medium:"当前影片的中图URL地址",
large:"当前影片的大图URL地址"
},
rating:{
average:数字(当前影片的评分)
}
}
],
title:"当前访问的API的标题信息"
}
3.3 首页轮播图的实现 第一步：从豆瓣电影的官网中异步获取相关的数据
A.确定在什么情况下向豆瓣电影的官网发送异步请求 -- 首页的onLoad事件 示例代码如下：
onLoad(options){
//获取轮播图数据 -- 是豆瓣电影的正在上映的影片
wx.request({
url: 'https://api.douban.com/v2/movie/new_movies?apikey=0df993c66c0c636e29ecbb5344252a4a',
method:'GET',
header:{
'content-type':'application/x-www-form-urlencoded'
},
success:res=>{
console.log(res.data);
}
});
}
因为微信小程序默认在请求时，请求头的类型为json类型，而豆瓣电影官网只接受
application/x-www-form-urlencoded类型的请求，故要修改之。
为了保证能够在wxml文件中进行遍历操作，所以将需要返回的数据保证起来，故需要在data中声明一个属性，示例代码如下：
data:{
//用于保存轮播图数据
swiperArray:[]
}
B.当服务器返回结果后，就应该将返回的数据存储到刚刚的swiperArray数组中，示例代码如下：
success:res=>{
this.setData({
//res.data指服务器的返回数据
//subjects是返回数据的组成成员(豆瓣电影官网规定的)
swiperArray:res.data.subjects
});
}
第二步：在index.wxml中遍历相关的数据，形成轮播图效果，示例代码如下：
<!-- 顶部轮播图开始 -->
<view class="swiper">
<swiper autoplay="true" indicator-dots="true" indicator-active-color="#fff" circular="true">
<swiper-item wx:for="{{swiperArray}}" wx:key="index">
<image src="{{item.images.large}}"></image>
</swiper-item>
</swiper>
</view>
<!-- 顶部轮播图结束 -->
3.4 首页中其他版块的实现
首页中其他版块包括：即将上映的影片、正在热映的影片、Top250的影片 版块的结构代码如下：
<!-- 影片版块开始 -->
<view class="board">
<!-- 标题信息开始 -->
<view class="board-title">即将上映的影片</view>
<!-- 标题信息结束 -->
<!-- 影片列表开始 -->
<view class="movie-list">
<!-- 单一影片开始 -->
<view class="movie-item">
<image src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2591289975.webp"></image>
<text>电影1</text>
</view>
<!-- 单一影片结束 -->
</view>
<!-- 影片列表结束 -->
</view>
<!-- 影片版块结束 -->
如何获取相关版块的数据或者说先分析豆瓣电影的API接口的地址：
每个版块在获取相关的数据的时候可能需要指定参数，如start表示从第几条记录开始返回，count表示返回多少条记录。
以"即将上映的影片"为例
第一步：从豆瓣电影官网异步获取即将上映的影片数据，API地址参见文档
说明：即将上映和最新热映的影片只获取前4个，而TOP250则获取前12个 同样需要在首页的onLoad()钩子函数触发时异步发送请求，代码如下：
//获取即将上映的影片数据 -- 只返回前4条
wx.request({
url: 'https://api.douban.com/v2/movie/coming_soon?apikey=0df993c66c0c636e29ecbb5344252a4a',
method:'GET',
data:{
start:0,
count:4
},
header:{
'content-type':'application/x-www-form-urlencoded'
},
success:res=>{
//console.log(res.data.subjects);
this.setData({
coming_soon:res.data.subjects
});
}
});
上述代码中的coming_soon变量的使用，也就意味着必须在data中声明才可以，示例代码如下：
data:{
coming_soon:[]
}
第二步：将获取的数据通过循环结构在WXML的页面中输出，代码如下：
<!-- 即将上映的影片版块开始 -->
<view class="board">
<!-- 标题信息开始 -->
<view class="board-title">即将上映的影片</view>
<!-- 标题信息结束 -->
<!-- 影片列表开始 -->
<view class="movie-list">
<!-- 单一影片开始 -->
<view class="movie-item" wx:for="{{coming_soon}}" wx:key="index">
<navigator url="/pages/detail/detail?id={{item.id}}">
<image src="{{item.images.large}}"></image>
<text>{{item.title}}</text>
</navigator>
</view>
<!-- 单一影片结束 -->
</view>
<!-- 影片列表结束 -->
</view>
<!-- 即将上映的影片版块结束 -->
