从0开始学习制作一个微信小程序 学习部分（5）文字组件和跳转组件

系列文章目录

学习篇第一篇我们讲了编译器下载，项目、环境建立、文件说明与简单操作：第一篇链接
第二、三篇分析了几个重要的配置json文件，是用于对小程序进行的切换页面、改变图标、控制是否能被搜索到等的操作第二篇链接、第三篇链接
第四篇学习了框架、api组件的适应，讲解了rpx和轮播图第四篇链接
本篇我们继续学习组件，text组件和navigation组件。

---

---

一、text组件

注：text组件只能嵌套text组件，嵌套其他组件不显示。

1. 属性

a）user-select属性

如果文本需要被长按选择，则可以适应user-select

<text user-select>
TEXT_TEST
</text>

注：文字之间的空格再多也只显示一个，如果要空格多，需要用space属性

b）space属性

<text 
user-select space="emsp">
T E  X   T    _TEST
</text>

emsp模式空格大小为中文空格大小
ensp模型空格大小为英文空格大小
nbsp按字符大小经行展示

2. 美化

a)框架

<view class="text_test">
  <text user-select space="emsp">text_test1</text>
  <text user-select space="emsp">text_test2</text>
  <text user-select space="emsp">text_test3</text>
</view>

b）scss

.text_test{
  // 布局类型
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 12rpx;
  border-radius: 10rpx;
  font-size: 40rpx;
}

border-radius是边框弧度，font-size字体大小

c）page项

page{
    height: 100vh;
    background-color: white;
    padding: 16rpx;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    //> view指锁定所有view
    > view{
      &:nth-child(n+2){
        margin-top: 1rpx;
        //margin-top边框和顶部的距离
      }
    }
}

注释写在代码里了。效果如下

二、navigation组件

我们用navigation组件实现跳转

1.跳转代码

<navigator url="/pages/test_3/test_3">  
跳转测试
</navigator>

点击后跳转

跳转成功，注意，在tabbar里的页面是不能跳转的。如我们想跳转index，但index在tab栏，那我们点击跳转就没用。

2.open-type属性

open-type = "navigate" 不能跳tabbar，能跳非tabbar，返回上一页（保留上一页）
open-type = "redirect" 不能跳tabbar，能跳非tabbar，返回直接返回主页
区别展示图如下：


open-type = "switchTab" 只能跳tabbar，不能跳非tabbar，清除所有tabbar界面。
open-type = "reLaunch" 能跳tabbar，也能跳非tabbar，清除所有界面，进入某一页面。
如果你使用的navigate模式：
那你在跳转的那一页可以使用open-type = "navigateBack"返回上一页，我们可以用delta=“xx”来控制跳转回去的层数。

<navigator open-type="navigateBack" delta="2">返回上两页</navigator>

3）传递参数

我们可以在url后面加？来传递参数。

<navigator url="/pages/test_3/test_3?id=2&name=xiaohu" open-type="redirect">  

参数与url之间用？区分，参数与参数之间用&来区分。
在目标url的.js文件里
找到onLoad(option)
加入console.log(options)即可在目标url中接受参数

---

完整代码

text完整代码

/* pages/test_4/test_4.wxss */


.swiper_test{
 
  swiper{
     border-radius: 100rpx;
     height: 300rpx;
     background-color: lightblue;
  }
  swiper-item{
    image{
  
   width: 100%;
   height: 100%;
    }
   &:first-child{
    border-radius: 100rpx;
     background-color: lightcoral;
   }
   &:last-child{
    border-radius: 100rpx;
     background-color: black;
   }

  }
}
page{
    height: 100vh;
    background-color: white;
    padding: 16rpx;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    //> view指锁定所有view
    > view{
      &:nth-child(n+2){
        margin-top: 1rpx;
      }
    }
}
.text_test{
  // 布局类型
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 12rpx;
  border-radius: 10rpx;
  font-size: 40rpx;
}

<!--pages/test_4/test_4.wxml-->
<!-- wxml是框架搭建 -->
<!-- view 是小程序提供的组件，是容器组件，类似于html中的div ，是一个块级元素，占据一行 -->
<!-- 所有型号的手机，都是750rpx -->
<!-- <view class="box">view测试</view> -->
<!-- 轮播图 -->
<view class="swiper_test">
<!-- 自动轮播 单位为毫秒 -->
<swiper autoplay 
   interval="2000" 
   indicator-dots="true"
   indicator-color="#fff"
   indicator-active-color="#f3514f">
   <swiper-item>
    <image src="../../assets/tabbar/index.png" mode="aspectFit" show-menu-by-longpress lazy-load />
   </swiper-item>

   <swiper-item>
   <image src="../../assets/tabbar/index.png" mode="aspectFit" show-menu-by-longpress lazy-load />
  </swiper-item>

  <swiper-item>
    <image src="../../assets/tabbar/index.png" mode="aspectFit" show-menu-by-longpress lazy-load />
  </swiper-item>
</swiper>
</view>

<!-- <image src="../../assets/tabbar/index.png" mode="aspectFit" show-menu-by-longpress lazy-load /> -->
<!-- <text 
user-select space="emsp">
T E  X   T    _TEST
</text> -->
<view class="text_test">
  <text user-select space="emsp">text_test1</text>
  <text user-select space="emsp">text_test2</text>
  <text user-select space="emsp">text_test3</text>
</view>