微信小程序 #项目实践

一. 项目实践

1.在app.json中创建  pages/ranking/ranking的页面，并且为pages/index/index和pages/ranking/ranking这两个页面设置tabBar，示例代码如下：

2.创建首页轮播图

3.首页中分类及其包含的图书

第一步：在index.js的生命周期回调中获取相关的分类数据

第二步：将index.js中获取到的数据显示在WXML的页面中

1.首页分类及其图书列表的实现
2.图书详细信息的实现
A.在app.json的pages属性中创建pages/detail/detail的页面，用于呈现图书的详细信息
B、在index.wxml中为图书的缩略图及标题信息添加链接，示例代码如下：

<navigator url="/pages/detail/detail">
    <image src="http://statics.zhuishushenqi.com{{book.cover}}"></image>
    <view class="bookInfo">
        <view class="bookTitle">{{book.title}}</view>
        <view class="minorCate">{{book.minorCate}}</view>
        <view class="author">{{book.author}}</view>
    </view>
</navigator>
C.现在要在detail页面中显示图书的详细信息，而获取图书详细内容的接口地址是：

http://api.zhuishushenqi.com/book/{bookid}
而在如上的URL地址中，{bookid}代表了当前要查看的图书的ID信息，那么就代表在index页面中实现链接的时候，必须为detail页面传递图书ID的参数，然后再在detail页面中获取该 id参数，最后以该id并结合相关的API接口以获取图书的详细信息，故：
第一步：修改index页面中的链接 -- 为目标页面传递参数，示例代码如下：

<view class="bookItem" wx:for="{{item.books}}" wx:for-item="book" wx:for-index="key" wx:key="key">
	<navigator url="/pages/detail/detail?id={{book._id}}">
        ...
    </navigator>
</view>
第二步：在detail页面的onLoad()生命周期回调函数中获取id参数，示例代码如下：

onLoad: function (options) {
    //获取地址栏传递的URL参数
    let id = options.id;
    console.log(id);
}
第三步：使用相关的API接口以获取图书的详细信息，示例代码如下：

wx.request({
    url: 'https://api.zhuishushenqi.com/book/' + id,
    method:'GET',
    success:res=>{
        console.log(res.data);
        this.setData({
            bookInfo:res.data
        })
    }
})

第四步，在detail.wxml中通过双花括号语法进行相关内容的输出，示例代码如下：

<!-- 图书的基本信息开始 -->
<view class="book-info">
    <view class="book-image"><image mode="widthFix" src="http://statics.zhuishushenqi.com{{bookInfo.cover}}"/></view>
    <view class="book-text">
        <view class="book-text-subject">{{bookInfo.title}}</view>
        <view class="book-text-author">{{bookInfo.author}}</view>
        <view class="book-text-money">5书币/千字：{{bookInfo.wordCount}}字</view>
    </view>
</view>
<!-- 图书的基本信息结束 -->
<!-- 图书的简介信息开始 -->
<view class="description">
    <view class="description-title">简介</view>
    <view class="description-text">{{bookInfo.longIntro}}</view>
</view>
<!-- 图书的简介信息结束 -->

图书评论信息的显示
在查看图书的详细信息时，不仅要显示关于图书的相关信息，还要显示关于图书的评论信息，而图书的评论API接口地址为：

http://api.zhuishushenqi.com/post/review/by-book?book={bookid}&sort={sorttype}&start={start}&limit={limit}
所以在该接口中必须动态的来提供bookid参数，而bookid参数原来已经在onLoad()生命周期回调函数中已获取了。示例代码如下：

wx.request({
    url:'https://api.zhuishushenqi.com/post/review/by-book',
    method:'GET',
    //请求参数
    data:{
        book:id,
        sort:'updated',
        start:0,
        limit:10
    },
    success:res=>{
        console.log(res.data);
    }
})
此时需要将接口返回的数据更新到data中去，所以，success的回调函数需要修改为:
success:res=>{
	this.setData({
		reviews:res.data.reviews
	})
}

当得到数据后，现在在页面中要根据是否存在评论数据以决定是显示评论列表还是显示无评论的提示，此时需要进行判断即可，示例代码如下：

<view class="comments-list" wx:if="{{reviews.length}}">
    <!-- 单一评论开始 -->
	...        
    <!-- 单一评论结束 --> 
</view>
<view class="no-comment" wx:else>暂无评论,抢沙发</view>

此外，还需要将已获取到的评论信息进行循环输出，示例代码如下：

<!-- 单一评论开始 -->
    <view class="comment-item" wx:for="{{reviews}}" wx:key="index">
        <!-- 作者信息开始 -->
        <view class="comment-author">
            <image class="author-avatar" src="http://statics.zhuishushenqi.com{{item.author.avatar}}"></image>
<text class="author-nickname">{{item.author.nickname}}</text>
</view>
<!-- 作者信息结束 -->
    <!-- 评论标题开始 -->
    <view class="comment-subject">{{item.title}}</view>
<!-- 评论标题结束 -->
        <!-- 评论内容开始 -->
        <view class="comment-text">{{item.content}}</view>
<!-- 评论内容结束 -->
            </view>
<!-- 单一评论结束 -->