“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情”
1.常用的基础内容组件
1. text
- 文本组件
- 类似于HTML中的span标签，是一个行内元素
2. rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
2.text组件的基本使用
通过text组件的selectable属性，实现长按选中文本内容的效果：
代码如下：
<view>
<text selectable="">
手机号码13982662712
</text>
</view>
3.rich-text组件的基本使用
通过rich-text组件的nodes属性节点，把HTML字符串渲染成对应的UI结构
对应的代码如下：
<view>
<text selectable="">
手机号码13982662712
</text>
</view>
<rich-text nodes="<h1 style='color:blue;'>首页</h1>">
</rich-text>
4.其他常用组件
1. button
- 按钮组件
- 功能比HTML的按钮更加丰富
- 通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息等等）。
2. image
- 图片组件
- image组件默认宽度约为300px,高度约为240px。
3. navigator
- 页面导航组件
- 类似于HTML中的a链接
5.button组件的基本使用
1. 通过type指定按钮的类型
- 不写type那就是默认的按钮
- type="primary" 主色调的按钮
- type="warn" 警告按钮
代码如下：
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
2.通过size="mini"来来按钮设置成小按钮
代码如下：
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
效果图如下：
3.plain属性设置镂空按钮
代码如下：
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
效果图如下：
上面三种的按钮代码框架如下：
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
整体的样式效果图如下：
那么如何改变上面按钮的样式呢？
app.json里面有一个样式是专门控制整个小程序的样式的：
代码如下：
{
"pages":[
"pages/list/list",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
效果图如下：
“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21天，点击查看活动详情”
