小程序开发-12-组件高级应用

Posted 甜珊贝奇

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序开发-12-组件高级应用相关的知识,希望对你有一定的参考价值。

图书组件的实现

有一个知识点要注意,就是在container容器里面的position要为relative,否则在container里的description设置为absolute,bottom为0时会位于整个页面最底部

.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;
}

.container .description {
box-sizing: border-box;
width: 100%;
position: absolute;
bottom: 0;
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: #666666;
}

列表渲染

使用wx:for

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

block组件不会在页面进行显示,只接受控制属性,如wx:if,wx:for等

书籍页面布局

wxml代码

<!-- for 循环 wx:for -->
<view wx:if="{{!searching}}" class="container">
 <view class="header">
     <view class='box' bind:tap="onSearching">
         <image src="/images/icon/search.png" />
         <text>搜索书籍</text>
     </view>
 </view>
 <view class="sub-container">
     <image class="head-img" src="/images/book/quality.png" />
     <view class="books-container">
         <block wx:key="{{id}}" wx:for="{{books}}">
             <wzh-book book="{{item}}" />
         </block>
     </view>
 </view>
</view>

<wzh-search more="{{more}}" bind:cancel="onCancel" wx:else/>

wxss代码

.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;
}

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

.header {
 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: 99;
}

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

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

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

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

wx: key的用法和意义

当使用wx:for的时候微信会提示使用wx:key来提升性能

用法一,数据为对象

  • 当wx:for传入的数据为object对象时,key要满足两个条件:不重复、数字和字符串

用法二,数据为字符串或者数字

  • wx:key="*this"

项目型组件与通用性

页面如何从外部接收数据

onLoad(options){
 //id
 const id = options.id;
}

点击单本图书后跳转

//组件内代码
methods: {
 onTap: function(e){
     const id = this.properties.book.id;
     wx.navigateTo({
         url: `/pages/book-detail/book-detail?bid=${id}`,
     })
 }
}

组件跳转的优缺点

? 避免了要写组件传递给页面的triggerEvent事件,但是降低了组件通用性

如何取舍

? 服务于当前的项目,即项目组件。一般的都是用triggerEvent事件通知页面,使页面进行跳转。

书籍详情页面三组数据加载

获取三部分数据,获取书籍详细信息、短评信息、点赞情况

组件设计思想:slot插槽的应用

组件wxml内的代码

<view bind:tap="onTap" class="container tag-class">
 <slot name="before"></slot>//定义插槽1
 <text >{{text}}</text>
 <slot name="after"></slot> //定义插槽2
</view>

page页面引用组件,并放入插槽

<wzh-tag text="{{item.content}}">
 <text slot="after" class='num'>{{'+'+item.nums}}</text>
</wzh-tag>  //注意引用一定要要闭合

组件内启用插槽

Component({
 options: {
     multipleSlots: true //此处为多个solt启用
 },
 properties:{
     ....
 }
 ....
})

当引用一个插槽的时候,组件内可以不用开启solt,同时不用写插槽的name属性

自定义组件样式探讨一:hack方式

子元素选择器,但违反了组件的封装原则

.comment-container > wzh-tag:nth-child(1) > view{
background-color: #fffbdd;
}
//奇数项着色
.comment-container > wzh-tag:nth-child(odd) > view{
background-color: #fffbdd;
}

自定义组件探讨二:外部样式的概念

样式的传递,由小程序内部的机制实现,但不是所有的样式都可以传递

//组件内js代码
Component({
 externalClasses: ['tag-class'],//激活外部样式传递
 properties: {
     ....
 },
 ...
})
//组件wxml代码
<view bind:tap="onTap" class="container tag-class"> //普通样式 外部样式
 <!-- <slot name="before"></slot> -->
 <text >{{text}}</text>
 <slot></slot>
</view>
//page页wxml引用
<v-tag tag-class="ex-tag"/>
  ...
</v-tag>
//page页wxss代码
.ex-tag{
 ....
}

注意:tag-class不能覆盖container中的样式,必须要强制覆盖普通样式,可以用!important

外部样式类的使用技巧

组件wxml内的代码
<v-tag wx:for="{{comments}}" tag-class="{{index===0?ex-tag1:''||index===1?ex-tag2:''}}">
  ...
</v-tag>

以上是关于小程序开发-12-组件高级应用的主要内容,如果未能解决你的问题,请参考以下文章

小程序·巧应用,微信小程序开发实战

小程序+巧应用-微信小程序开发实战pdf

微信小程序开发--模板(template)使用,数据加载,点击交互

微信小程序开发之代码提示插件(VSCode)

小程序开发 组件定义(封装)组件调用父子组件方法调用父子组件传值通讯

微信小程序开发---自定义组件