小程序入门-常用组件

小程序常用组件

这里给个官方文档的链接，更多的标签可以去看官方文档

视图容器 | 微信开放文档 (qq.com)

1.view标签

代替原来的div标签

标签内的其他属性看官方文档比如

<view hover-class="h-class">
点击我试试
</view>

2.text

3.image

一般常用的都是第一张图片里的，第二张里的那些不缩放图片像css中的定位一样直接写到属性

4.swiper轮播图

注意这个组件要和swiper-item一起使用

1.轮播图的外层容器 swiper

2.每一个轮播项swiper-item

再wxml中写好内容

3.swiper有默认的样式

width 100% height150px

image的默认高宽为320*240

swiper的高度无法被内容撑开，所以内容看不全

在wxss中在写相应的配置，如

swiper{
    width:100%;
    height:calc(100vm*234/92);/*（234/92）是原图的宽高*/
}
image{
    width:100%;
}

还有一些swiper的属性可以美观轮播图

swiper | 微信开放文档 (qq.com)

更多的swiper属性点击上方

5.导航组件 navigator

<navigator>轮播图页面</navigator>

属性：

0.是块级元素，每个navigator会默认换行，可以直接加高度和宽度

1.url要跳转的页面路径（绝对路劲或相对路径）

2.target 要跳转到当前小程序还是其他小程序页面

self 默认值 自己小程序页面

miniProgrem 其他小程序的页面

3.open-type 跳转的方式

默认的是navigate

rich-text富文本标签

1. node属性来实现

   .接收标签字符串

   .接收对象数组

button按钮（建议自定义时看着文档，不用刻意去记）

属性：

size（控制按钮的大小）：

1.default默认大小

2.mini 小尺寸

type：控制按钮颜色

1.default灰色

2.primary绿色

3.warn红色

plain：按钮是否镂空，背景色透明

open-type：开放能力

要实现联系客服功能需要更改appid为所有者的id，可以登录微信小程序官网查看然后开发者工具右边更改，要增加需要联系的客服则直接在微信小程序官网找到客服手动添加客服的微信账号

icon字体图标标签

radio 单选框标签

可有通过color属性来更改颜色

需要搭配radio-group来一起使用

首先写好框架，要先定义父元素

然后在js中写逻辑和函数

checkbox复选框标签

和单选框基本一样，只是可以同时选择多个元素而已

这里我们在js当中先写好列表便于后面循环显示数据如上图list

再与list同层级给定一个空数组用于存放选中的值如下图checkedlist