signed

QiShunwang

“诚信为本、客户至上”

初学小程序(第4天)

2021/6/24 20:15:12   来源:

1.常见组件

重点讲解⼩程序中常⽤的布局组件

view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox。 等

1.1 view
代替 原来的 div 标签

<view hover-class="h-class">
 点击我试试
  </view>

1.2 text

  1. ⽂本标签
  2. 只能嵌套text
  3. ⻓按⽂字可以复制(只有该标签有这个功能)
  4. 可以对空格 回⻋ 进⾏编码

1.3 image

  1. 图⽚标签,image组件默认宽度320px、⾼度240px
  2. ⽀持懒加载
    在这里插入图片描述

mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9种是裁剪模式。
在这里插入图片描述
1.4 swiper

微信内置轮播图组件

在这里插入图片描述
默认宽度 100% ⾼度 150px
在这里插入图片描述
1.4.1 swiper-item

滑块

默认宽度和⾼度都是100%
1.5 navigator

导航组件 类似超链接标签

在这里插入图片描述
open-type 有效值:
在这里插入图片描述
1.6 rich-text

富文本标签

可以将字符串解析成 对应标签,类似 vue中 v–html 功能
在这里插入图片描述
代码

// 1   index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
    
// index.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')
 }
})

1.6.1 nodes属性
nodes 属性⽀持 字符串 和 标签节点数组
在这里插入图片描述
⽂本节点:type = text
在这里插入图片描述

  • nodes 不推荐使⽤ String 类型,性能会有所下降。
  • rich–text 组件内屏蔽所有节点的事件。
  • attrs 属性不⽀持 id ,⽀持 class 。
  • name 属性⼤⼩写不敏感。
  • 如果使⽤了不受信任的 HTML 节点,该节点及其所有⼦节点将会被移除。
  • img 标签仅⽀持⽹络图⽚。
    1.7 button
    在这里插入图片描述
<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>

在这里插入图片描述
size 的合法值
在这里插入图片描述
type 的合法值
在这里插入图片描述
form-type 的合法值
在这里插入图片描述
open-type 的合法值
在这里插入图片描述
open-type 的 contact的实现流程

  1. 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid
  2. 登录微信⼩程序官⽹,添加 客服 – 微信
  3. 为了⽅便演⽰,⽼师⾃⼰准备了两个账号
    普通⽤⼾ A
    客服-微信 B
  4. 就是⼲!
    1.8 icon
    在这里插入图片描述
    代码:
    js
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }
})

wxml

<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>

1. 9radio

可以通过 color属性来修改颜色

在这里插入图片描述
需要搭配 radio-group ⼀起使⽤
1.10 checkbox

可以通过 color属性来修改颜色

在这里插入图片描述
需要搭配 checkbox-group ⼀起使⽤

以上就是今天所学内容