【项目学习】微信小程序开发问题汇总及解决

一.slot的使用

从外部传入标签显示在slot标签中

1.name=“ ”一致

2.想在组件内部显示 则不能用单标签 写在双标签内部

//pages
<v-tag text="{{item.content}}">
	<text class="num" slot="after">{{'+'+item.nums}}</text>
</v-tag>
//components
<slot name="after"><slot>
  //js
Component({
    /**
     * 组件的属性列表
     */
    options: {
      multipleSlots: true//启用slot
    },
  })

二.自定义组件样式的探讨

1.运用css选择器

运用css选择器，选择标签的第一个和第二个，进行样式的修改

1.1问题

1.1.1 样式没有生效

首先 v-tag是自定义组件，我们平常写样式、内置组件

自定义组件 设置css无效 要选择内置组件

//生效
.comment-container :nth-child(1) view {
  background-color: #fffbbb;
}

1.1.2 子元素 选择器 后代选择的区别

//推荐 精准 安全 不会影响其他元素
.comment-container>:nth-child(1)>view {
  background-color: #fffbbb;
}

Hack?

1.1.3 开源组件

平衡 默认样式和自定义样式

为组件找到一套不违反组件封装原则的样式

不违反eg：属性，slot

用户通过参数传递改

不推荐内联样式 绑定数据

通过小程序 css和js的机制

小程序内部有一个 externalClass 是第三种不违反组件封装的机制

标签之间有间距 并且自动换行

/* 如果不设置felx布局，margin无法生效 */

普通样式

外部样式 从组件外部传入的class

如果使用外部样式，那就所有的样式从外部传进来

因为普通样式和外部样式无法分辨谁覆盖谁 由于机制

相比较而言，还是hack方式比较方便

text组件本身就可以编译\n

为什么没有转换为换行 变异

通过对response的返回数据 发现 返回数据 \n=》\ \n

\ 转义字符

func()

Waste

三.wxs

编写过滤器

四.限制显示数量