微信小程序 常见组件

常见组件

重点为小程序中常用的布局组件

view,text,rich-text,button,image,navigator,icon,swipe,radio,checkbox等

view

代替原来的div标签

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

属性	说明
hover-class	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	按住后多久出现点击态，单位毫秒
hover-stay-time	手指松开后点击态保留时间，单位毫秒

text

1. 文本标签
2. 只能嵌套text
3. 长按文本可以复制（只有该标签有这个功能）
4. 可以对空格 回车 进行编码

属性名	类型	默认值	说明
user-select	Boolean	false	文本是否可选,该属性会使文本节点显示为 inline-block
space	String		显示连续空格
decode	Boolean	false	是否解码，不解码 就无法转换为空格

image

1. 图片标签，image组件默认宽度为320px、高度为240px

2. 支持懒加载

3. 图片地址只能是外部地址，可以将本地的图片转为外部链接，点击创建链接

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

mode的合法值

1. scaleToFill 默认值 不保持纵横比缩放图片，使用图片的宽高完全拉伸至填满image元素
2. aspectFit 保持宽高比，确保图片的长边显示出来，页面轮播图常用
3. aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来，少用
4. widthFix 以前web的图片，宽度指定之后，高度会自己按照比例来调整，常用
5. bottom 类似以前的background-position

swiper 轮播图组件

1. 轮播图外层容器 swiper

2. 每一个轮播项 swiper-item

3. swiper标签 存在默认样式

   1. width 100%
   2. height 150px image存在默认宽度和高度 320*240
   3. swiper 高度 无法实现由内容撑开

4. 先找到 原图的宽度和高度 等比例 给swiper定 宽度和高度

   设 原图的宽度和高度为 1125 * 352 px

   swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

   swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

   height: 100vm * 352 / 1125

5. autoplay 自动轮播

6. interval 修改轮播时间

7. circular 衔接轮播

8. indicator-dots 显示 指示器 分页器 索引器，即轮播图下的小圆点

9. indicator-active-color 选中的时候的指示器的颜色

navigator 导航组件

导航组件，类似超链接标签

1. 块级元素，默认会换行，可以直接加宽度和高度

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

   self——>当前小程序

   miniProgram——>其他的小程序

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序的跳转链接
open-type	String	navigate	跳转方式

open-type有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
switchTab	跳转到tabBar页面，并关闭其他所有非tabbar页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页或者多级页面，可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

rich-text 富文本

富文本标签

可以将字符串解析成对应标签，类似vue中v-html

1. nodes属性来实现
   1. 接收标签字符串
   2. 接收对象数组

<rich-text nodes="{{a}}">rich-text>

标签字符串

Page({
    data:{
        a:'
hello world
' //注意不要换行，否则会报错
    }
})

对象数组

Page({
    data:{
        a:[
            {
                // 1.name属性指定标签
                name:"div",
                // 2.标签上有哪些属性
                attrs:{
                    // 标签上的属性 class style
                    class:"my_div",
                    style:"color:red"
                },
                // 3.子级点 children 要接受的数据类型和nodes第二种渲染方式的数据类型一致
                children:[
                    {
                        name:"p",
                        attrs:{}, //没有就为不放
                        // 放文本
                        children:[
                            {
                                type:"text",
                                text:"hello"
                            }
                        ]
                    }
                ]
            }
        ]
    }
})

button

外观属性

1. size控制按钮的大小
   1. default 默认大小
   2. mini 小尺寸
2. type控制按钮的颜色
   1. default 按钮为灰色
   2. primary 按钮为绿色
   3. warn 字体为红色
3. plain按钮是否镂空，背景色透明
4. loading名称前是否带loading图标

开放能力

open-type的合法值

值	说明
contact	打开客服会话，如果客户在会话中点击信息卡片后返回小程序，可以从bindcontact回调中获得具体信息，只能打开真机调试
share	触发用户转发，不能将小程序分享到朋友圈中
getPthoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息， 不是企业的小程序，没有权限获取
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取用户信息
launchApp	打开APP，可以通过app-parameter属性设定项APP传的参数
openSetting	打开授权设置页
feedback	打开”意见反馈“页面，用户可提交反馈内容并上传日志。开发者可以登录 小程序管理后台 进入左侧菜单”客服反馈“页面获取反馈内容

contact

1. 将小程序的appid由测试号改为自己的appid
2. 登录微信小程序官方，添加客服-微信

getPthoneNumber

1. 绑定一个事件 bindgetPhonenumber

2. 在事件的回调函数中 通过参数来获取信息

3. 获取到的信息已经加密过

   需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析 手机号码 再返回小程序中，就可以看到信息了

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumberbutton>

Page({
	getPhoneNumber(e){
        consoloe.log(e);
    }
})

getUserInfo

1. 该属性和getPhoneNumber属性的使用方法相同
2. 可以直接获取，不需要加密的手段

launchApp

1. 需要先在app中通过app的某个链接 打开 小程序
2. 在小程序 中 通过 这个功能重新打开app

openSetting

1. 授权页面中 只会出现 用户曾点击过的权限

feedback

1. 这能够通过真机调试

icon 小图标

属性	类型	必填	说明
type	string	是	icon的类型，有效success, success_no_circle, info, warn, waiting, cancel, download,search,clear
size	number/string	否	icon的大小
color	string	否	icon的颜色，同css的color

radio 单选框

1. radio标签 必须要和 父元素radio-group来使用
2. value 选中的单选框的值
3. 需要给radio-group 绑定change事件

<radio-group bindchange="handleChange">
	<radio>男radio>
    <radio>女radio>
radio-group>

checkbox 复选框

<checkbox-group>
    <checkbox wx:for="{{list}}" wx:key="id">{{item.name}}checkbox>
checkbox-group>

list:[{
    id:0,
    name:"apple"
},{
    id:0,
    name:"banana"
}]