微信小程序学习笔记（六）

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
}

星星的显示