微信小程序学习记录day2——样式wxss/标签/组件

大部分程序员看视频的学习方式都是错误的（全）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1mF411B7b7?spm_id_from=333.851.b_7265636f6d6d656e64.2在开始之前刷到一个b站视频

大体内容如下：

看视频+书本 自学能力与知识同步；

边记笔记边听课 容易漏掉很多知识点；

学一会记一会，效率很低，笔记可能只是安慰；

因此看视频最好的方式 先看视频后刷文档笔记再着手

源码/框架 关键部分可以截图

项目· 理解流程 自我总结

进入正题，基础部分了解之后，基本上剩下标签的使用这一块。

基础视频刷完之后，开始根据官方文档进行学习总结

框架部分的知识主要集中在前面第一天的内容，第二天主要围绕组件展开。

1.视图容器

swiper——轮播图，图片等比例的调整，以及图片的放置位置

swiper—item轮播项

2.icon

几种模式sucess,sucess_no_circle,info,warn,waiting,cancle,download,search,clear

大小

颜色

3.rich—text

富文本：将字符串解析成真正标签进行渲染

4.text

正文文本内容，唯一可以实现长按复制的文本

5.button

主要实现按钮的外观特性：尺寸、颜色、按钮的立体效果等

其中非常重要的一块是：open—type

1）contact 打开克服会话 需要另外搭建一个后台

2)  share 触发用户转发

3）getPhoneNumber 获取用户手机号 bindgetphonenumber回调中获得

4）getUserInfo 获取用户信息，从bindgetuserinfo回调中获取用户信息

5）launchApp 打开app，通过app-parameter属性设定app传参

6）openSetting 打开授权设置页

7）feedback 打开意见反馈页面，用户可以提交；开发者可以收到反馈

8）chooseAvatar 获取用户头像

6.checkbox

复选框

与checkbox-group连用，主要实现一个组内的多选；可以通过循环获得勾选参数

6.radio

单选框，常用属性value,checked

与radio-group连用；

7.input

主要实现数据在显示页面的输入

8.navigator

导航

url属性

open-type中的redirect;relanch;exit等功能

9.image

媒体组件中的饿image中mode与前面部分录播图结合使用

scaleToFill 缩放模式，图片的宽高完全拉伸

aspectFit 保持纵横比，长边完全显示

aspectFill 保持纵横比，短边完全显示

widthFix 宽度不变，高度自动变换，保持纵横比

heightFix 高度不变，宽度自动变换，保持纵横比

top 裁剪模式，图片显示顶部

bottom 裁剪模式，图片显示底部其余类似

以上为常用组件。

此外，需要注意，我们也经常对组件进行自定义。

主要有两种调用方式：

1）子组件传递给父组件       

2）父组件传递给子组件

在子组件中声明数组，以及函数中定义triggeer函数触发 ；

在父组件中定义函数，对事件触发后的数据进行传递并设置data最终实现数据tabs的实时更新、