微信小程序---主菜单入口形式的首页_微信小程序首页界面

实现效果

 此页面作为主菜单入口形式的首页，可以把主要模块的入口作为按键放在首页上，按键放在图片之上，背景图由两张图片构成，上方的图片置于下方图片上层。

需要实现的效果为：

1）按键背景为透明，且无边框

2）按键与云朵的图片重合，且按键在图片之上

3）“开学”图片在大背景图之上

一、界面组成

<!--pages/shouye/shouye.wxml-->
<view class="top">
    <image style="width:100%;height:100%;"  src="../../images/P.jpg"></image>
</view>
<view>
    <image class="imageKX" src='../../images/开学.png'></image>
    <image class="simage1" src='../../images/云朵.png' mode='left'></image>
    <image class="simage2" src='../../images/云朵.png' mode='left'></image>
    <image class="simage3" src='../../images/云朵.png' mode='left'></image>
    <button class="button1" bindtap="onbutton1Tap" >报到须知 </button>
    <button class="button2"  plain='true' bindtap="onbutton2Tap">课程安排 </button>
    <button class="button3"  bindtap="onbutton3Tap">安全手册 </button>  
</view>

界面由三个按键，三个按键背后的三个图片，占据整个界面的背景图，上方“我们开学啦”的艺术字背景图构成。由于wxml的原理是先列出控件先显示，所以后列出按键，按键才会后显示出来在背景图之上。

二、定义样式

/* pages/shouye/shouye.wxss */
.navigator-hover {
    color:blue;
  }
  .other-navigator-hover {
    color:red;
  }
 
.button1{
    padding: 0;
    border: 0;
    /*透明不显示*/
    background: rgba(0,0,0,0);
    position: absolute;
    top:400rpx;
    left: 150rpx;
}
 
.simage1{
    position: absolute;
    top:150rpx;
    left: 230rpx;
}
 
.button2{
    padding: 0;
    border: 0;
    /*透明不显示*/
    background: rgba(0,0,0,0);
    position: absolute;
    top:600rpx;
    left: 150rpx;
}
.simage2{
    position: absolute;
    top:350rpx;
    left: 230rpx;
}
 
.button3{
    padding: 0;
    border: 0;
    /*透明不显示*/
    background: rgba(0,0,0,0);
    position: absolute;
    top:800rpx;
    left: 150rpx;
}
.simage3{
    position: absolute;
    top:550rpx;
    left: 230rpx;
}
 
.imageKX{ 
    position: absolute;
    top:-80rpx;
    left: 20rpx;
}
 
.top{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

top类作为大背景图片的样式，使用绝对布局，占据整个界面，其他图片的布局比较分散，适合使用相对布局，使用border: 0; background: rgba(0,0,0,0);即可实现按键的透明和无边框效果。

三、事件

onbutton2Tap: function () {
        console.log("Helloworld.")
        wx.navigateTo({
          url: '/pages/course/course',
        })
    },

当点击按键后使用wx.navigateTo跳转到子界面即可