专栏首页达达前端全栈开发工程师微信小程序-上(下)

全栈开发工程师微信小程序-上(下)

效果

全栈开发工程师微信小程序-上(下)

icon 图标

success, success_no_circle, info, warn, waiting, cancel, download, search, clear
<view class="group">
  <block wx:for="{{iconSize}}"><icon type="success" size="{{item}}" /></block>
</view>

<view class="group">
  <block wx:for="{{iconType}}"><icon type="{{item}}" size="40" /></block>
</view>

<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}" />
  </block>
</view>
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})
success
success_no_circle
success_circle

info
// info_no_circle
info_circle

warn
// warn_no_circle
// warn_circle

waiting
// waiting_no_circle
waiting_circle

cancel
// cancel_no_circle
// cancel_circle

download
// download_no_circle
// download_circle

search
clear

icon图标

type: icon类型
size: icon大小
color: icon颜色

text 文本

selectable 文本是否可选
space 显示连续空格
decode 是否解码
<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>
const initData = 'this is first line\nthis is second line'
const extraLine = []
Page({
  data: {
    text: initData
  },
  add(e) {
    extraLine.push('other line')
    this.setData({
      text: initData + '\n' + extraLine.join('\n')
    })
  },
  remove(e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initData + '\n' + extraLine.join('\n')
      })
    }
  }
})

效果

rich-text 富文本

支持默认事件,包括:tap、touchstart、touchmove、touchcancel、touchend和longtap

nodes 节点列表 / HTML String
space 显示连续空格

nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降

rich-text是微信小程序的富文本组件,用于渲染部分html标签.

nodes 文本节点:type = text,全局支持classstyle属性,不支持id属性。

// 元素节点:type = node
// name
// attrs
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

// rich-text.js
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

progress 进度条

percent 百分比0~100
show-info 在进度条右侧显示百分比
border-radius 圆角大小
font-size 右侧百分比字体大小
stroke-width 进度条线的宽度
color 进度条颜色
activeColor 已选择的进度条的颜色
backgroundColor 未选择的进度条的颜色
active 进度条从左往右的动画
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

效果

表单组件

效果

button 按钮

size 按钮的大小
type 按钮的样式类型
plain 按钮是否镂空,背景色透明
disabled 是否禁用
loading 名称前是否带 loading 图标
open-type 微信开放能力
hover-class 指定按钮按下去的样式类
hover-start-time 按住后多久出现点击态
hover-stay-time 手指松开后点击态保留时间
lang 指定返回用户信息的语言
session-from 会话来源
send-message-title 会话内消息卡片标题
send-message-path 会话内消息卡片点击跳转小程序路径
send-message-img 会话内消息卡片图片
bindcontact 客服消息回调
bindgetphonenumber 获取用户手机号回调
app-parameter 打开 APP 时,向 APP 传递的参数

效果

open-type="getUserInfo",用于获取用户信息.

<button bindgetuserinfo="" open-type="getUserInfo" type="primary">用户授权</button>
<button open-type="contact">进入客服会话</button>

checkbox-group 多项选择器,内部由多个checkbox组成

checkbox 多选项目

value 标识
disabled 是否禁用
<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</checkbox-group>
Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  }
})

form 表单

将组件内的用户输入的<switch/><input/><checkbox/><slider/><radio/><picker/>
bindsubmit 携带 form 中的数据触发 submit 事件
bindreset 表单重置时会触发 reset 事件
Page({
  formSubmit(e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value)
  },
  formReset() {
    console.log('form发生了reset事件')
  }
})
<form bindsubmit="formSubmit" bindreset="formReset">

<switch name="switch" />
<slider name="slider" show-value></slider>
<input name="input" placeholder="please input here" />
<radio-group name="radio-group">
<checkbox-group name="checkbox">

<button form-type="submit">Submit</button>
<button form-type="reset">Reset</button>

input 输入框

value 输入框的初始内容
type input 的类型
password 是否是密码类型
placeholder 输入框为空时占位符
placeholder-style 指定 placeholder 的样式
placeholder-class 指定 placeholder 的样式类
disabled 是否禁用
maxlength 最大输入长度
cursor-spacing 指定光标与键盘的距离
auto-focus 自动聚焦,拉起键盘
focus 获取焦点
confirm-type 设置键盘右下角按钮的文字
confirm-hold 点击键盘右下角按钮时是否保持键盘不收起
cursor 指定focus时的光标位置
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘

confirm-type 有效值:

send 右下角按钮为“发送”
search 搜索
next 下一个
go 前往
done 完成

效果

label 用来扩展目标组件的可单击区域.

  1. 使用for属性找到对应的id,单击label的区域,会触发对应的控件.
  2. 将目标组件作为子标签直接放在label组件内部.

for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件,用来改进表单组件的可用性,使用for属性找到对应的id.

目前绑定控件:

<button> <checkbox> <radio> <switch>

label主要是用于什么?

对于checkbox组件本身没有文本,就要借助label组件进行扩展,然后就可单击区域,如果没有checkbox放在label标签的内部,那么单击时,就不会被选中.

radio同样没有默认标签文本,所以可用label.对于radio的代码使用了labelfor属性,一个labelfor属性对应于一个radioid.

picker

普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器

// 普通选择器:mode = selector
// 多列选择器:mode = multiSelector
// 时间选择器:mode = time
// 日期选择器:mode = date
// 省市区选择器:mode = region
mode的属性:
单选: selector
多选: multiSelector
时间: time
日期: date
省市: region

picker-view 嵌入页面的滚动选择器

picker组件是基于picker-view组件实现的.

radio-group 单项选择器,是由多个单选项目<radio/>组成.

// radio-group
bindchange

// radio
value 标识
checked 当前是否选中
disabled 是否禁用
color radio的颜色

slider 滑动选择器

min 最小值
max 最大值
disabled 是否禁用
value 当前取值
color 背景条的颜色
activeColor 已选择的颜色
backgroundColor 背景条的颜色
show-value 是否显示当前 value
<view class="section section_gap">
  <text class="section__title">设置step</text>
  <view class="body-view"><slider bindchange="slider2change" step="5" /></view>
</view>

<view class="section section_gap">
  <text class="section__title">显示当前value</text>
  <view class="body-view">
    <slider bindchange="slider3change" show-value />
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">设置最小/最大值</text>
  <view class="body-view">
    <slider bindchange="slider4change" min="50" max="200" show-value />
  </view>
</view>
const pageData = {}
for (let i = 1; i < 5; i++) {
  (function (index) {
    pageData['slider' + index + 'change'] = function (e) {
      console.log('slider' + 'index' + '发生 change 事件,携带值为', e.detail.value)
    }
  }(i))
}
Page(pageData)

效果

min: 最小值
max: 最大值
step: 表示步长
backgroundColor: 表示背景色
activeColor: 表示已经选择的颜色
show-value: 表示是否显示当前value

switch 开关选择器

checked 是否选中
disabled 是否禁用
type 样式,有效值:switch, checkbox
bindchange checked 改变时触发 
color switch 的颜色
<view class="body-view">
  <switch checked bindchange="switch1Change" />
  <switch bindchange="switch2Change" />
</view>

Page({
  switch1Change(e) {
    console.log('switch1 发生 change 事件,携带值为', e.detail.value)
  },
  switch2Change(e) {
    console.log('switch2 发生 change 事件,携带值为', e.detail.value)
  }
})

效果

textarea 多行输入框

value 输入框的内容
placeholder 输入框为空时占位符
placeholder-style 指定 placeholder 的样式
placeholder-class 指定 placeholder 的样式类
disabled 是否禁用
maxlength 最大输入长度
auto-focus 自动聚焦,拉起键盘
focus 获取焦点
cursor 指定focus时的光标位置

如果看了觉得不错

点赞!转发!

达叔小生:往后余生,唯独有你 You and me, we are family ! 90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通 简书博客: 达叔小生 https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序九宫格

    达达前端
  • 全栈开发工程师微信小程序-上(中)

    750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.

    达达前端
  • (9)打鸡儿教你Vue.js

    设置元素的样式 用 v-bind 来设置样式属性 class 与 style 是 HTML 元素的属性

    达达前端
  • 玩转Linux命令 tail命令详解

    前几天看到一同事正在使用这个命令,感觉有点陌生,然后就问了一嘴,-f是啥意思,同事说,他也忘了,他知其然不知其所以然。 今天突然看到关于这个命令的详细介绍,所以...

    软测小生
  • 玩转Mysql系列 - 第7篇:玩转select条件查询,避免采坑

    电商中:我们想查看某个用户所有的订单,或者想查看某个用户在某个时间段内所有的订单,此时我们需要对订单表数据进行筛选,按照用户、时间进行过滤,得到我们期望的结果。

    路人甲Java
  • 在Linux命令中tail的用法

    沈唁
  • 《指数基金投资指南》第1章 投资新手的建议

    yeedomliu
  • Mysql第六讲 select查询基础篇

    ifnull函数,2个参数,判断第一个参数是否为空,如果为空返回第一个参数的值,否则返回第一个参数的值。

    易兮科技
  • GitHub 上的这个开源项目也太有创意了吧!

    我们都知道,Git 作为当下最为主流的分布式版本控制系统,已然成为程序员生活中不可或缺的一款开发工具。

    GitHubDaily
  • 玩转Mysql系列 - 第6篇:select查询基础篇

    DQL(Data QueryLanguage):数据查询语言,通俗点讲就是从数据库获取数据的,按照DQL的语法给数据库发送一条指令,数据库将按需求返回数据。

    路人甲Java

扫码关注云+社区

领取腾讯云代金券