微信小程序之组件的集合（四）

　　这个主要是来开发book的这个大模块的，看看如何优雅的开发出booked模块！

一、book模块的创建

这个就很简单了，创建一个大的框架是很简单的

二、组件的编写

（1）wxml组件页面的编码

首先是将一本书的展示看做是一个组件，然后就是循环展示所有请求的书籍的信息，所以需要把一本书当做一个组件来制作，这样就能比较合理的解决这个问题！

 // book组件的页面的代码
 <view class="container">
   <image src="{{book.image}}"></image>
   <view class="description">
     <text class="title">{{book.title}}</text>
     <text class="author">{{book.author}}</text>
     <view class="foot">
       <text class="footer">{{book.fav_nums}} 喜欢</text>
     </view>
   </view>
 </view>

将这个book组件引用到page中去，给用户展示书籍的信息，需要在book.json 中引入，并且将组件的写到book.wxml页面代码中，这里暂时只是展示一个book组件

 // page中的book.json 中引入book组件
 {
   "usingComponents": {
     "v-book":"/components/book/index"
   }
 }

 // page中的book.wxml中引入v-book标签
 <v-book book="{{books[0]}}" />

 // page中的book.js中操作数据，将数据传递到页面属性中，只写主要的生命周期函数
 import {
   BookModel
 } from '../../models/book.js';

 // 实例化BookModel对象
 const bookModel = new BookModel();

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     // 服务器请求的数据 book的集合
     books:[]
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function(options) {
     // 这种写法才能规避回调地狱的
     bookModel.getHotList()
     .then(res => {
       // 这种写法不完善 只是做了赋值 页面无法获取到
       // this.data.books = res
       this.setData({
         books:res
       })
     })

   },

（2）book组件样式的编码

这个啊，让人头疼的，我是写不出来，哈哈

 .container{
   margin-top: 30rpx;
   display: flex;
   position: relative;
   box-shadow: 2px 2px 3px #e3e3e3;
   flex-direction: column;
   width: 240rpx;
   height: 360rpx;
 }

 /* 书籍封面的样式 */
 .container image {
   width: 100%;
   height: 100%;
   border-radius: 2px;
 }

 .description{
   width: 216rpx;
   position: absolute;
   bottom:;
   background-color: #fff;
   padding: 5rpx 10rpx 8rpx 15rpx;
   font-size: 24rpx;
   display: flex;
   flex-direction: column;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }

 .title{
   margin-top: 10rpx;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }

 .author{
   font-size: 20rpx;
   color: #999999;
   margin-bottom: 10rpx;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }

 .foot{
   font-size: 20rpx;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
 }

 .footer{
   color:
 }

三、组件的应用

因为书籍是使用的一组的书籍组件，如何来把服务器上传回来的所有的书籍信息全部显示出来，这个就是我们需要考虑的，需要完成的

小程序中肯定是存在类似for循环的，那就是wx:for 但是在小程序中并不是叫做for循环，而是叫做列表渲染

（1）列表渲染

 <block wx:for="{{books}}">
   <v-book book="{{item}}" />
 </block>

（2）整体页面布局

这个就是pages中的book页面的代码了，主题包含一个搜索栏，以及下面的图书列表

 <view class="container">
   <view class="header">
     <view class="box">
       <image src="/images/icon/search.png"></image>
       <text>搜索书籍</text>
     </view>
   </view>
   <view class="sub-container">
     <image src="/images/book/quality.png" class="head-img"></image>
     <view class="books-container">
       <block wx:for="{{books}}">
         <v-book book="{{item}}" />
       </block>
     </view>
   </view>
 </view>

（3）整体的样式代码

看一下如何设计样式来让这个页面看起来那么舒服，这是最难的吧，充分灵活的使用flex布局来实现这样的样式

 .container{
   display: flex;
   flex-direction: column;
   align-items: center;
   width:100%;
 }

  .sub-container{
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: #f5f5f5;
   margin-top:100rpx;
   /* z-index:0;  */
 } 

 .books-container{
   margin-top:10rpx;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding: 0 90rpx 0 90rpx;
   justify-content: space-between;
 }

 .books-container v-book{
   margin-bottom: 30rpx;
 }

 .box{
   display:flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   border-radius: 50px;
   background-color: #f5f5f5;
   height: 34px;
   width:700rpx;
   color:#999999;
 }

 .header{
   /* fixed 是使得容器固定 */
   position: fixed;
   background-color: #ffffff;
   height:100rpx;
   width:100%;
   border-top:1px solid #f5f5f5;
   border-bottom:1px solid #f5f5f5;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   box-shadow:0 0 3px 0 #e3e3e3;
   z-index:;
 }

 .head-img{
   width:106rpx;
   height:34rpx;
   margin-top:40rpx;
 }

 .box image{
   margin-right:10px;
   width:14px;
   height:14px;
   margin-bottom:-2px;
 }

四、book组件中业务逻辑的实现

这个主要是实现功能就是从book列表页面用户直接点击之后，跳转到书籍的详细信息的页面，这个该如何实现，是在组件中实现跳转逻辑，还是在页面上实现，如何取舍，如何选择，是选择组件的通用性呢？还是选择组件的设计实现简单呢？如何来写这个逻辑代码？

1、不考虑组件的通用性

不考虑组件通用性的话，就直接在组件中实现页面的跳转就OK了，具体的实现代码如下：

 // 组件中的wxml文件
 <view bind:tap="onTap" class="container">
 </view>

 // 组件中的js文件 小程序中的navigateTo实现跳转
   methods: {
     onTap(event){
       const bid = this.properties.book.id;
       wx.navigateTo({
         url: `/pages/book-detail/book-detail?bid=${bid}`,
       })
     }
   }

2、考虑组件通用性的

五、book详细信息的开发

1、小程序中的编译模式

为了方便开发，让小程序每次编译之后都会是书籍详细信息的页面，我们可以添加编译模式，来控制编译之后的启动页面，这样有利于提高开发效率：

选择自己定义的编译模式：

2、具体book详情页面的开发

首先把详情页面的样式也页面的代码进行编写，这里就是没有按照顺序来整理出来代码，直接把完整的代码都拿出来吧

首先是详情页面的wxml文件中静态页面代码：（这里不是完整的，下面的点评功能没有实现）

 <wxs src="../../util/filter.wxs" module="util"/>
 <view class="container">
   <!-- 头部信息 -->
   <view class="head">
     <image src="{{book.image}}"></image>
     <text class="title">{{book.title}}</text>
     <text class="author">{{book.author}}</text>
   </view>
   <!-- 短评 -->
   <view class="sub-container">
     <text class="headline">短评</text>
     <view class="comment-container">
       <block wx:for="{{util.limit(comments,10)}}" wx:key="">
         <v-tag tag-class="{{index==0?'ex-tag1':'' || index==1?'ex-tag2':''}}" text="{{item.content}}">
           <text class="num" slot="after">{{"+" + item.nums}}</text>
         </v-tag>
       </block>
     </view>
     <!-- 内容简介 -->
     <view class="sub-container">
       <text class="heading">内容简介</text>
       <text class="content" decode="{{true}}">{{util.format(book.summary)}}</text>
     </view>
   </view>
   <!-- 书籍出版信息 -->
   <view class="sub-container">
     <text class="heading">书籍信息</text>
     <view class="detail-container">
       <view class="vertical description">
         <text>出版社</text>
         <text>出版年</text>
         <text>页数</text>
         <text>定价</text>
         <text>装帧</text>
       </view>
       <view class="vertical">
         <text>{{book.publisher}}</text>
         <text>{{book.pubdate}}</text>
         <text>{{book.pages}}</text>
         <text>{{book.price}}</text>
         <text>{{book.binding}}</text>
       </view>
     </view>
   </view>
 </view>·

接下来是wxss样式的代码：

 .container {
   background-color: #f5f5f5;
   width: 100%;
 }

 .head {
   background-color: #fff;
   padding-top: 40rpx;
   padding-bottom: 40rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .title {
   color: #2f2f2f;
   margin-top: 20rpx;
   font-size: 38rpx;
   font-weight:;
 }

 .author {
   font-size: 28rpx;
   color: #999;
 }

 .head image {
   width: 200rpx;
   height: 300rpx;
   box-shadow: 2px 2px 3px #e3e3e3;
 }

 .sub-container {
   width: 690rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 30rpx;
   background-color: #fff;
   padding: 30rpx;
 }

 .headline {
   font-size: 30rpx;
   font-weight:;
   color: #2f2f2f;
   margin-bottom: 20rpx;
 }

 .comment-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }

 .comment-container v-tag {
   margin-right: 15rpx;
   margin-bottom: 10rpx;
 }

 .num {
   margin-left: 10rpx;
   font-size: 22rpx;
   color: #aaa;
 }

 .content{
   text-indent: 58rpx;
   font-weight: 500
 }

 /* 给标签前两个设置背景色 这种设置违背了组件的封装原则的*/

 /* 这里引入了小程序中的externalClasses来进行自定义组件的样式的设置 */

 /* .comment-container > v-tag:nth-child(1) > view{
   background-color: #fffbdd;
 }

 .comment-container > v-tag:nth-child(2) > view{
   background-color: #eefbff;
 } */

 /* !important 强制提高外部样式的权限 */

 .ex-tag1 {
   background-color: #fffbdd !important;
 }

 .ex-tag2 {
   background-color: #eefbff !important;
 }

 /* 书籍出版信息样式 */
 .detail-container{
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   margin-bottom: 100rpx;
   font-size: 28rpx;
   color: #666;
 }

 .vertical{
   display: flex;
   flex-direction: column;
 }

 .description{
   color: #999;
   margin-right: 30rpx;
 }

最后是book详情页面的js代码：

 import {
   BookModel
 } from '../../models/book.js';

 // 实例化BookModel对象
 const bookModel = new BookModel();

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     comments:[],
     book:null,
     likeStatus:false,
     likeCount:0
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
     // 从外部页面传递过来的参数id
     const bid = options.bid;
     console.log(bid);
     const detail = bookModel.getDetail(bid);
     const comments = bookModel.getComments(bid);
     const likeStatus = bookModel.getLikeStatus(bid);

     // 利用promise的then的回调获取数据
     detail.then(res => {
       // console.log(res);
       this.setData({
         book:res
       })
     })

     comments.then(res => {
       // console.log(res);
       this.setData({
         comments:res.comments
       })
     })

     likeStatus.then(res =>{
       // console.log(res);
       this.setData({
         likeStatus:res.like_status,
         likeCount:res.fav_nums
       })
     })

   },

 3、小程序插槽slot

这里的插槽很适合来做自定义组件的，这种用法非诚灵活，感觉真的有一种美妙的感觉-slot的官方介绍：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#组件wxml的slot

其实文档中已经写的很清楚了，但是还是看一下老师的讲解，毕竟在实战中引用才是最重要的，如何将理论的东西应用到实战中，是很值得思考的东西

 <view class="container">
   <slot name="before"></slot>
   <text>{{text}}</text>
   <!-- 微信小程序中的 插槽 slot -->
   <slot name="after"></slot>
 </view>

这个其实就相当于占位符，我事先在这里占有一个位置，随时等待有人来占有这个地方，但是如果没人来占，对总体的布局也不会产生影响，有人的话，我就要把这个人给你们展示出来了，这个人就和组件中的其他的标签融为一体了，注意这里需要指定slot的name值，因为在page中是需要根据name值来找具体哪个slot的

看page中如何插入到插槽中slot的：

   <view class="sub-container">
     <text class="headline">短评</text>
     <view class="comment-container">
       <block wx:for="{{comments}}" wx:key="">
         <v-tag text="{{item.content}}">
           <text class="num" slot="after">{{"+" + item.nums}}</text>
         </v-tag>
       </block>
     </view>

这里是将text标签插入到插槽中，那么插槽中就会被一个text标签完全的占有了，你看到就是text标签中的内容了

但是，这样的话，slot并不会生效，需要在配置一个参数，就是：

   options: {
     multipleSlots:true
   },

这样的话，才能实现slot的功能

4、小程序中的externalClasses

这个是说的是小程序中的自定义组件如何来引入外部样式类，就是如何将page中的样式放入到自定义组件中，使其生效，小程序提供了externalClasses这个配置，可以应用这个设置来解决这个问题

小程序中国的官方的介绍文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#外部样式类

还是来看一下这个东西是如何在实战中应用的：

首先，看自定义组件中需要设置哪些地方：

 // 首先是需要设置 js中配置
   externalClasses:[
     'tag-class'
   ],

 // 其次是需要在页面中使用这个自定义class
 <!-- tag标签组件 短评以及搜索中的标签组件 -->
 <view class="container tag-class">
   <slot name="before"></slot>
   <text>{{text}}</text>
   <!-- 微信小程序中的 插槽 slot -->
   <slot name="after"></slot>
 </view>

这样的话，我们就可以在使用自定义标签的时候来传递样式进去了

 // 这里面有一个样式的切换 第一个和第二个分别展示不同的背景色
 <view class="sub-container">
     <text class="headline">短评</text>
     <view class="comment-container">
       <block wx:for="{{comments}}" wx:key="">
         <v-tag tag-class="{{index==0?'ex-tag1':'' || index==1?'ex-tag2':''}}" text="{{item.content}}">
           <text class="num" slot="after">{{"+" + item.nums}}</text>
         </v-tag>
       </block>
     </view>

再来看一下ex-tag1与ex-tag2的样式设置

 .ex-tag1 {
   background-color: #fffbdd !important;
 }

 .ex-tag2 {
   background-color: #eefbff !important;
 }

注意：!important 这里是提高该样式的重要性的，如果没有的话，虽然外部样式已经设置进去了，但是可能会被默认的样式覆盖的，这里为了强制覆盖默认样式而进行的设置

 5、小程序中的wxs

这个文件的主要功能就是在wxml文件中可以调用外部的js代码，当然js代码是放在wxs文件中的，看看这个新的知识点是如何来实现的，官方文档：

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

开始编写逻辑代码：

 // filter.wxs文件中代码 注意model.exports导出 var关键字 正则替换写法
 var format = function(text){
   if(!text){
     return
   }
   var reg = getRegExp('\\\\n','g');
   return text.replace(reg,'\n     ');

 }

 module.exports = {
   format:format
 }

 // 页面中的引入代码
 <wxs src="../../util/filter.wxs" module="util"/>
 // 标签中使用
 <text class="content" decode="{{true}}">{{util.format(book.summary)}}</text>

内容出处：七月老师《纯正商业级小程序开发》视频课程

视频课程链接：https://coding.imooc.com/class/251.html