【微信小程序自学第一天】主要内容是text插件以及button按钮插件以及image图像插件

前言

作为大一萌新挑战自学微信小程序，在备战蓝桥杯的同时学一点类似服务外包竞赛的内容，本人在上大一之前没有接触过任何编程，还希望各位大佬多多指教！

正文

常用的基础内容组件

text

• 文本组件
• 类似于HTML中的span标签，是一个行内元素

rich-text

• 富文本组件
• 支持把HTML字符串渲染为WXML结构

text组件的基本操作

通过text组件的selectable属性，实现长按选中文本内容的效果
就像这样：

<!-- 常用的基础组件text和rich-text的用法 -->
<view>
  手机号支持长按选中效果(只能通过手机选中)
  <text selectable>13800005056</text>
</view>

text-rich组件的基本操作

通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构

<!-- 应用场景：商品详情页的结构渲染 -->
<rich-text nodes="<h1 style='color:red;'>标题<h1>"></rich-text>

这样会出来一个红色的标题（style是用来渲染标题的）
结果应该是这个样子：

其他常用组件

button按钮组件

• 按钮组件
• 功能比HTML中的button按钮丰富
• 通过opren-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等 ）

image图像组件

• 图片组件
• image组件默认宽度为300px，高度为240px

image组件的src属性

可以选择根目录下的特定照片（不过要先新建一个文件夹然后将图片拖入该文件夹中才可以）

<!-- image图片组件 -->
<image></image>
<image src="/images/apic27858.jpeg"></image>

image组件的mode属性

通过该属性来进行图片的裁剪和缩放模式，常用的mode属性值如下：

mode值	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片 使图片的宽高完全拉伸至**填满image元素 **
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能够完全显示出来，也就是可以是图片完整地显示出来
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能够完全显示出来也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比例不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比例不变

<!-- image图片组件 -->
<image></image>
<image src="/images/apic27858.jpeg" mode="aspectFill"></image>

navigator导航组件（后面会提及）