前提：建议还没学HTML、CSS、JavaScript、JSON、vue、Ajax的兄弟姐妹们，先去把这些基础补好过一遍，不然不好理解微信小程序
1、视图容器标签
以前学HTML的时候视图容器标签一般都是<div>、<span>，但是现在不同了，wxml的视图容器标签是<view>、<scroll-view>、<swiper>
<view>
就是HTML的<div>，块级元素，
例子：(wxss部分不多做解释，没有基础的先学习一下css，因为是基于css基础的)
wxml部分（就当成div一样正常用就行，随便用）
<view class="first">这是一个view标签，类似div</view>
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>wxss部分（选择器基本和css一样，只有特别偏门的可能会不支持，以后文章会提到）
.first{
height: 2rem;
background-color: pink;
}
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: blanchedalmond;
}
.container1 view:nth-child(2){
background-color: chartreuse;
}
.container1 view:nth-child(3){
background-color: coral;
}
.container1{
display: flex;
justify-content: space-around;
}
【但是注意一点！！】因为点开【app.wxss】会发现“.container”这个类名已经用了，所以在wxss里不要！不要！不要！用【.container】这个类名选择器，上面案例我也是一开始用【.container】发现一点反应没有，直到随便多加了个1......
<scroll-view>
可滚动的视图区域
竖向滚动：在标签加【scroll-y】,另外一定要设置height高度大小
例子：
<!-- 这是竖向滚动区域 -->
<scroll-view class="container1" scroll-y>
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>.container1{
width: 100px;
height: 120px;
margin:auto
}
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: blanchedalmond;
}
.container1 view:nth-child(2){
background-color: chartreuse;
}
.container1 view:nth-child(3){
background-color: coral;
}
横向滚动：在标签里加【scroll-x】，另外一定要设置宽度大小
例子：
但是注意一点！！横向滚动要多两步：
1、在外层容器加【white-space: nowrap;】, white-space是控制容器内的内容是否换行、空白
nowrap就是【不换行】，子容器超过父容器的宽度还是一行显示
2、在内层容器加【display: inline-block;】, 因为flex弹性布局在横向滚动时不起作用
<!-- 这是横向滚动区域 -->
<scroll-view class="container2" scroll-x>
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
</scroll-view>.container2{
/* 横向滚动区域要多做两件事 */
/* 1、在容器外层加white-space: nowrap; */
white-space: nowrap;
/* white-space是控制容器内的内容是否换行、空白
nowrap就是【不换行】，子容器超过父容器的宽度还是一行显示
还有pre-wrap这个值是当里面内容是大量文字，有很多空格和换行时候，都显示
*/
margin-top: 50px;
margin-left: 60px;
width: 200px;
height: 100px;
border: 1px solid blanchedalmond;
}
.container2 view{
/* 2、在容器内层设置display: inline-block; */
/* 因为flex弹性布局在横向滚动时不起作用 */
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container2 view:nth-child(1){
background-color: blanchedalmond;
}
.container2 view:nth-child(2){
background-color: chartreuse;
}
.container2 view:nth-child(3){
background-color: coral;
}
.container2 view:nth-child(4){
background-color: cyan;
}
<swiper>
轮播图容器
例子：
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="green">
<!-- indicator-dots属性就是在下面显示那几个小点 -->
<!-- indicator-color="white"就是没选中时小点啥颜色 -->
<!-- indicator-active-color="green"选中时小点什么颜色 -->
<swiper-item class="item">
<view>1</view>
</swiper-item>
<swiper-item class="item">
<view>2</view>
</swiper-item>
<swiper-item class="item">
<view>3</view>
</swiper-item>
</swiper>.swiper-container{
height: 150px;
text-align: center;
/* 要设置字体高度的话不要在父盒子swiper里设置 */
/* 因为父盒子的line-height设置会影响下面那几个小点点 */
/* 非要设置也行，但注意要反过来，字体高度约小越往下，越大越往上 */
/* line-height: 1px; */
}
.item{
height: 100%;
/* 字体高度尽量在swiper-item容器设置就好了 */
line-height: 150px;
}
.item:nth-child(1){
background-color: cyan;
}
.item:nth-child(2){
background-color: cadetblue;
}
.item:nth-child(3){
background-color: bisque;
}
注意几点：
1、要显示底下那几个小点，就在标签那加上【indicator-dots】
2、要设置字体高度的话不要在父盒子swiper里设置，因为父盒子的line-height设置会影响下面那几个小点点（非要设置也行，但注意要反过来，字体高度约小越往下，越大越往上），字体高度尽量在swiper-item容器设置就好了
3、swiper这组件还有几个常用属性，在标签上加上会有特别效果：
（1）indicator-dots属性就是在下面显示那几个小点
（2）indicator-color=" "就是没选中时小点啥颜色
（3）indicator-active-color=" "选中时小点什么颜色
（4）autoplay就是自动换图
（5）interval=" "就是设置几秒换一张，毫秒单位，1000=1秒
（6）circular就是循环，不设置的话翻到最后一张图就不能翻了；设置了的话，翻到尾，下一张又回到头
2、文本组件：text和rich-text
<text>文本组件，类似div，行内元素
只有text组件可以复制文字，其他都没有；另外要设置了selectable属性，才可以复制
<!-- 只有text组件可以复制文字，其他都没有 -->
<!-- 另外要设置了selectable属性，才可以复制 -->
<text selectable>请长按复制这段文字</text>
<rich-text>富文本组件，支持把HTML字符串渲染成WXML结构
<!-- 富文本可以渲染HTML代码 -->
<rich-text nodes="<h1 style='color:blue'>这是一个HTML代码</h1>"/>
3、其他常用组件
<button>
按钮组件，跟HTML的button基本一样，但是功能比HTML丰富，通过open-type属性可以调用各自功能（客服、转发、获取用户授权、获取用户信息......）
例子：（属性不做过多解释，根据代码和图片对比可以看得出那些属性是什么效果）
<view>~~~~~~~~不同颜色的button~~~~~~~</view>
<!-- type设置按钮颜色样式 -->
<button>默认按钮</button>
<button type="primary">“主要”颜色</button>
<button type="warn">“警告”颜色</button>
<view>~~~~~~~~mini尺寸的button~~~~~~~</view>
<!-- size就两尺寸，一个默认一个mini，mini就是小一点 -->
<button size="mini">mini按钮</button>
<button type="primary" size="mini">mini按钮</button>
<button type="warn" size="mini">mini按钮</button>
<view>~~~~~~~~镂空样式的button~~~~~~~</view>
<!-- 加个plain可以设置镂空样式效果 -->
<button plain>默认按钮</button>
<button type="primary" plain>“主要”颜色</button>
<button type="warn" plain>“警告”颜色</button>
另外这些样式都是app.json的style配置的，目前默认设置的最新版的“V2”版本
去掉的话效果这样（跟这个编辑器颜色没关系哈，上一个图是我的，下一个图是黑马程序员视频截图，我懒而已.......）
<image>
图片组件，HTML里是<img>,这里是<image>,默认宽300px、高240px
例子：
<image src="../img/水果.jpg@h_1280" mode=""/>
<text>默认</text>
<!-- mode指定裁剪、缩放大小，几个常用值： -->
<!-- aspectFit保持纵横比，长的一边完全展示，但是短的一边也缩小，有留白 -->
<image src="../img/水果.jpg@h_1280" mode="aspectFit"/>
<text>aspectFit</text>
<!-- aspectFill保持纵横比，短的显示，也就会放大，图片部分会缺失 -->
<image src="../img/水果.jpg@h_1280" mode="aspectFill"/>
<text>aspectFill</text>
<!-- widthFix宽度不变，高度自动变 -->
<image src="../img/水果.jpg@h_1280" mode="widthFix"/>
<text>widthFix</text>
<!-- heightFix高度不变，宽度自动变 -->
<image src="../img/水果.jpg@h_1280" mode="heightFix"/>
<text>heightFix</text>效果：
反正，自己试去吧，也不用记
<navigator>
页面导航组件，类似HTML的a超链接
这个组件会涉及别的知识点，这里先只这个组件怎么用，具体深入知识以后讲解；
首先，小程序导航跳转页面有两种方式：
第一种是用【<navigator>组件】直接跳转，简单用web角度理解就是类似直接用<a>标签超链接跳转，叫做【声明式导航】；
第二种是用【wx.switchTab( )】跳转，简单用web角度理解就是类似利用JavaScript函数跳转，叫做【编程式导航】。这个就先不讲，先讲第一种【声明式导航】
声明式导航也分两种
1、tabBar页面跳转
tabBar在【JSON配置】会讲，tabBar就是小程序底部或顶部那个导航栏，如果这个页面配置了这条导航栏，那么要跳转到导航栏的页面就是用这个方法
正常json那里配置了下面导航栏一点就可以跳转
那要是我还想通过点上面主体页面的地方跳转到导航栏上某个页面就这样
代码编写规则如下：
url必须有'/'开头，必须要设置open-type="switchTab"，不设置没用
<!-- 声明式导航：导航到tabBar -->
<navigator url="/pages/16_9-grid/9-grid" open-type="switchTab">导航到tabBar</navigator>
<!-- url必须有'/'开头！！！ -->2、非tabBar页面跳转
那要跳转到不是导航栏的页面，就得用这个方法
代码编写规则如下：
导航到非tabBar可以不用设置open-type，如果设置了，值只能是navigate
<!-- 声明式导航：导航到非tabBar -->
<navigator url="/pages/17_aiAPI/aiAPI" open-type="navigate">导航到非tabBar</navigator>
<!-- 导航到非tabBar可以不用设置open-type，如果设置了，值只能是navigate -->3、返回上一页或多页
在跳转到的页面设置【返回跳转】
代码编写规则如下：
不需要写url，直接open-type="navigateBack"
返回多页就要设置detal,值就是返回多少页
<!-- 返回1页 -->
<navigator open-type="navigateBack">返回上一页</navigator>
<!-- 返回多页 -->
<!-- 返回多页就要设置detal,值就是返回多少页 -->
<navigator open-type="navigateBack" delta="2">返回2页</navigator>这里有个别的博主的介绍放这，简单看看
<!-- navigator组件 -->
<view>
<!-- target属性
self : 当前小程序跳转（默认值）
miniProgram : 要跳转其他小程序时设置
hover-class,hover-stop-propagation,hover-start-time,hover-stay-time这几个属性为点击态属性，
这个组件有默认的值，可以根据项目需要修改，和前面讲得是一样的。
-->
<!--
当target=self时，也就是默认值（不设置的情况）
url ： 当前小程序跳转的页面地址(这个路径我建议是写成绝对路径)
open-type ： 跳转方式有下面的值
open-type=navigate : 保留当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面）
open-type=redirect : 关闭当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面）
open-type=switchTab : 关闭所有非tabar页面，跳转到tabbar页面
open-type=reLaunch : 关闭所有页面，跳转到tabbar页面
open-type=navigateBack : 页面回退（和delta属性一起使用，设置返回层数）
提示：这里只是简单介绍一下，tabbar页面配置还没讲过，先了解这个东西吧，我一般都不用这个组件，习惯用小程序api
-->
<navigator open-type='navigate' url='/pages/index/index'>跳转</navigator>
<navigator open-type='redirect' url='/pages/index/index'>跳转</navigator>
<navigator open-type='switchTab' url='/pages/index/index'>跳转</navigator>
<navigator open-type='reLaunch' url='/pages/index/index'>跳转</navigator>
<navigator open-type='navigateBack' delta="1">跳转</navigator>
</view>
4409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
