button组件

按钮组件，属于表单组件之一

常用属性：

例子（用的是"style": "v2"的组件样式，旧版和新版有区别）：
wxml代码：

<view>
<!-- type：按钮样式（default,primary,warn） --><button bindtap="onGetInfo">普通按钮</button><button type="primary">主色调按钮</button><button type="warn">警告按钮</button><!-- size:按钮大小（mini,default） --><button size="mini">普通按钮</button><button type="primary" size="mini">主色调按钮</button><button type="warn" size="mini">警告按钮</button><!-- plain:镂空按钮，无背景色 --><button plain>普通按钮</button><button type="primary" plain>主色调按钮</button><button type="warn" plain>警告按钮</button>
</view>

效果图：

image组件

图片组件，属于媒体组件

常用属性：

例子：

wxml代码：

<!-- image标签默认有width和height 320px*240px-->
<scroll-view><view><image src="" /></view><!-- mode：设置填充模式 --><!-- scaleToFill:（默认方式）不按照比例，直接拉伸至填满 --><view>默认</view><view><image src="/images/17e337e34668b2fdeb3aade4f8188ef5_t.jpg" mode="scaleToFill"/></view><!--aspectFill:保持比例，使图片短边能够充满  --><view>aspectFill<image src="/images/17e337e34668b2fdeb3aade4f8188ef5_t.jpg" mode="aspectFill"/></view><!--aspectFit:保持比例，使图片最长边可以充满 --><view>aspectFit<image src="/images/17e337e34668b2fdeb3aade4f8188ef5_t.jpg" mode="aspectFit"/></view>
<!-- widthFix:宽度不变，改变height，保持图片宽高比不变 --><view>widthFix<image src="/images/17e337e34668b2fdeb3aade4f8188ef5_t.jpg" mode="widthFix"/></view><!-- heigthFix:高度不变，改变width，保持图片宽高比不变 --><view>heightFix<image src="/images/17e337e34668b2fdeb3aade4f8188ef5_t.jpg" mode="heightFix"/></view>
</scroll-view>

效果图：

text组件

文本组件，类似于html中的span标签。

常用属性：

例子：

wxml代码：

<view style="margin-top: 100px;"><text>hello    world</text>
</view>
<view ><text decode = "{{true}}">hello&nbsp;&nbsp;&nbsp;world</text>
</view>

效果图：

rich-text

富文本组件，可以用于插入html语句，比如h1标签，div标签等

常用属性：

例子：

wxm代码：

<rich-text nodes="<h1 style='color:red;'>标题</h1>"/>
<rich-text nodes="<div style='margin-top:20px'>这是一个div容器<ul><li>1</li><li>2</li><li>3</li></ul></div>"/>

效果图：

小程序基础组价（二）相关推荐

微信小程序基础（全家福01）
微信小程序基础目标能够知道如何创建小程序项目能够清除小程序项目的基本组成结构能够知道小程序页面有几个部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布讲解目录 ...
微信小程序基础学习笔记Day01
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面由几部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行 ...
更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
微信小程序基础知识
一.微信小程序是什么微信小程序是一种不需要下载安装即可使用的应用微信小是2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线. 二.微信小程序商业价值依托微信,有强大广 ...
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
小程序基础、云服务介绍
一.组件及基础属性介绍 1.属性介绍属性含义 text 文本 view 区域 button 按钮 input 表单 image 图片 include 包含 import 导入 web-view 导 ...

小程序基础组价（二）

button组件

image组件

text组件

rich-text

小程序基础组价（二）相关推荐

最新文章

热门文章