### 1. 将发送http请求 星星的显示个数 封装在一个文件夹下的utils.js中
~~~
//app.js
创建全局变量
globalData:{
doubanUrl:"https://douban.uieee.com/v2/movie/"
}
});
使用方法
const app = getApp();
const douban = app.globalData.doubanUrl;
//utils.js 封装http函数 callback为回掉函数，传参时callback的名字可以自己起 要使用this.**（）调用 然后再后面写函数内容
function http(url, callback, type) {
wx.request({
url,
header: {
'Content-Type': 'json'
},
success: function (res) {
callback(res,type);
//返回请求的数据和传入的变量
}
});
}
星星的显示个数
function star(stars) {
var value = stars.slice(0, 1);
var arr = [];
for (let i = 0; i < 5; i++) {
if (i < value) {
arr.push(1);
} else {
arr.push(0);
}
}
return arr;
}
模块化es6语法：
导出
export default {
http,
star
}
~~~
### 2. 在显示页面的js中
~~~
// pages/movies/movies.js
const app = getApp();
const douban = app.globalData.doubanUrl;
//导出模块的使用
import utils from "../../utils/utils";
const http = utils.http;
var star = utils.star;
Page({
/**
* 页面的初始数据
*/
//data是用来装数据的可以装变量 a:null,可以装数组 arr：[], 可以装对象"a":{},对象里面可以装数组、变量
data: {
"in_theaters": {},
"coming_soon": {},
"top250": {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//加载时的加载动画 最后停止时用 wx.hideLoading();在onload函数中使用
wx.showLoading({
title:"加载数据"
});
var count = "?start=0&count=3";
var inTheatersUrl = douban + "in_theaters" + count;
var comingSoon = douban+"coming_soon"+count;
var top250 = douban+"top250"+count;
http(inTheatersUrl, this.handleData,"in_theaters");
http(comingSoon, this.handleData,"coming_soon");
http(top250, this.handleData,"top250");
},
handleData(res,type) {
var title = res.data.title;
var subjects = res.data.subjects;
var movies = [];
subjects.forEach(ele=>{
var average = ele.rating.average;
var stars = star(ele.rating.stars);
var title = ele.title;
var imgUrl = ele.images.small;
var temp = {
average,
stars,
title,
imgUrl
};
movies.push(temp);
})
//创建一个对象用来根据传入的不同变量来设置对象名和对象里的数据 因为上方的data中存放的是多个对象要使用对象的赋值方法
var readyData={};
readyData[type]= {
movies,
title,
type
};
this.setData(readyData);
wx.hideLoading();
},
// 跳转到更多页面 绑定一个点击事件 页面要加catchtap="more" data-type="{{type}}" data-title="{{title}}" 后面代表调转页面带两个参数
more(event){
var type = event.currentTarget.dataset.type;
var title = event.currentTarget.dataset.title;
wx.navigateTo({
url: 'movies-more/movies-more?type='+type+"&title="+title
});
}
})
~~~
### 3.显示页面的嵌套页面
~~~
//movies
<import src="movies-grid/movies-grid-template.wxml"></import>
<template is="moviesGridTemplate" data="{{...in_theaters}}"></template>
<template is="moviesGridTemplate" data="{{...coming_soon}}"></template>
<template is="moviesGridTemplate" data="{{...top250}}"></template>
@import "movies-grid/movies-grid-template.wxss";
page{
height:100%;
background: #eee;
}
//movies-grid-template
<import src="../movies-item/movies-item-template"></import>
<template name="moviesGridTemplate">
<view class="movies-grid">
<view class="more-title">
<text>{{title}}</text>
<text class="more" catchtap="more" data-type="{{type}}" data-title="{{title}}">更多</text>
</view>
<view class="movies-grid-item">
<block wx:for="{{movies}}" wx:key="index" >
<template is="moviesItemTemplate" data="{{...item}}"></template>
</block>
</view>
</view>
</template>
</template>
@import "../movies-item/movies-item-template.wxss";
.movies-grid{
display: flex;
flex-direction: column;
padding:16rpx;
background: #fff;
margin-top: 10px;
margin-bottom: 10px;
}
.more-title,.movies-grid-item{
display: flex;
justify-content:space-between;
margin-top: 10px;
margin-bottom: 10px;
}
.movies-grid text{
font-size: 25rpx;
}
.more{
cursor: pointer;
color:#405F80
}
//movies-item-template
<import src="../star/star-template"></import>
<template name="moviesItemTemplate">
<view class="movies-item">
<image src="{{imgUrl}}" class="banner" mode="aspectFit"></image>
<text class="head">{{title}}</text>
<view class="evaluate">
<template is="starTemplate" data="{{stars}}"></template><text>{{average}}</text>
</view>
</view>
</template>
@import "../star/star-template";
.movies-item .evaluate{
display: flex;
}
.movies-item{
display: flex;
flex-direction: column;
cursor: pointer;
}
.evaluate{
align-items: center;
}
.evaluate text{
margin-left:10rpx;
}
.movies-item>.banner{
width:230rpx;
height:300rpx;
}
.movies-item .head{
margin-top:10px;
margin-bottom: 10px;
}
//star-template
<template name="starTemplate">
<view class="star">
<block wx:for="{{stars}}">
<image wx:if="{{item==1}}" src="/images/icon/star.png"></image>
<image wx:else src="/images/icon/none-star.png"></image>
</block>
</view>
</template>
.star image{
width:20rpx;
height:20rpx;
}
.star{
display: flex;
}
//movies-more
// pages/movies/movies-more/movies-more.js
var douban = getApp().globalData.doubanUrl;
import utils from "../../../utils/utils";
var http = utils.http;
var star = utils.star;
Page({
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var type = options.type;
var title = options.title;
console.log(title);
var url = douban + type;
http(url, this.handleData);
/* 设置标题 */
wx.setNavigationBarTitle({
title
});
},
handleData(res) {
var title = res.data.title;
var subjects = res.data.subjects;
var movies = [];
subjects.forEach(ele => {
var average = ele.rating.average;
var stars = star(ele.rating.stars);
var title = ele.title;
var imgUrl = ele.images.small;
var temp = {
average,
stars,
title,
imgUrl
};
movies.push(temp);
})
this.setData({
movies,
title
})
}
})
wxml
<import src="../movies-item/movies-item-template"></import>
<view class='movies-more'>
<block wx:for="{{movies}}" wx:key="index" >
<template is="moviesItemTemplate" data="{{...item}}"></template>
</block>
</view>
@import "../movies-item/movies-item-template";
.movies-more{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.movies-more .movies-item{
margin: 15rpx auto 30rpx;
}
~~~
- 前期准备
- 软件安装配置
- 语法 以及 功能 的实现
- 小程序中的 轮播
- 翻转轮播
- 实现 跳转 页面
- 详谈 跳转页面
- for 循环 渲染 页面（重点）
- 点击 改变 元素内容
- 功能 封装(创建、使用 模板）（重点）
- js模块化（重点）
- if-else实现 三目运算
- 底部导航栏tabBar 实现
- 小程序中的 函数调用 方法
- 小程序中的 block 包裹元素
- 小程序中的 hover事件
- import 标签(重点）
- 其他
- 在本地模拟接口取数据
- 点击跳转 并将该元素的id一起传递给跳转的页面
- 点击详情页显示
- 点击事件（bindtap/catchtap）
- 图片的mode属性
- 跳转页面时实现顶部显示页面标题
- hello world
- 将豆瓣服务器接口设置在本地
- 组件
- 地图
- 下拉刷新
- 数据加载 loading...
- 动态设置导航（title设置）
- 实现js代码的模块化
- 传参
- 组件中的生命周期函数
- 实战
- 发送http请求
- 可用的豆瓣接口
- 处理豆瓣列表页的数据
- 从接口上取数据渲染到页面上1
- 从接口上取数据渲染页面实现瀑布流2
- 瀑布流
- 音乐播放
- 文章详情页
- 音乐播放组件
- 音乐播放 最终版
- 电影（封装取数据渲染）
- 分享与收藏
- 搜索框
- 将电影列表数据放缓存
- 零碎知识点
- 谈组件
- 请求封装 （重点）
- 实现简单需求的请求失败的封装
- 使用class实现显示各种错误信息
- 再次封装带class的请求实现改变里面给的url
- 使用promise 封装http
- promise
- generator
- 01.介绍
- 02. 基本
- 03. 实例
- 04.yield
- asyns
- 01. 介绍
- 02. 使用
- 03. 取豆瓣
- 子组件（模板文件）接收父组件传来的参数并改变其值
- 模块化
- 在模板中提取相同的部分behavior
- 字符串与数组之间的转换
- 子组件向父组件传参
- 谈 triggerEvent
- 整体展示
- 父组件向子组件传wxml （在两个组件比较相似的情况 定义卡 槽传 wxml）
- 传css （在父组件中定义子组件的样式）
- 使用wxs给wxml传js
- 点赞
- 小程序中的正则
- 组件中实现下拉刷新
- 用户授权
- 组件点击图片获取信息
- 说明
- 小程序上下滑动