### 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
- 點贊
- 小程序中的正則
- 組件中實現下拉刷新
- 用戶授權
- 組件點擊圖片獲取信息
- 說明
- 小程序上下滑動