配置好了全局的信息之后,我们就开始写单独的页面,找到pages/index/index目录
删除默认生成index.wxml的helloworld代码。我们看到头部是一个从红色到橙色渐变的一个块
里面包含了两行文字,还有一个操作指南的跳转页面的按钮。
根据设计稿我们就来写index.wxml,
这里我们发现会有一个操作指南的跳转页面,那么我们需要在app.json的pages属性中添加操作指南页面的路径"pages/guide/guide"
在wxml文件中一个跳转的链接用标签,url属性就是要跳转页面的路径
index.wxml代码如下:
<view class="container">
<view class="top">
<text class="text1">微信送礼新方式</text>
<text class="text2">微信上送礼·对方填地址·免邮送上门</text>
<navigator url="/pages/guide/guide" class="guide">操作指南</navigator>
</view>
</view>
接下来我们来写index.wxss这个文件,已达到和效果图一样的效果展示
在小程序中我们自己写的wxml都是在page标签下的,好比html文件的html标签
样式代码中,和普通的css没什么区别,只是单位是rpx.一个可视区域的宽度为750rpx
如果说一个元素占了整个屏幕宽度的一半,那么就是375rpx
index.wxss代码如下
page{
background: #f2f2f2;
}
.container{
padding: 0;
background: #f2f2f2;
}
.top{
height: 360rpx;
width: 100%;
background: linear-gradient(#e50e38, #f0743e);
}
.top .text1{
font-size: 40rpx;
color: #fff;
padding-left:80rpx;
position: relative;
top: 80rpx;
display: block;
}
.top .text2{
font-size: 30rpx;
color: #fff;
padding-left:80rpx;
position: relative;
top: 90rpx;
display: block;
}
.top .guide{
display: inline-block;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: #f34043;
position: absolute;
right: 40rpx;
top: 40rpx;
text-align: center;
color: #fff;
padding: 20rpx;
line-height: 30rpx;
font-size: 24rpx;
}
之后我们看一下效果如下所示,点击操作指南也能正常跳转