当前位置：首页 > news >正文

网站项目/官网首页入口百度

news 2025/8/7 3:14:00

网站项目,官网首页入口百度,全国企业信用信息系统,网络推广营销策划静态页面设计完之后，我们在小程序上实现静态页面。这里就不全部讲了，就拿首页简单说明下。文件存放页面，主要一个是首页，其他是存放文档内容。组件我们讲下载好的towxml和一些ui图片放在common文件夹中，我们…

静态页面

设计完之后，我们在小程序上实现静态页面。
这里就不全部讲了，就拿首页简单说明下。

文件

存放页面，主要一个是首页，其他是存放文档内容。在这里插入图片描述

组件

我们讲下载好的towxml和一些ui图片放在common文件夹中，我们只需要copy完towxml中的一部分文件即可，如图。
在这里插入图片描述

页面实现

首页页面比较简单，就一个标题加2个转向按钮。
wxml文件

<view class="container"><view class='container-layer-flex'><view class='container-title'>阮一峰ES6经典入门</view><view class='container-btn' bindtap='onClick' data-str='Directory'><span>开始</span></view><view class='container-btn' bindtap='onClick' data-str='Copyright' ><span>版权许可</span></view></view>
</view>

onClick是点击事件，通过设定data-str去区分跳转哪个页面。

onClick: function (e) {var url = "" + e.currentTarget.dataset.str;if (url === 'Directory') {wx.redirectTo({url: "../" + url + "/" + url});}else {wx.navigateTo({url: "../" + url + "/" + url});}},

简单说下wxss的布局，通过设定container-layer-flex最外层的view,控制好所有元素的位置，并设置为flex布局。

.container-layer-flex{width: 100%;height: 750rpx;display: flex;flex-direction: column;align-items: center;position: absolute;top: 50%;margin: -375rpx 0 0 0;
}
.container-title{font-size: larger;margin: 100rpx 0;
}
.container-btn{font-size: large;border: 1px solid #2B3434;padding: 10rpx 50rpx;background: #2B3434;color: #ffe300;margin: 20rpx 0;
}