1. 常见组件

  • 重点讲解小程序中常用的布局组件

1.1 view

代替 原来的div标签

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

<view hover-class="h-class">

    点击我试试

</view>


/* pages/index/index.wxss */

.h-class{

  color: green;

}

1.2 text

  1. 文本标签
  2. 只能嵌套text
  3. 长按文字可以复制 (只有该标签有这个功能)
  4. 可以对空格 回车 进行编码
属性名 类型 默认值 说明
selectable Boolean false 文本是否可选
decode Boolean false 是否解码 
  <!-- text 标签测试 -->

  <text selectable="false" decode="false">

    普&nbsp;通

  </text>

1.3 image

  1. 图片标签, image组件默认宽度320px、高度240px
  2. 支持懒加载
属性名 类型 默认值 说明
src String 图片资源地址
mode String 'scaleToFill' 图片裁剪、缩放的模式
lazy-load Boolean false 图片懒加载

mode有效值:

  • model 有13种模式,其中4种是缩放模式, 9种是裁剪模式
模式 值 说明
缩放 scaleToFill 不保持纵横比缩放图片, 使图片的宽高完全拉伸至填满image元素
缩放 aspectFit 保持纵横比缩放图片, 使图片的长边能完全显示出来
缩放 aspectFill 保持纵横比缩放图片, 只保证图片的短边能完全显示出来
缩放 widthFix 宽度不变, 高度自动变化, 保持原图宽高比不变
裁剪 top 不缩放图片, 只显示图片的顶部区域
裁剪 bottom 不缩放图片, 只显示图片的底部区域
裁剪 center 不缩放图片, 只显示图片的中间区域
裁剪 left 不缩放图片, 只显示图片的左边区域
裁剪 right 不缩放图片, 只显示图片的右边区域
裁剪 top left 不缩放图片, 只显示图片的左上边区域
裁剪 top right 不缩放图片, 只显示图片的右上边区域
裁剪 bottom left 不缩放图片, 只显示图片的左下边区域
裁剪 bottom right 不缩放图片, 只显示图片的右下边区域

1.4 swiper

微信内置轮播图组件

  • swiper : 块视图容器。
  • swiper-item: 滑块, 默认宽度和⾼度都是100%

  • 默认宽度 100% 高度150px
属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgb(0,0,0,.3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换
interval Number 5000 自动切换时间间隔
circular Boolean false 是否循环轮播 
<!--

"pages/SwiperText/SwiperText.wxml",

1. 轮播图的外层容器: swiper

2. 每一个轮播项: swiper-item

3. swiper存在默认样式

    - width: 100%

    - height: 150px image 存在默认宽度和高度 320 * 240

4. swiper 高度无法实现由内容撑开

5. 先找出来原图的高度和宽度, 等比例给swiper定宽度和高度

    - 原图的宽高880 * 388

    - swiper宽度 / swiper 高度 = 原图宽度 / 原图高度

    - swiper高度  = swiper 宽度 * 原图的高度 / 原图的宽度

      height : calc(100vw * 338 / 880)

 -->

<swiper indicator-dots="true" autoplay>

  <swiper-item>

    <image mode="widthFix" src="https://i0.hdslb.com/bfs/feed-admin/5ef9aa23c480cf40998be6f0897bcad4ad8e8e3f.jpg@880w_388h_1c_95q">

    </image>

  </swiper-item>

  <swiper-item>

    <image mode="widthFix" src="	https://i0.hdslb.com/bfs/feed-admin/c7c308997d904ec7770062fb0e2062dfeaf54f89.png@880w_388h_1c_95q">

    </image>

  </swiper-item>

  <swiper-item>

    <image mode="widthFix" src="	https://i0.hdslb.com/bfs/feed-admin/5f60c09eb96f604bc4fc8ea78ef5b3be6ef67963.png@880w_388h_1c_95q">

    </image>

  </swiper-item>

</swiper>


/* pages/SwiperText.wxss */

swiper{

  width: 100%;

  height : calc(100vw * 338 / 880)

}

image{

  width: 100%;

}

1.5 navigator

导航组件 类似超链接标签

属性名 类型 默认值 说明
target String self 在哪个目标上发生跳转, 默认当前小程序, 可选值 self/miniProgram
url String 当前小程序内的跳转连接
open-type String navigate 跳转方式
  • open-type 有效值:
值 说明
navigate 保留当前页面, 跳转到应用内的某个页面, 但是不能跳到 tabbar 页面
redirect 关闭当前页面, 跳转到应用内的某个页面, 但是不允许跳转到 tabbar 页面
switchTab 跳转到tabBar页面, 并关闭其他所有非 tabBar 页面
reLaunch 关闭所有页面, 打开到应用内的某个页面
navigateBack 关闭当前页面, 返回上一页面或多级页面, 可通过 getCurrentPages() 获取当前的页面栈, 决定需要返回几层
exit 退出小程序, target="miniProgram"时生效 
<!--pages/navigatorText/navigatorText.wxml-->

<!--

  导航组件: navigator

  0 相当于一个块级元素, 默认会换行 可以直接加宽高

  1. url: 要跳转的页面路径 绝对路径|相对路径

  2. target: 要跳转到当前小程序页面 还是其他的小程序页面

        self: 默认值 自己

        miniProgram: 其他的小程序页面

  3. open-type: 跳转的方式

 -->

<view>

  <navigator url="/pages/SwiperText/SwiperText">轮播图页面</navigator>

  <navigator url="/pages/SwiperText/SwiperText">轮播图页面</navigator>

</view>

1.6 rich-text

富文本标签

可以将字符串解析成 对应标签, 类似Vue 中v-html功能

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

<!-- 1. 加载 节点数组-->

<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属性支持 字符串和标签节点数组

属性 说明 类型 必填 备注
name 标签名 String 是 支持部分受信任的HTML节点
attrs 属性 Object 否 支持部分受信任的属性, 遵循 Pascal命名法
children 子节点列表 array 否 结构和 nodes一致

文本节点: type = text

属性 说明 类型 必填 备注
text 文本 string 是 支持entities
  • 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 string default 否 按钮的大小
type string default 否 按钮的样式类型
plain boolean false 否 按钮是否镂空, 背景色透明
disabled boolean false 否 是否禁用
loading boolean false 否 名称前是否带 loading 图标
form-type string 否 用于''组件, 分别会触发 ''组件的
open-type string 否 微信开发能力

1.7.1 size 的合法值

值 说明
default 默认大小
mini 小尺寸

1.7.2 type 的合法值

值 说明
primary 绿色
default 白色
warn 红色

1.7.3 form-type的合法值

值 说明
submit 提交表单
reset 重置表单

1.7.4 open-type 的合法值

值 说明
contact 打开客服会话, 如果用户在会话中点击消息卡片后返回小程序, 可以从 bindcontact 回调中获得具体信息
share 触发用户转发
getPhoneNumber 获取用户手机号, 可以从bindgetphonenumber回调中获取到用户信息`
launchApp 打开 APP, 可以通过app-parameter属性设定向APP传的参数
openSetting 打开授权设置页
feedback 打开"意见反馈"页面, 用户可提交反馈内容并上传日志, 开发者可以登录小程序管理后台后进入左侧菜单 "客服反馈"页面获取到反馈内容

1.8 icon

属性 类型 默认值 必填 说明
type string 是 icon的类型, 有效值: success, success_no_circle, info,warn,waiting,cancel, download,search, clear
size number/string 23 否 icon的大小
color string 否 icon的颜色, 同css的color

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.9 radio

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



需要搭配 radio-group ⼀起使⽤

1.10. checkbox

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



需要搭配 checkbox-group ⼀起使⽤

最新文章

  1. 【腾讯Bugly干货分享】Android Linker 与 SO 加壳技术
  2. Mono 4.0 Mac上运行asp.net mvc 5.2.3
  3. NSLog(@&quot;%@&quot;,类对象); 默认输出类名
  4. spring配置entitymangerfactory
  5. Git教程学习(五)
  6. Install Sogou IM 2.0 in Ubuntu14.04+/Xfce
  7. Python-Day15 JavaScript/DOM
  8. Android TextView 实现文字大小不同和文字颜色不同
  9. window2003远程桌面“已达最大连接数”
  10. 【正则表达式】--python（表示字符）
  11. for循环，for in和for of的区别
  12. Windows下Oracle的下载与安装
  13. LOJ #6050. 「雅礼集训 2017 Day11」TRI
  14. 11.Flask钩子函数
  15. AI 基础
  16. Redis哨兵模式（sentinel）学习总结及部署记录（主从复制、读写分离、主从切换）
  17. HTML各种标签复习
  18. 【原】ATI显卡设置双显示器
  19. 编译支持opengl的opencv
  20. 关于找不到类org/apache/commons/lang/xwork/StringUtils的问题

热门文章

  1. 微信小程序云开发-云函数-云函数获取参数并实现运算
  2. 【LeetCode】94. 二叉树的中序遍历
  3. FiddlerEverywhere 的配置和基本应用
  4. odoo14开发之脚本自动生成代码
  5. 第二十五篇 -- C++宝典中的图书管理系统
  6. 《MySQL实战45讲》(1-7)笔记
  7. Windows 系统安装 git基础小白的简单操作包含基本输入命令
  8. PWN——ret2dl_resolve
  9. [WesternCTF2018]shrine(SSTI+过滤)
  10. RHCSA_DAY05