微信小程序学习笔记(7.17)

button按钮标签

外观样式

1.size:"default"默认大小

<button>普通默认按钮</button>

2.size:"mini"小尺寸按钮

<button size="mini">mini按钮</button>

type用来控制按钮的颜色

1.type:"default"灰色

<button type="default" >mini按钮</button>

2.type:"primary"绿色

mini按钮

3.type:"warn"红色

<button type="warn" >按钮</button>

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

<button type="primary" plain="true" >按钮</button>

loading 按钮出现等待情况

<button type="primary" loading="true" >按钮</button>

button的开放能力

1.share转发当前的小程序给微信朋友但是不能转发到朋友圈

<button open-type="share">share</button>

获取用户信息 getUserInfo

WXML

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>

JS

  getUserInfo:function(e){
    console.log(e)
  }
})

所以说获取到用户的用户名应该是 e.detail.userInfo.nickName

获取用户手机号

WXML

<button open-type="getPhoneNumber" bindgetuserinfo="getPhoneNumber">getPhoneNumber获取手机号码</button>

JS

 getPhoneNumber:function(e)
  {
console.log(e)
  },

launchApp 在小程序中直接打开APP

openSetting打开小程序内置的授权页面

feedback 打开小程序内置的反馈页面

icon标签

小程序中封装好了一些常用的标签

type标签参数有 success|success_no_circle|info|warn|waiting|cancel|download|search|clear

<icon type="success" size="23" color="">
</icon>
<icon type="success_no_circle" size="23" color="">
</icon>
<icon type="info" size="23" color="">
</icon>
<icon type="warn" size="23" color="">
</icon>
<icon type="waiting" size="23" color="">
</icon>
<icon type="cancel" size="23" color="">
</icon>
<icon type="download" size="23" color="">
</icon>
<icon type="search" size="23" color="">
</icon>
<icon type="clear" size="23" color="">
</icon>

radio 单选框标签

1.radio必须和他的父标签radio-group一起使用 2.value选中单选框的值 3.需要给父级标签绑定bindchange 事件

<radio-group bindchange="handlechange">
  <radio value="male">男</radio>
  <radio value="female">女</radio>
</radio-group>
<view>你选中的是:{{gender}}</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:" "
  },
  handlechange:function(e){
    console.log(e)
    var who=e.detail.value;
    this.setData({
      gender:who
    })
  },

复选框 checkbox

和单选框类似需要父级标签checkbox-group，可以绑定事件，设置选中的value数值

{{item.name}}

{{check_list}}