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 组件的更多相关文章

  1. 微信小程序button组件样式

    点击微信按键组件才能出授权,所以自定义样式就是必须的了,来自网友的帮助,如下图 <button class='btn1' open-type='contact'> <image cl ...

  2. 第九篇、微信小程序-button组件

    主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...

  3. 微信小程序-button组件

    主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...

  4. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  5. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  6. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  7. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

  8. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  9. Wuss Weapp 微信小程序 UI 组件库

    微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...

随机推荐

  1. Qt 遍历不规则树的节点

    在使用Qt的GraphicsScene作图时,遇到类似这样的需求:在scene中创建节点类似下图, 现在我要把每个节点的txt保存到xml文件中,结构为 <?xml version='1.0' ...

  2. w3c之js学习总结

    ①JavaScript:改变 HTML 内容 <p id="demo">JavaScript 能改变 HTML 元素的内容.</p> <script& ...

  3. ffmpeg 常用命令汇总

    最近工作常用到ffmpeg 做一些视频数据的处理转换等,用来做测试,今天总结了一下,并参考了网上一些部分朋友的经验,一起在这里汇总了一下,有需要的朋友可以收藏测试一下,有问题可以回帖交流. 1.ffm ...

  4. Java第三阶段复习

    Java第三阶段复习: 1. Spring 1. IOC: 定义:Inverse Of Controller:反转控制,将bean对象的创建和对象之间的关联关系的维护由原来我们自己创建.自己维护反转给 ...

  5. 伟大的GIL

    GIL 首先需要明确的一点是GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念.就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可执行代 ...

  6. nginx之热部署,以及版本回滚

    热部署的概念:当从老版本替换为新版本的nginx的时候,如果不热部署的话,会需要取消nginx服务并重启服务才能替换成功,这样的话会使正在访问的用户在断开连接,所以为了不影响用户的体验,且需要版本升级 ...

  7. /proc/sys/fs/file-max

    Linux的/proc/sys/fs/file-max决定了当前内核可以打开的最大的文件句柄数. 查看当前的值: cat /proc/sys/fs/file-max 这个值在kernel的文档里是这样 ...

  8. 自然语言处理资源NLP

    转自:https://github.com/andrewt3000/DL4NLP Deep Learning for NLP resources State of the art resources ...

  9. 1134. Vertex Cover (25)

    A vertex cover of a graph is a set of vertices such that each edge of the graph is incident to at le ...

  10. git如何将本地文件关联到远程服务器

    很多时候,当我们关联git服务器的时候,本地都有可能会有一些开发的东西需要同步上去.那怎么样设置同步呢!跟我来做,简易配置: git本地关联远程项目:      第一步:选择目录           ...