微信小程序 button 组件
button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮
button 的属性:
size: 类型 字符串 按钮的大小
属性值:default 默认的
mini 小尺寸
type: 类型 字符串 按钮的样式类型
属性值:default 默认的
primary 绿色的
warn 红色的
plain: 类型 布尔 按钮是否镂空,背景色透明
disabled: 类型 布尔 是否禁用
loading: 类型 布尔 名称前是否带有 加载 的图标
form-type:类型 字符串 用于form组件 会分别触发submit和reset事件
属性值:submit 触发表单的submit事件
reset 触发表单的reset 事件
open-type:类型 字符串 微信的开放能力
属性值:contact:打开客服会话,如果用户在会话中点击消息卡片,返回小程序,可以从 bindcontact 回调中获取具体信息
share:触发用户转发
getPhoneNumber:获取用户的手机号,可以从 bindgetPhoneNumber 回调中,获取用户信息
getUserInfo:获取用户信息,可以从 bindgetUserInfo 回调中,获取用户信息
launchApp:打开APP,可以通过app-parameter 属性 向APP 传的参数
openSetting:打开授权设置页
feedback:打开"意见反馈"页面,用户提交反馈内容并上传日志,开发者可以登录小程序管理后台后,进入左侧菜单"客服反馈"页面 获取反馈内容
hover-class:类型 字符串 指定按钮按下去的样式类
hover-stop-propagation:类型 布尔 指定是否阻止本节点的祖先节点出现点击态
hover-start-time:类型 数字 按住后多久出现点击态 (单位 ms)
hover-stay-time:类型 数字 手指松开后,点击态的保留时间 (单位 ms)
lang:类型 字符串 指定返回用户信息的语言
属性值:zh-CN 简体中文
zh-TW 繁体中文
en 英文
session-from:类型 字符串 会话来源 (open-type="contact" 有效)
send-message-title:类型 字符串 会话内消息卡片标题 (open-type="contact" 有效)
属性值:当前标题
send-message-path:类型 字符串 会话内消息卡片点击跳转小程序路径 (open-type="contact" 有效)
属性值:当前分享路径
send-message-img:类型 字符串 会话内消息卡片图片 (open-type="contact" 有效)
属性值:截图
app-parameter:类型 字符串 打开APP时,向APP 传递参数 ,(open-type="launchApp" 有效)
show-message-card:类型 布尔 是否显示会话内消息卡片,设置此参数为true,用户进入客服会话,在右下角显示,可能要发送的小程序的提示,用户点击后,可以快速发送小程序的消息
(open-type="contact")时 有效
事件:
bindgetuserinfo:用户点击该按钮时,会返回获取的用户信息,回调的 detail数据与 wx.getUserInfo 返回的一致,open-type="getUserInfo" 时有效
bindcontact:客服消息回调,open-type="contact" 时有效
bindgetphonenumber:获取用户手机号回调, open-type="getPhoneNumber" 时 有效
binderror:当使用开放能力时,发生错误的回调,open-type="launchApp" 时 有效
bindopensetting:打开授权设置页后回调,open-type="openSetting" 时 有效
bindlaunchapp:打开APP 成功的回调, open-type="launchApp" 时 有效
微信小程序 button 组件的更多相关文章
- 微信小程序button组件样式
点击微信按键组件才能出授权,所以自定义样式就是必须的了,来自网友的帮助,如下图 <button class='btn1' open-type='contact'> <image cl ...
- 第九篇、微信小程序-button组件
主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...
- 微信小程序-button组件
主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- 微信小程序UI组件库 iView Weapp快速上手
概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- Wuss Weapp 微信小程序 UI 组件库
微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...
随机推荐
- 终于有人把 Docker 讲清楚了,万字详解!
一.简介 1.了解Docker的前生LXC LXC为Linux Container的简写.可以提供轻量级的虚拟化,以便隔离进程和资源,而且不需要提供指令解释机制以及全虚拟化的其他复杂性.相当于C++中 ...
- c++多线程并发学习笔记(1)
共享数据带来的问题:条件竞争 避免恶性条件竞争的方法: 1. 对数据结构采用某种保护机制,确保只有进行修改的线程才能看到修改时的中间状态.从其他访问线程的角度来看,修改不是已经完成了,就是还没开始. ...
- 微信JSSdk实现分享功能
1. 概述 微信分享服务器的作用是为用户在微信浏览器端对来自网站以及客户端的页面进行二次分享链接时更友好的展示提供服务.为实现二次分享功能需要使用微信JS-SDK来开发. 微信JS-SDK是微信公众平 ...
- linux中忘记mysql用户root密码解决方案
1.vim /etc/my.cnf[mysqld]skip-grant-tables ##追加此行,跳过权限表, 2.重启mysqlsystemctl restart mysqld 3.mysql 登 ...
- C# 静态方法 静态属性 调用静态方法
C#的类中可以包含两种方法:静态方法和非静态方法. 使用了static 修饰符的方法为静态方法,反之则是非静态方法. 静态方法是一种 特殊的成员方法,它不属于类的某一个具体的实例,而是属于类本身.所以 ...
- getchar、putchar、puts、gets
getchar(字符) 输入获取一个字符 putchar(字符) 输出控制台一个字符 scanf()格式化输入 printf() 格式化输出 gets(arr) 输入一个字符串给已经声明的数组ar ...
- pandas 常规操作大全
那年夏天抓住了蝉的尾巴 gitbook 前言 pandas 抓住 Series (排序的字典), DataFrame (row + 多个 Series) 对象 , 就如同 numpy 里抓住 ndar ...
- 流畅的Python (Fluent Python) —— 第一部分
Python 最好的品质之一是一致性. 魔术方法(magic method)是特殊方法的昵称.特殊方法也叫双下方法. 1.1 一摞Python风格的纸牌 import collections Card ...
- python面向对象--类的装饰器
# def deco(obj): # print("=====",obj) # obj.x=1 # return obj # @deco#===> test = deco(t ...
- PAT Advanced 1006 Sign In and Sign Out (25 分)
At the beginning of every day, the first person who signs in the computer room will unlock the door, ...