文章目录

• 前言
• 一、一些用法
• • 1， page页面下有多余空白区域 ：min-height:100vh;
  • 2，点击组件后跳转
  • • （1）navigator组件
    • （2）bindtap="changeURL"
  • 3，背景渐变 ：background: linear-gradient(rgb(255, 255, 255), rgb(255, 250, 205));
  • 4，居中对齐问题
  • 5，多个按钮实现选中一个改变颜色且仅改变一个
• 二、一些注意事项
• • 1，一定要用相对距离！！！
  • 2，button组件
  • 3，会出现链接的格式问题的地方
  • • （1）navigator链接跳转
    • （2）组件image的图片链接
    • （3）bindtap跳转
• 三、一些觉得值得讲的页面
• • 1，颜色不同
  • 2，边框
• 总结

---

前言

过去的半年都在做一个项目，我的分工是小程序前端，最近开始着手结项工作，想着把wxml和wxss里面一些我刚上手时不了解或者遇到的一些问题和用法浅写一下。各个组件的用法我就不展开说了，官方文档上的属性和例子都很好，可以去看一下，这里是微信官方小程序文档链接：微信开放文档
现在进入正题~~

---

一、一些用法

1， page页面下有多余空白区域 ：min-height:100vh;

min-height：给元素设置最小高度，当内容少的时候，元素是这个高度，当内容超出时，元素高度会自动适应内容，不会出现内容溢出情况。
一开始用了height: 100vh，在调试时没出现问题，如下方所示，可在手机上模拟时遇到了下面会出现空白的情况，主要是100vh自动识别屏幕大小，在实际使用中若机型存在隐藏的地址栏和默认的底部按钮栏，或者该页面的一些组件设置，会导致页面下方部分空白。

view{
  width: 100vh;
  height: 100vh;
}

2，点击组件后跳转

（1）navigator组件

直接在后面加跳转链接，不过注意省略号啥的别少了或者多了。

<navigator class="box" url="../order/order">

（2）bindtap=“changeURL”

  changeURL: function (e) {
    wx.navigateTo({
      url: '../essay/essay',
      success: function (res) {
        // success
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      },
    })
  },

3，背景渐变 ：background: linear-gradient(rgb(255, 255, 255), rgb(255, 250, 205));

线性渐变，要用到的可以去网上找找更详细的说明，有很多玩法，可以增加更多颜色，也可以设置横向纵向渐变。

4，居中对齐问题

在小程序中会遇到很多盒子并排并列或者且要居中的情况，这里我总结一下：
justify-content属性：定义了项目在主轴上的对齐方式。
justify-content: center;
align-items属性：定义项目在交叉轴上如何对齐。
align-items: center;

如图所示，这是之前写的一个页面，两行分别两个盒子，都是用的两句对齐用法。

.Box1{
  display: flex; 
  justify-content: center;
  align-items: center;
}

强推一个大佬整理的，直接让你搞懂flex布局。

5，多个按钮实现选中一个改变颜色且仅改变一个

.wxml文件

  <view class="tribeBox">
    <block wx:key="index" wx:for="{{club}}">
      <navigator class="{{currentTab == index ? 'tribe_active' : 'tribe_noactive'}}" id='{{index}}'
      data-Id="{{item.Id}}" bindtap="changStyle" url="{{item.url}}">{{item.name}}</navigator> 
    </block>
  </view>

.wxss文件

.tribeBox{
  display: flex; 
  margin: 10rpx;
  align-items: center;
  justify-content: center;
}

.tribe_active{
  margin-left: 40rpx;
  margin-right: 60rpx;
  font-size: 15px;
  font-weight: 500;
  color: rgb(241, 151, 16);
  font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.tribe_noactive{
  margin-left: 40rpx;
  margin-right: 60rpx;
  font-size: 15px;
  font-weight: 500;
  font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.js文件

Page({
  data: {
    club:[
      {
        Id: 1,
        name:  "关注",
        url: '../attention/attention'
      },
      {
        Id: 2,
        name:  "我的部落",
        url: '../tribe/tribe'
      },
      {
        Id: 3,
        name: "视频",
        url: '../microvideo/microvideo'
      }
    ],
  },
  changStyle(e){
    var that = this;
    this.setData({
      currentTab: e.currentTarget.id,
      Id: e.currentTarget.dataset.Id,
    })
  }
})

这里主要是在函数中通过设定一个id，使组件在被点击后调用对应的wxss样式，在点击后id改变。并且提前将三个组件文字和跳转链接写在Page的data中，在跳转时选择对应列表中的信息。

二、一些注意事项

1，一定要用相对距离！！！

刚开始写的时候测试的机型是最小的那种，虽然会在调试中会切换其他机型查看效果，但我一直写的是绝对距离，类似于margin-top: 42rpx直接固定，等我后期写了一段时间意识到这个问题以后大为震惊，含泪从头修改。熟练的估计不会这个问题，但对于刚上手的新手还是要注意一下。

2，button组件

button组件个人感觉限制有点多，首先官方设定button是自带属性可以调整大小，但是有个问题是它的宽度在wxss里改不了，要在wxml里面对应组件里面加style来修改，即使修改以后虽然页面上是宽度有所调整，但是实际上这个组件的原来宽度还是在那的，这个在一些情况下就很被动，需要一直调整间距，当有很多button和其他的组件需要一起居中对齐时这个问题就会很明显，会产生距离不一样的情况，所以后来学艺不精的我就用view或者navigator了。如图：

  <button style="width:300rpx" >查看</button> 

不过可能单纯是我不知道还有其他方法，没有把button的实际用途展现出来，实际上它的属性还是很多的。

3，会出现链接的格式问题的地方

（1）navigator链接跳转

如下

    <navigator class="tribeBox1_in_box" url="../hot-topic/hot-topic">
      <image class="tribeBox1_in_pic" src="/icon/热榜话题(1).png"/>
      <view class="tribeBox1_in_text">热榜话题</view>
    </navigator>

（2）组件image的图片链接

如下

<image class="tribeBox1_in_pic" src="/icon/热榜话题(1).png"/>

（3）bindtap跳转

如下

  changeURL: function (e) {
    wx.navigateTo({
      url: '../essay/essay',
      success: function (res) {
        // success
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      },
    })
  },

三、一些觉得值得讲的页面

1，颜色不同

这里面按设计来看是想实现：一是对热度最高的前五进行筛选并展示，二是要在每个话题后面加一个图标，三是对前三的话题进行颜色的区分，也是最困难的一个部分。下面讲一下我的思路：
.wxml文件

  <view class="hottopic_box1">
    <view class="hottopic_box1_1">热榜话题</view>
    <view class="hottopic_box1_2">
      <view class="hottopic_box1_2_top" wx:key="index" wx:for="{{top}}">
        <view class="hottopic_box1_2_topNum1" style="color:{{item.color}}">0{{item.id}}</view>
        <view class="hottopic_box1_2_topText">{{item.text}}</view>
        <image class="hottopic_box1_2_topImage" src="../../icon/热榜(1).png"/>
      </view>
    </view>
  </view>

在view后面加图片倒不是难事，主要是对前三个的标题颜色进行区分。这边主要是两个想法，一个是每一行将两个text放一起，在前面将数字的格式改变；还有一个是在数据前面加上id和color，当数据输出时对应的颜色样式也会展现出来。小程序里面我用的是第二种，不过后来意识到好像第一种就很简单。而且这个子页面里面我对字体多下了点功夫，和其他的页面比讲究多了点。

2，边框

主要就是背景里的椭圆和框框的格式。

.myBox1{
  /* background: linear-gradient(to right,rgb(255, 153, 0), rgb(255, 204, 102)); */
  background: linear-gradient(to right,rgb(243, 111, 4), rgb(228, 181, 89));
  width: 140%;
  height: 400rpx;
  border-radius: 0rpx 0rpx 100% 100%;
  margin-top: -120rpx;
}

.myBox1_in2{
  margin-left: 18%;
  margin-top: 50rpx;
  width: 64%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30rpx;
  border-style: solid;
  border-color: #cccccc;
  border-width: 2rpx;
}

---

总结

就这样啦，这个项目进行的过程也是我学习和成长的过程，从对小程序一无所知到逐渐熟练，能很快的将设计好的页面实现出来，上面也是我在制作过程中觉得挺有价值的一些东西，希望能帮助到你。