微信小程序button标签open-type属性原理解析
这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
open-type (微信开放能力):合法值中的其中之一:
getUserInfo说明:引导用户授权 而获取用户信息,可以从bindgetuserinfo回调中获取到用户信息
而按钮的bindgetuserinfo属性 说明:用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效
如:
一:
wxml文件:
.js文件:
二:
wxml文件:
.js文件:
这样使用-------------------点击的时候要求用户授权,授权登录(bindgetuserinfo="自定义函数名")时获取用户信息(open-type="getUserInfo")!
(或是 获取用户信息(open-type="getUserInfo")授权登录(bindgetuserinfo="自定义函数名"))
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序 Button 组件详解及简单实例
微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名 类型 默认值 说明 size String default 有效值default, mini type String default 按钮的样
-
微信小程序中button组件的边框设置的实例详解
微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to
-
微信小程序(十四)button组件详细介绍
button按钮用的算是最普遍的组件之一. 主要属性: wxml <!--按钮默认样式,点击事件--> <button type="defaule" bindtap="clickButton">Defalut</button> <!--原始颜色,不可点击状态, 正在加载状态--> <button type="primary" disabled="true" loading=
-
微信小程序中button去除默认的边框实例代码
微信小程序中button去除默认的边框的实现方法如下所示: button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:2.5555555
-
微信小程序中添加客服按钮contact-button功能
小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q
-
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名 类型 默认值 说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String 用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本
-
微信小程序button组件使用详解
本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下 展示效果图 button组件的常用属性 size:default.mini--default为块级按钮.mini为小按钮 type:primary.default.warn--primary提交成功.default默认灰色.warn警告色 plain:true.false--按钮是否镂空,背景色透明 disabled:true.false--是否禁用 loading:true.false--名称前是否带 loadin
-
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
先上图 样式设置: 在小程序社区看了下,说是伪类造成的.于是就重新定义下样式.然后就 ok 了. 总结 以上所述是小编给大家介绍的微信小程序分享功能之按钮button 边框隐藏和点击隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!
-
微信小程序mpvue点击按钮获取button值的方法
在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat
-
微信小程序button标签open-type属性原理解析
这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信开放能力):合法值中的其中之一: getUserInfo说明:引导用户授权 而获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 而按钮的bindgetuserinfo属性 说明:用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的
-
一文解决微信小程序button、input和image表单组件
目录 一,button组件 补充:button 开发能力 二,input组件 三,image组件 四,API三大类 4.1 事件监听API 4.2 同步API 4.3 异步API 总结 一,button组件 第一个来介绍的就是button组件,我们可以发现它和HTML中的按钮标签同名,是的,该组件在WXML中也是充当按钮设置功能,不过,相比之下,button组件的功能可比后者多多了,下面我们来详细介绍一下,微信小程序给我们提供哪些button功能. type属性,用来设置按钮的样式类型,目前有三
-
微信小程序商城项目之商品属性分类(4)
续上一篇的文章:微信小程序之购物数量加减 -- 微信小程序实战商城系列(3) 所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <view class="title">商品属性值联动选择</view> <!--options--> <view class="commodity_a
-
微信小程序商品详情页规格属性选择示例代码
detail.wxml展示页面 <!--轮播图--> <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> &
-
详解微信小程序input标签正则初体验
开篇废话 在开发过程中经常遇到这样的需求:用户只能输入数字并且只保留小数点两位.虽然我们可以在提交表单的时候进行验证,但是体验不是很好.下面我主要使用了小程序input标签的bindinput方法对输入的值进行监听,然后进行正则匹配. 1. input标签 微信小程序input标签自带type=digit属性,可以调起带有小数点的数字键盘,maxlength属性可以控制我们输入字符的个数,然后我们给input标签绑定bindinput方法. <input type="digit"
-
微信小程序 两种为对象属性赋值的方式详解
微信小程序两种为对象属性赋值的方式 对应config.wxml <view> 阶段一<switch id="config1" checked bindchange="switchChange"/> </view> 对应config.js data:{ //定义对象 configs:{} } //方式一 switchChange:function(e){ //为对象的某一属性赋值 configs.config1={ }; conso
-
微信小程序 <swiper-item>标签传入数据
微信小程序 <swiper-item>标签传入数据 在<swiper-item>中用for循环传入多个成对不同数据时的实现方法. 看下效果图: 遍历实现方法:wxss省略: wxml中代码: <!--导航部分轮播图--> <swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration=&q
-
微信小程序时间标签和时间范围的联动效果
本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码,供大家参考,具体内容如下 最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.picker,用wxss对radio按照需求进行重构,picker里边的start和end时间是根据radio来显示的.将start.end时间放在data里,radio发生改变时,改变data中的时间.当picker中的值发生改变时,如果时间范围已经超出了
随机推荐
- js正则表达式之match函数讲解
- mysql 5.7.14 安装配置方法图文教程
- Centos7 安装步骤及注意事项
- iOS 图片压缩方法的示例代码
- asp.net操作ini文件示例
- IE8 浏览器Cookie的处理
- 腾讯CMEM的PHP扩展编译安装方法
- jquery ajax 同步异步的执行示例代码
- DOM基础教程之使用DOM
- JavaScript写的一个DIV 弹出网页对话框
- 随机性死机故障分析与排除
- UITableView 实现汽车品牌(demo)
- HTML页面如何象ASP一样接受参数
- C# 中实现ftp 图片上传功能(多快好省)
- Android studio创建第一个app
- vue项目首屏打开速度慢的解决方法
- spring应用中多次读取http post方法中的流遇到的问题
- JointJS JavaScript流程图绘制框架解析
- Ubuntu无法联网的解决方法
- Python BS4库的安装与使用详解