小程序 | 6-常用组件及组件共同属性

<!--pages/about/about.wxml-->

<!-- 1-基本使用 -->
<text>text是行内元素</text>
<text>所以多个text不会换行，除非末尾加上换行符或用换行元素包裹，如 \\n \n\n</text>

<!-- 2-selectable 决定文本是否可以被长按选中，默认不能选中 -->
<text selectable="{{true}}">文本可以被长按选中\n</text>
<text selectable>也可以省略 selectable 后面的 mustache 语法值\n\n</text>

<!-- 3-space 决定空格大小 -->
<!-- 手写的英文空格 -->
<text>Hello world\n</text>
<!-- nbsp 等价于手写的英文空格 -->
<text space="nbsp">Hello world\n</text>
<!-- ensp 表示半个中文字符大小 -->
<text space="ensp">Hello world\n</text>
<!-- emsp 表示一个中文字符大小 -->
<text space="emsp">Hello world\n\n</text>

<!-- 4-是否对特殊字符进行解码 -->
<!-- &gt; 表示 >, 不启用解码时将直接显示 5 &gt; 3  -->
<text> 5 &gt; 3 \n</text>
<!-- 解码后展示 5>3 -->
<text decode="{{true}}"> 5 &gt; 3 \n</text>
<!-- 可以省略 mustache 语法取值 -->
<text decode> 5 &gt; 3 \n</text>

<!-- 1-基本使用 -->
<!-- 按钮中默认添加了许多样式，所以默认会很大，且独占一行 -->
<button>按钮</button>

<!-- 2-size属性：mini -->
<!-- mini 按钮会启用 display:inline-block, 即变成了行内块元素 -->
<button size="mini"> mini 按钮1</button>
<button size="mini"> mini 按钮1</button>

<!-- 3-type 属性 -->
<button size="mini" type="default"> type：default 按钮</button>
<button size="mini" type="primary">type:primary 按钮</button>
<button size="mini" type="warn">type:warn 按钮</button>

<!-- 4-plain 镂空样式 -->
<button size="mini" plain> plain 按钮</button>

<!-- 5-disable 禁用，不可用,不可点击 -->
<button size="mini" disabled> disabled 按钮</button>

<!-- 6-loading 加载 -->
<button size="mini" loading> loading 按钮</button>
<button size="mini" loading="{{false}}"> 隐藏圈圈的 loading 按钮</button>

<!-- 7-hover-class 修改按下时的背景 -->
<button size="mini" hover-class="pressed"> 7-hover-class 按钮</button>

<!-- 8-open-type -->
<view>
  <button size="mini" open-type="contact" bindcontact="onContact"> 客服会话</button>
  <button size="mini" open-type="share" > 程序分享</button>
  <button size="mini" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNum"> 获取手机号</button>
  <button size="mini" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo"> 获取用户信息</button>
</view>

<!--pages/view-element/view.wxml-->
<!-- 1-基本使用 -->
<view class="box">view 是块级元素、容器, 会占满整行</view>
<view>多个 view 间不需要手动换行</view>

<!-- 2-hover-class 用户按下组件时的显示样式 -->
<view class="box1" hover-class="hover-view">2-hover-class 按下时改变样式</view>
<!-- 在按下和松开时，会有一个短暂的延时，延时过后才会变更。-->
<!--这个延时是通过 hover-start-time 和 hover-stay-time 控制的,取值 number -->
<!-- 取值 number 时，最好使用 {{}} 将值包裹起来 -->
<view class="box" hover-class="hover-view" hover-stay-time="{{800}}">2-hover-class 按下时改变样式</view>

<!-- 3-hover-stop-propagation 是否阻止本节点的祖先节点出现点击态 -->
<!-- hover-stop-propagation 默认false,点击子节点时，父节点也会变化  -->
<view class="box2" hover-class="hover-view2">
  <view class="box1" hover-class="hover-view">
    3-hover-stop-propagation
  </view>
</view>

<!-- 设置 hover-stop-propagation 后,点击子节点时，父节点无变化。但无法阻止点击父节点时，子节点响应变化  -->
<view class="box2" hover-class="hover-view2">
  <view class="box1" hover-class="hover-view" hover-stop-propagation>
    3-hover-stop-propagation
  </view>
</view>

/* pages/view-element/view.wxss */
.box{
  background: red;
}

.box1{
  width: 250px;
  height: 50px;
  background:yellow;
}

.hover-view{
  background:red;
  color: white;
  font-size: 18px;
}

.box2{
  width: 300px;
  height: 80px;
  background:pink;
}

.hover-view2{
  background:black;
  color: white;
  font-size: 18px;
}

<!--pages/image/image.wxml-->

<!-- 1-image组件可以自闭合, 且有默认的大小-->
<!-- <image /> -->

<!-- 2-支持本地图片，支持远程图片 -->
<image src="/assets/tabbar/home_active.png" />
<image src="../../assets/tabbar/home_active.png" />
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" />

<!-- 3-显示相册图片 -->
<button bindtap="handleChooseAlbum">选择相册图片</button>
<image src="{{imgPath}}" />

<!-- 4-bindload 监听图片加载完成, bindload 监听加载状态,lazy-load 懒加载 -->
<image wx:for="{{5}}" 
  src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" 
  bindload="handleLoad" 
  lazy-load
/>

<!-- 5-show-menu-by-longpress 长按识别小程序码 -->
 <view>长按下图识别其中的小程序码</view>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" 
  show-menu-by-longpress
/>

<!-- 6-mode 图片缩放模式，直接参考官方文档吧 https://developers.weixin.qq.com/miniprogram/dev/component/image.html-->

Page({
  data: {
    imgPath: ""
  },

  handleChooseAlbum(e) {
    // 让用户从相册选择或者拍摄新图片
    wx.chooseImage({
      success:(res) =>{
        console.log(res)
        const path = res.tempFilePaths[0]
        this.setData({
          imgPath:path
        })
      }
    })
  },

  handleLoad(e){
    console.log("图片加载完成")
  }
}

<!--pages/input/input.wxml-->

<!-- 1-基本使用，可以使用自闭合方式 -->
<!-- 默认透明无边框, 我们设置了 input 标签选择器，所以会增加边框和margin -->
<input/>

<!-- 2-value: 默认值 -->
<input value="默认值"/>

<!-- 3- type 决定键盘的类型. 注意，模拟器不弹出键盘，仅能从真机查看效果 -->
<!-- 文本，默认值 -->
<input type="text"/>
<!-- 数值 -->
<input type="number"/>
<!-- 身份证 -->
<input type="idcard"/>
<!-- 带小数点的数值 -->
<input type="digit"/>

<!-- 4- password 暗文输入. 以小圆点展示内容 -->
<input password/>

<!-- 5-placeholder 占位符 -->
<input placeholder="请输入内容"/>

<!-- 6- input 绑定事件 -->
<input  placeholder="监听事件" 
  bindfocus="handleFocus" 
  bindinput="handleInput" 
  bindblur="handleBlur"/>

input{
    border: 1px solid red;
    margin: 10px 30px;
}

Page({
  handleFocus(e) {
    console.log("获取焦点", e)
  },
  handleInput(e) {
    console.log("输入内容了", e)
  },
  handleBlur(e) {
    console.log("失去焦点了", e)
  }
}

<!--pages/scrollview/scrollview.wxml-->
<!-- 1-水平滚动 scroll-x。如果不能滚动，先检查引用类名是否写对了！！！-->
<scroll-view class="container1" scroll-x>
  <view class="item1" wx:for="{{10}}">{{item}}</view>
</scroll-view>

<!-- 2-垂直滚动 scroll-y 。如果不能滚动，先检查引用类名是否写对了！！！-->
<scroll-view class="container2" scroll-y>
  <view class="item2" wx:for="{{10}}">{{item}}</view>
</scroll-view>

<!-- 3-bindscroll 监听滚动事件 -->
<scroll-view class="container2" scroll-y bindscroll="handleScroll">
  <view class="item2" wx:for="{{10}}">{{item}}</view>
</scroll-view>

Page({
  handleScroll(e){
    console.log(e)
  }
}  

.container1 {
  /* 禁止内容换行 */
  white-space: nowrap;
  background: salmon;
}

.item1 {
  width: 100px;
  height: 100px;
  /* 转换为行内块元素 */
  display: inline-block;
  margin: 10px;
  background: red;
}

.container2 {
  margin-top: 10px;
  background: yellow;
  /* 必须指定高度才能实现垂直方向上的局部滚动 */
  height: 180px;
}

.item2 {
  margin: 10px;
  height: 100px;
  background: skyblue;
}