小程序markdown文件解析和代码高亮（二）

静态页面

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

文件

存放页面，主要一个是首页，其他是存放文档内容。

组件

我们讲下载好的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;
}

设置了flex布局和方向，我们只需要控制每一个view的样式即可。