微信小程序

微信小程序整理4-常见内置组件

组件: https://developers.weixin.qq.com/miniprogram/dev/component/

text

text组件用于显示文本, 类似于span标签, 是行内元素

<!-- 
  1. 基本使用
 -->
<text>默认不能选中\n</text>

<!-- 
  2. selectable是否可以被选中
  默认不能选中
 -->
<text selectable >selectable可以选中\n</text>

<!--
  3. space决定文本大小
  nbsp:默认
  ensp:半个中文大小
  emsp:中文大小
 -->
<text>space 可以选中\n</text>
<text space="nbsp" >space nbsp 可以选中\n</text>
<text space="ensp" >space ensp 可以选中\n</text>
<text space="emsp" >space emsp 可以选中\n</text>

<!-- 
  4. decode是否解码文本
  decode可以解析的有   < > & '    
  默认不解码
 -->
 <text decode >5 > 3</text>

button

button组件用于创建按钮,默认块级元素

<!-- 
  1. 基本使用
  默认独占一行 display:block
 -->
<button>按钮</button>
<button>按钮</button>

<!-- 
  size属性
  display:inline-block
 -->
<button size="mini">按钮size</button>
<button size="mini">按钮size</button>

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

<!-- 
  4. plain 镂空效果
 -->
<button size="mini" plain="">按钮size</button>

<!-- 
  5.disabled 不能点击置灰
 -->
<button size="mini" disabled >按钮disabled</button>

<!-- 
  6.loading
  加载中
 -->
 <button size="mini" loading="{{true}}">按钮</button>

<!-- 
  7. hover-class
  按下的class名
 -->
 <button size="mini" hover-class="rad">按钮</button>

<!-- 
  8. open-type
  微信开放能力
 -->
 <button size="mini" open-type="share">程序分享</button>

open-type取值:

说明最低版本
contact打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明1.1.0
share触发用户转发,使用前建议先阅读使用指引1.2.0
getPhoneNumber获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明1.2.0
getUserInfo获取用户信息,可以从bindgetuserinfo回调中获取到用户信息1.3.0
launchApp打开APP,可以通过app-parameter属性设定向APP传的参数具体说明1.9.5
openSetting打开授权设置页2.0.7
feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容2.1.0

view

视图组件(块级元素,独占一行,通常用作容器组件)

<!-- 
  1. 基本使用 (容器) 类似于div
 -->
<view class="box"><text>rocyuan</text></view>

<!-- 
  2.hover-class:按下的class
 -->
<view class="box1" hover-class="hover"><text>age</text></view>

<!-- 
  3. hover-stay-time:手指离开多长时间会取消class hover  
 -->
<view class="box1" hover-class="hover" hover-stay-time="0"><text>age</text></view>

<!-- 
  4. hover-stay-time:手指离开多长时间会取消class hover
 -->
<view class="box1" hover-class="hover" hover-start-time="3000"><text>age</text></view>

<!-- 
  5. hover-stop-propagation: 阻止祖先组件的点击状态
 -->
<view class="view1" hover-class="hover1">
  <view class="view2" hover-class="hover2" hover-stop-propagation></view>
</view>

image

<!-- 
  image:
  可以写成单标签
  默认大小:320X240
  行内块级元素
 -->
<image src="../../assets/img/tabbar/cart.png"></image>

<!-- mode 取值 -->
<image mode="aspectFill" src="../../assets/img/tabbar/cart.png"></image>

<!-- 显示相册图片 -->
<button bindtap="upImage">选择照片</button>
<image src="{{imageUrl}}"></image>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    imageUrl:""
  },
  upImage(){
    //微信API
    wx.chooseImage({
      complete: (res) => {
        const url = res.tempFilePaths[0]
        console.log(url)
        this.setData({
          imageUrl: url
        })
      },
    })
  },
})

<!-- 
  图片加载完成事件:bindload
  图片懒加载 加 lazy-load 属性就好
 -->

<!-- 
  show-menu-by-longpress
  长按图片识别小程序码
 -->
 <image src="../../assets/img/tabbar/cart.png" show-menu-by-longpress></image>

mode取值:
https://developers.weixin.qq.com/miniprogram/dev/component/image.html

input

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

<!-- 1. 基本使用 -->
<input type="text" placeholder="输入..." placeholder-class="p-style"></input>

<!-- 2. password -->
<input password="" placeholder="输入..." placeholder-class="p-style"></input>

<!-- 3. type: 类型,number数字键盘 -->
<input type="number"></input>

<!-- 4. confirm-type: 键盘右下角的类型 -->
<input confirm-type="send"></input>

<!-- 
  5. 事件绑定和监听
  bindinput 键盘输入时触发 event.detail = {value, cursor, keyCode},keyCode 为键值
  bindfocus 输入框聚焦时触发 event.detail = { value, height },height 为键盘高度
  bindblur  输入框失去焦点时触发 event.detail = {value: value}
  bindconfirm 点击完成按钮时触发 event.detail = {value: value}
 -->
<input bindinput="" bindfocus="" bindblur="" bindconfirm=""></input>

scroll-view

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

<!-- 水平滚动 -->
<scroll-view class="scroll-box" scroll-x >
    <view class="scroll-item" wx:for="{{30}}" wx:key="x">item</view>
</scroll-view>

<!-- 
  垂直滚动
  bindscrolltoupper 滚动到顶部
  bindscrolltolower 滚动到底部
  bindscroll 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
 -->
<scroll-view
  class="scroll-box2"
  scroll-y
  bindscrolltoupper="upper"
  bindscrolltolower="lower"
  bindscroll="scroll"
  >
    <view class="scroll-item2" wx:for="{{30}}" wx:key="x">item</view>
</scroll-view>

共同属性

1,569条评论

Leave a Reply

邮箱地址不会被公开。