进入公众号平台,360网站排名优化,合肥网站推广优化,wordpress 钩子教学常用的组件内容标签
text 文本组件类似于HTML中的span标签#xff0c;是一个行内元素rich-text 富文本标签支持把HTML字符串渲染为WXML结构
text标签的基本使用
通过text组件的selectable属性#xff0c;实现长按选中文本内容的效果。只有text标签支持长按选中效果#x…常用的组件内容标签
text 文本组件类似于HTML中的span标签是一个行内元素rich-text 富文本标签支持把HTML字符串渲染为WXML结构
text标签的基本使用
通过text组件的selectable属性实现长按选中文本内容的效果。只有text标签支持长按选中效果其他的组件是不支持的 结构内容代码
view classtext-view 支持长按选中手机号 text selectable176xxxxxxxx/text
/view
样式内容代码
.text-view{ margin-top: 15px; margin-left: 15px;
}
上面的代码的实现效果就是手机号的部分可以长按选中但是文字的部分是无法长按选中的。
rich-text组件的基本使用
通过rich-text组件的nodes属性节点把HTML字符串渲染为对应的UI结构 结构内容代码
view classtext-view 支持长按选中手机号 text selectable176xxxxxxxx/text rich-text nodesh1这是HTML的一级标题h1/
/view
样式内容代码
.text-view{ margin-top: 15px; margin-left: 15px;
}
上面的效果是将rich-text标签中的nodes属性的HTML标签渲染为微信的样式并将内容进行展示。
这个标签一般适用于接收在电脑的服务端返回的HTML标签文本的时候将其转换成微信小程序的样式在小程序中进行展示时使用。
其他常用组件
button 按钮组件功能比HTML中的button按钮丰富通过open-type属性可以调用微信提供的各种功能客服转发获取用户权限获取用户信息等image 图片组件image组件默认宽度越300px高度越240pxnavigator后面课程会专门讲解 页面导航组件类似于HTML中的a连接标签
button按钮的基本使用 结构内容代码
view classbotton_view !-- 默认按钮 -- button默认按钮/button !-- 警告按钮 -- button typewarn警告按钮/button !-- 确认按钮 -- button typeprimary确认按钮/button !-- 迷你按钮 迷你按钮是行内元素并且并不独占一行-- button sizemini typeprimary迷你确认按钮/button button sizemini typewarn迷你警告按钮/button button sizemini迷你默认按钮/button !-- 镂空按钮 -- button plain typeprimary镂空确认按钮/button button plain typewarn镂空警告按钮/button button plain 镂空默认按钮/button
/view
样式内容代码
.botton_view{ margin-top: 15px; margin-left: 15px;
}
.botton_view button{ margin-top: 10px;
}
在使用button组件的时候可以使用type属性去指定按钮的样式size属性指定按钮的大小以及通过添加plain属性去使按钮出现镂空样式。
image组件的基本使用 结构内容代码
view classimg_view image src./image/幼儿园-LOGO.jpg modewidthFix/
/view
样式内容代码
.img_view{ border: 1px solid red; margin: 0 auto; text-align: center; width: 100px; height: 100px;
}
.img_view image{ width: 100px; height: 100px;
}
图片标签的使用与HTML中的基本相似但是在微信小程序的image标签中还有一个属性用于控制图片的缩放格式
image组件的mode属性用来指定图片的裁剪和缩放模式常用的mode属性值如下 mode值 说明 scaleToFill 默认值缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满image元素。会填满元素导致形变。 aspectFit 缩放模式保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整的将图片显示出来但是会导致周围没有被填满的部分出现白色边框。 aspectFill 缩放模式保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或者垂直方向是完整的另一个方向将会发生截取。 widthFix 缩放模式宽度不变高度自动变化保持原图宽高比不变。 heigjtFix 缩放模式高度不变宽度自动变化保持原图宽高比不变。
