tabBar组件-tap选项卡
这个有坑,必须说下:
①list
方法是定义选项卡
②list
方法里的pagePath
属性是绑定选项卡页面
③选项卡页面无法通过 wx.redirectTo
或者 wx.navigateTo
跳转
选项卡页面无法打开原因:
navigateTo
和 redirectTo
只能打开非 tabBar 页面。
选项卡页面无法跳转的解决办法:
①使用 reLaunch
可以打开任意页面。
②使用 switchTab
只能打开 tabBar 页面。
"tabBar": {
"borderStyle": "white",
"position": "bottom",
"list": [
{
"pagePath": "pages/posts/post",
"text": "阅读",
"iconPath": "/images/tab/yuedu.png",
"selectedIconPath": "images/tab/yuedu_hl.png"
},
{
"pagePath": "pages/movies/movies",
"text": "电影",
"iconPath": "/images/tab/dianying.png",
"selectedIconPath": "images/tab/dianying_hl.png"
}
]
}
豆瓣API调用以及五星评分组件
豆瓣API
var util = require('../utils/util.js') //引入五星组件
var app = getApp(); //引入app.js
Page({
// RESTFul API JSON
// SOAP XML
// 粒度
data: {
inTheaters: {}, // 获取setData异步数据绑定,movies中对应的Json对象
comingSoon: {},
top250: {}
},
onLoad:function(event){
// API地址与函数声明
var inTheatersUrl = app.globalData.doubanBase + "/v2/movie/in_theaters" + "?start=0&count=3";
var comingSoonUrl = app.globalData.doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";
var top250Url = app.globalData.doubanBase + "/v2/movie/top250" + "?start=0&count=3";
//输出参数
this.getMovieListDate(inTheatersUrl,"inTheaters","正在热映");
this.getMovieListDate(comingSoonUrl,"comingSoon","即将上映");
this.getMovieListDate(top250Url,"top250","豆瓣top250");
},
getMovieListDate: function (url, settedKey, categoryTitle){//传入参数
var that = this;
//访问API
wx.request({
url: url,
method: 'GET', // OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
header: {
// 设置请求的header
"Content-Type": "application/json"
},
success: function (res) {
// success
console.log(res)
that.processDoubanData(res.data, settedKey, categoryTitle)
},
fail: function () {
// fail 网络无法请求时运行
}
})
},
// 获取api数据
processDoubanData: function (moviesDouban, settedKey, categoryTitle){
var movies = [];
for(var idx in moviesDouban.subjects){ // 遍历subjects(请求的数据)
var subject = moviesDouban.subjects[idx]; //获取遍历的数据
var title = subject.title; // 获取标题
if(title.length >= 6){ // 判断标题长度
// substring提取字符串中介于两个指定下标之间的字符
title = title.substring(0, 6) + "...";
}
var temp= { // 封装获取的数据为Json对象
// 把subject.rating.stars传参给util.convertToStarsArray
// subject.rating.stars是豆瓣API传进来的星级评分数据
stars: util.convertToStarsArray(subject.rating.stars),
title:title, // 标题
average: subject.rating.average, // 电影评分
coverageUrl: subject.images.large, // 图片
movieId: subject.id // 电影ID用于跳转
}
movies.push(temp) //把封装的json对象添加到movies数组
}
var readyData = {};
readyData[settedKey] = {//动态赋值
categoryTitle: categoryTitle,// 需要传出给template的一些值,数据绑定到setdata
movies: movies // 做成json对象,展开对象数据
}
this.setData(readyData);
}
})
五星组件
function convertToStarsArray(stars){
//toString() 方法可把一个逻辑值转换为字符串,并返回结果。
//substring() 方法用于提取字符串中介于两个指定下标之间的字符
var num = stars.toString().substring(0, 1); //获取stars第一个数字
var array = [];// 定义存储用的数组
for(var i = 1; i<= 5; i++){ //循环获取星星真假
//比较num与i的大小,比较五次,每次num大于i则输出一个真
if(i<=num){
array.push(1);
}
else{
array.push(0);
}
}
return array; //返回给convertToStarsArray
}
module.exports = {
convertToStarsArray:convertToStarsArray
}
星星的显示
<template name="starsTemplate">
<view class="stars-container">
<view class='stars'>
<!-- // wx:for循环遍历数组
// wx:for-item 给列表赋别名 -->
<block wx:for="{{stars}}" wx:for-item="i">
<!--判断输出哪张图片-->
<image wx:if="{{i}}" src="/images/icon/star.png"></image>
<image wx:else src="/images/icon/none-star.png"></image>
<!-- 其他写法 -->
<!-- <image wx:if="{{i==1}}"></image>
<image wx:elif="{{i==2}}"></image>
<image wx:elif="{{i==3}}"></image>
<image wx:else></image> -->
</block>
</view>
<text class="star-score">{{score}}</text>
</view>
</template>