1、view

view组件属性：

• hoverclass添加按下时的样式类名，默认 none

• hover-stop-propagation 是否阻止点击态冒泡，默认false

• hover-start-time 按住多久后出现点击态 单位毫秒 默认 50

• hover-stay-time 手指松开后点击态保留时间，单位毫秒，默认400

2、 text

• 只有 text 标签有长按选中复制的功能

• 组件属性user-select 用来控制文本是否可以复制，默认false ,该属性将text标签的css属性设为：display:inline-block

• decode可以解码的值有  < > & '    

• text标签内只能嵌套自己

3、image

• 存在默认宽高，width：320px,height:240px

• mode 图片显示方式

• src 图片地址(注：小程序上传大小限制为2M，最好使用外链)

• lazy-load 懒加载，小程序自行判断，上下三屏高度

4、swiper swiper-item

• swiper 存在默认宽高：width:100%;height:150px;
• autoplay 自动轮播
• interval 轮播间隔
• circular 循环
• indicator-dots 指示点是否显示，默认 false
• indicator-color 指示点颜色
• indicator-active-color 指示点选中时的颜色，默认#000000
• vertical 是否纵向滚动 ，默认false
• display-multiple-items 同时显示的items数量，默认为1
• current 当前活动items的索引

<swiper easing-function="linear" indicator-active-color="#009400" indicator-color="#ff0094" indicator-dots interval="3000" autoplay circular bindchange="handleSwiperChange" bindtransition="handleTransition" bindanimationfinish="handleAnimationFinish">
  <swiper-item>
    <image mode="widthFix" src="//img11.360buyimg.com/da/s1180x940_jfs/t1/151531/34/2268/47193/5f86fafcE2d14dd84/7cb79c903caf312c.jpg.webp" />
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="//img12.360buyimg.com/babel/s1180x940_jfs/t1/158177/13/12306/106725/604aeb77E87226144/c080abd2d3984726.jpg.webp" />
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="//img11.360buyimg.com/da/s1180x940_jfs/t1/123642/33/14861/71547/5f86f9d9E23cbc399/3249810484186a2a.jpg.webp"/>
  </swiper-item>
  <swiper-item>
    <image mode="widthFix" src="//imgcps.jd.com/ling4/4808741/54iG5qy-5aW96LSn6LSt/6YOo5YiG5aW96LSn5LmwMei1oDE/p-5bd8253082acdd181d02fa37/1a8be69a/cr/s/q.jpg"/>
  </swiper-item>
</swiper>

Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  handleSwiperChange(e){
    console.log('current:',e.detail.current)
    console.log('source:',e.detail.source)
  },
  handleTransition(e) {
    // console.log(e)
  },
  handleAnimationFinish(e){
    console.log(e)
  }
})

5、navigator

1.url:跳转路径
2.属性open-type类型:

• navigate 保存当前页面的跳转，不能跳转到tabbar页面，同wx.navigateTo
• redirect 关闭当前页面后跳转，不能跳转到tabbar页面,同wx.redirectTo
• switchTab 跳转到tabbar 页面，并关闭所有非tabbar 页面,同wx.switchTab
• relaunch 关闭其他所有页面，跳转到新页面,同wx.relaunch
• navigateBack 页面返回，同wx.navigateBack

6、rich-text

• 相当于v-html
• 支持HTML字符串或对象数组

7、button

1、属性plain 按钮是否镂空
2、loading 文本前是否显示加载中图标
3、开放能力

• contact 联系客服 首先在小程序后台添加客服的微信号，然后客服人员登录网页版客户端与用户沟通
  -share 转发小程序给好友，不能转发到朋友圈
  -getPhoneNumber 获取用户手机号，
  a、button标签添加bindgetphonenumer="callback"
  b、回调函数中会获取到加密数据
  c、将加密数据发给后台，由后台解密

• getUserInfo 获取用户个人信息（已废弃）
  a、button 标签添加 bindgetuserinfo ="callback"
  b、回调函数中可以获取到个人信息 e.detail.userinfo

• launchApp 在小程序当中直接打开app，不好使
  -openSetting 进入授权页面 只显示用户授权的选项
  -feedback 用户反馈页面

<button open-type="contact">contact</button>    
<button open-type="share">share</button>    
<button open-type="getPhoneNumber" bindgetphonenumber="getPhone">getPhoneNumber</button>    
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>    
<button open-type="feedback">feedback</button>

Page({
  getPhone(e) {
    console.log(e)
  },
  getUserInfo(e){
    console.log(e.detail.userInfo)
  }
})

//用户个人信息数据
{
    avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKZCFYXHEIoFDCJCOPk4G2Fm1hNqGnT7l901qiajYhdnCF1ytFtT4j7lqAw0qXZnT5P 
    ib5SNZMPbnng/132"
    city: "Haidian"
    country: "China"
    gender: 1
    language: "zh_CN"
    nickName: "Luo Zongxiang"
    province: "Beijing"
}

8、单选 radio-group/radio

• 选择事件绑定bindchange="handleChange"
• 获取选中value：e.detail.value

<radio-group bindchange="handleChange">
  <radio color="#000099" value="male">男</radio>
  <radio color="#000099" value="womale">女</radio>
</radio-group>
<view>{{gender}}</view>

Page({
  data:{
    gender:''
  },
  handleChange(e){
    console.log(e.detail.value)
    this.setData({
      gender:e.detail.value
    })
  }
})

9、checkbox-group/checkbox

• 选中事件绑定bindchange="handleChange"
• 获取选中value：e.detail.value，值为一个数组

<checkbox-group bindchange="handleCheckChange">
  <checkbox wx:for="{{list}}" value="{{item.value}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>{{selected}}</view>

Page({
  data:{
    list:[
      {
        id:0,
        name:'香蕉',
        value:'banana'
      },
      {
        id:0,
        name:'苹果',
        value:'apple'
      },
      {
        id:0,
        name:'梨子',
        value:'pear'
      },
      {
        id:0,
        name:'西瓜',
        value:'melon'
      }
    ],
    selected:''
  },
  handleCheckChange(e){
    console.log(e.detail.value)
    this.setData({
      selected:e.detail.value
    })
  }