[TOC]
> 此版本为豪华版,在2.0版的基础上添加点击页面加载对应页面的图片(很酷)
## 1.在index.wxml添加点击事件
~~~
<import src="/template/movie-detail/movie-detail"></import>
<loading hidden="{{show}}"></loading>
<view class="container">
<block wx:for="{{data}}" wx:key="index">
<!-- 添加点击事件获取对应data属性id -->
<view class="content" bindtap='handleClick' data-id="{{item.id}}">
<template is="movieDetail" data="{{...item}}"></template>
</view>
</block>
</view>
~~~
## 2.在index.js添加点击函数(handleClick)
~~~
//index.js
//获取应用实例
const app = getApp()
Page({
data:{
show:false,
start: 0,
isEmpty: true
},
onLoad() {
var self = this;
wx.request({
url: 'http://douban.uieee.com/v2/movie/top250',
method: 'GET',
header: {
'Content-Type': 'json'
},
success: function (res) {
self.handleData(res);
}
})
},
handleData(res) {
//onLoad数据和onreachbottom数据
var totalData = [];
var data = [];
var subjects = res.data.subjects;
wx: for (const key in subjects) {
var imgUrl = subjects[key].images.small;
var name = subjects[key].title;
// 数据多了之后发现name太长会影响到页面的排版问题
if(name.length>8){
name = name.slice(0,8);
}
var average = subjects[key].rating.average;
// 新增id确定对应电影对应的id
var id = subjects[key].id;
var temp = {};
temp.name = name;
temp.imgUrl = imgUrl;
temp.average = average;
// 将id加入data内
temp.id = id;
data.push(temp);
};
this.setData({
data
});
if(!this.data.isEmpty){
totalData = this.data.data.concat(data);
this.setData({
data:totalData,
show: true
});
}else{
this.setData({
data: data,
show: true,
isEmpty: false
});
}
wx.hideNavigationBarLoading();
},
// 当页面滑到底部触发函数
onReachBottom:function(){
// 显示等待(在小程序头部)
wx.showNavigationBarLoading();
var self = this;
this.data.start+=20;
var url = "https://douban.uieee.com/v2/movie/top250";
var nextUrl = url+"?start="+this.data.start+"&count=20";
wx.request({
url: nextUrl,
header: {
'Content-Type': 'json'
},
success: function(res) {
self.handleData(res);
}
})
},
// 新增点击函数获取属性id值
handleClick(event){
var id = event.currentTarget.dataset.id;
// 页面间属性传递
wx.navigateTo({
url: '/pages/movie-detail/movie-detail?id='+id
})
}
})
~~~
## 3.添加电影详情页面movie-detail(用于存放对应电影的图片):"pages/movie-detail/movie-detail"
movie-detail.js写入
~~~
// pages/movie-detail/movie-detail.js
Page({
onLoad(option) {
var self = this;
var id = option.id;
console.log(option);
wx.request({
url: 'https://douban.uieee.com/v2/movie/' + id,
header: {
'Content-Type': 'json'
},
success: function (res) {
var imgUrl = res.data.image;
console.log(imgUrl);
self.setData({
imgUrl
})
}
})
}
})
~~~
movie-detail.wxml写入
~~~
<!--pages/movie-detail/movie-detail.wxml-->
<view>
<image src="{{imgUrl}}"></image>
</view>
~~~
## 4.其他版块与2.0版一致
- 小程序环境配置
- 1.生命周期
- 页面生命周期
- 组件生命周期
- 2.小程序组件
- 点击事件bindtap|catchtap
- swiper轮播
- wx:for循环
- 播放音乐
- map
- tabBar底部页面切换
- scroll-view可滚动视图区域。
- web-view装载显示网页
- priviewImage新页面预览照片
- chooseImage本地选择照片
- onReachBottom上拉刷新,加载等待条
- setStorage缓存
- showToast弹出提示框
- slot父组件wxml传递到子组件
- form表单
- 小程序.wxs,方法在.wxml调用
- 3.组件前身:模板、模板传参
- 4.自定义组件、组件传参|传wxss|wxml代码
- 5.小程序正则
- 6.小程序页面跳转
- 7.open-type 微信开放功能
- 实例
- 1.第一个实例 hello world
- 2.第二个实例豆瓣电影数据渲染
- 豆瓣1.0基本版
- 豆瓣2.0升级版
- 豆瓣3.0豪华版
- 3.第三个实例多接口在同一页面使用
- HTTP封装
- 基础报错提示,类式封装
- Promise回调,类式封装