小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

组件

文字

文本

图标组件

图片

表单组件

输入框

按钮

开关选择器

从底部弹起的滚动选择器

容器组件

可滚动视图区域

滑块视图容器

WXML语法

文本渲染

条件渲染

wx:if

wx:else、wx:elif

列表渲染

wx:for

wx:key

自定义列表渲染

模板 template

定义模板

使用模板

引用 include

组件

文字

<view>

逻辑视觉分区（div）

<text> 文本

文本（span）
属性：user-select="true" 用户长按选择

<icon> 图标组件

type

success 成功、success_no_circle、info 信息、warn、 waiting、cancel、download、 search、clear

size ="100" 大小

代码实例：

    <view>块</view><view>块</view><text>文字</text><text user-select="true">文字</text><icon type="success"></icon><icon type="info"></icon><icon type="waiting"></icon>

效果：

图片

<image>

src 图片地址

图片资源地址

mode 模式

scaleToFill 不保持宽高比，缩放
        aspectFit 保持宽高比缩放，长边优先（整个图片都显示）
        aspectFill 保持宽高比缩放，短边优先
        widthFix 宽不变，高自动
        heightFix 高不变，宽自动
        center/left/right/top/bottom 显示局部

代码实例：

wxml：

<image src="/pages/home/images/a.png" class="img" mode="aspectFit"></image>

wxss：

.img {width: 750rpx;height: 300rpx;box-sizing: border-box;
}

效果：

表单组件

<input> 输入框

value 值
placeholder 提示文本
password=true 密码框
type 弹出不同键盘

text   文本输入键盘
number   数字输入键盘
idcard   身份证输入键盘
digit   带小数点的数字键盘
safe-password   密码安全输入键盘
nickname   昵称输入键盘

comfirm-type 键盘右下角案例

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

<button> 按钮

type 颜色类型

primary   绿色
     default   白色
     warn   红色

size = “mini” 行内小按钮

<switch> 开关选择器

color 颜色
type =“checkbox” 选择框

<picker> 从底部弹起的滚动选择器

header-text 选择器的标题，仅安卓可用
mode 选择器类型

times时间
date 日期
region 省市区

代码实例：

    <input placeholder="请输入" password="true"></input><view><button>提交</button><button type="primary" style="width: 100%;">提交</button><button type="warn" size="mini">提交</button></view><switch></switch><switch checked="true" color="#d90"></switch><switch type="checkbox"></switch><picker mode="date">点击选择</picker>

效果：

点击选择时：

容器组件

<scroll-view> 可滚动视图区域

scroll-x 水平，允许横向滚动
scroll-y 垂直，允许纵向滚动

代码实例：

wxml：

    <scroll-view class="s1" scroll-y="true"><view class="item" style="background-color: rgb(255, 242, 126);">1</view><view class="item" style="background-color: rgb(126, 195, 255);">2</view><view class="item" style="background-color: rgb(173, 255, 126);">3</view></scroll-view><scroll-view class="s1" scroll-x="true"><view class="s2"><view class="item" style="background-color: rgb(186, 126, 255);">1</view><view class="item" style="background-color: rgb(126, 195, 255);">2</view><view class="item" style="background-color: rgb(173, 255, 126);">3</view></view></scroll-view>

wxss：

.s1 {width: 375rpx;height: 375rpx;
}
.s2 {width: 1125rpx;display: flex;flex-wrap: nowrap;
}
.item {width: 375rpx;height: 375rpx;
}

效果：

上面的小方块可以上下滑动，下面的小方块可以左右滑动

<swiper> 滑块视图容器

其中只可放置 <swiper-item> 组件

indicator-dots="true" 是否显示提示点
autoplay="true" 自动播放
circular="true" 衔接滑动

代码实例：

wxml：

<swiper class="swiper" autoplay="true" circular="true" indicator-dots="true"><swiper-item><view style="background-color: rgb(255, 242, 126);">1</view></swiper-item><swiper-item><view style="background-color: rgb(126, 195, 255);">2</view></swiper-item><swiper-item><view style="background-color: rgb(173, 255, 126);">3</view></swiper-item>
</swiper>

wxss：

.swiper {height: 250rpx;
}
.swiper view {height: 250rpx;text-align: center;
}

效果：

轮播

WXML语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

文本渲染

数据绑定使用 Mustache 语法（双大括号）将变量包起来

代码实例：

wxml：

    <view>{{5+5}}</view><view>{{msg}}</view><view>{{msg.length}}</view><input type="text" placeholder="{{msg}}"/>

js：

    data: {msg:"你好我是msg",},

效果：

条件渲染

wx:if

使用 wx:if="" 来判断是否需要渲染该代码块

wx:else、wx:elif

也可以用 wx:else 和 wx:elif 来添加一个 else 块

代码实例：

wxml：

    <view wx:if="{{isLog}}">欢迎回来</view><view wx:else>请登录</view><view wx:if="{{sc>=90}}">辟邪剑谱，拿去！</view><view wx:elif="{{sc>=80}}">独孤九剑，拿去！</view><view wx:elif="{{sc>=70}}">破剑，拿去！</view><view wx:else>呵呵</view>

js：

    data: {isLog:true,sc:100,},

效果：

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组

wx:key

用来指定列表中项目的唯一的标识符

代码实例：

wxml：

    <view wx:for="{{list}}" wx:key="index">{{index+1}}-{{item}}</view>

js：

    data: {list:["xcx","vue","react"]},

效果：

自定义列表渲染

代码实例：

wxml：

    <view wx:for-item="myitem" wx:for-index="myindex" wx:for="{{list}}" wx:key="myindex">{{myindex+1}}-{{myitem}}</view>

js：

    data: {list:["xcx","vue","react"]},

效果：同上

模板 template

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在 <template> 内定义代码片段

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

代码实例：

/template/user.wxml：

<template name="user"><view>用户名：{{name}}</view><view>年龄：{{age}}</view>
</template>
<template name="copy"><view>小菜粥</view>
</template>

wxml：

    <import src="/template/user"></import><template is="user" data="{{name:'粥',age:18}}"></template><template is="copy" data="{{name:'zhou',age:18}}"></template>

效果：

引用 include

WXML 提供两种文件引用方式 import 和 include

include 相当于是拷贝到 include 位置

代码实例：

wxml：

    <include src="/template/foot"></include><include src="/template/foot"></include>

/template/foot.wxml：

<view>我是小菜粥</view>

效果：

详情可见：微信开放文档

关于小程序的更多知识(事件)，我们下期再见..

小程序入门第二课 — 组件与WXML语法相关推荐

微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
小程序入门学习03--navigator组件
navigator组件 text元素内只能包含纯文本颜色设置会相互覆盖(wxss中后者会覆盖前者,wxml中会覆盖wxss的)  < ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
微信小程序入门教程---列表渲染多层嵌套循环及wx:key的使用(双层for循环)
前言入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for="{{items} ...
微信小程序全面实战，架构设计躲坑攻略(小程序入门捷径教程)
转自:http://www.cnblogs.com/dragondean/p/6247643.html 最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版) ...
微信小程序入门（二）
上回刚说到关于这个WXSS的简单内容,那么今天这个入门二就顺着上一篇的内容来继续讲一讲关于小程序入门的一系列内容选择器开发者文档从开发者文档中我们可以知道,小程序不支持通配符 * ,也就是说例如 ...
小程序入门教程之微信-03-脚本编程
本篇的难度要大于前两篇,如果觉得不好理解,可以先跟着例子,动手做一遍,然后再读文字说明,可能就容易理解了. 所有示例的完整代码,都可以从 GitHub 的代码仓库下载. 一.数据绑定前面的所有示例, ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...

小程序入门第二课 — 组件与WXML语法

组件

文字

<view>

<text> 文本

<icon> 图标组件

图片

<image>

表单组件

<input> 输入框

<button> 按钮

<switch> 开关选择器

<picker> 从底部弹起的滚动选择器

容器组件

<scroll-view> 可滚动视图区域

<swiper> 滑块视图容器

WXML语法

文本渲染

条件渲染

wx:if

wx:else、wx:elif

列表渲染

wx:for

wx:key

自定义列表渲染

模板 template

定义模板

使用模板

引用 include

小程序入门第二课 — 组件与WXML语法相关推荐

最新文章

热门文章