微信小程序——组件（二）

在上篇文章组件（一）里已经讲解了如何创建一个项目，现在继续。。。讲解一个页面布局以及各个组件的使用。在学习过程中，发现小程序支持flex布局，这对于学习过react native的人来说太好了，布局方面不用担心了。下面来看tab的创建

在使用微信小程序编译代码的工具时，快捷键的使用必不可少，所有快捷键在这里有讲解：小程序编译器快捷键

1.根据我上篇文章介绍，有讲如何创建一个小程序项目，效果如图所示：

2.之前讲解过app.json里是定义全局的一些东西，包括整体颜色风格，路由等等，详细配置讲解见官网。下面是app.json里的代码，调整了背景颜色以及创建了两个tab模块。

{
  "pages": [
    "pages/component/index/index",
    "pages/component/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "wxTestOne",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/component/index/index",
        "iconPath": "images/icon_component.png",
        "selectedIconPath": "images/icon_component_HL.png",
        "text": "组件"
      },
      {
        "pagePath": "pages/component/logs/logs",
        "iconPath": "images/icon_API.png",
        "selectedIconPath": "images/icon_API_HL.png",
        "text": "组件"
      }
    ]
  }
}

注意看红色圈出的部分是新添加的模块，这里只要在app.json添加正确页面路由的代码，左侧边栏项目文件里就会多出相对应的页面文件（.js .json .wxml .wxss），当然也可以鼠标右键来添加想要的文件。效果如图：

3.“组件”这个tab模块对应的是“index”，“接口”tab对应的模块是logs（上图右边tab名字应该是“接口”）。接下来在 组件 页面显示列表，代码如下：

index.wxml代码：

<!--pages/component/index/index.wxml-->
<view class="index">
  <view class="index-hd">
    <image class="index-logo" src="../../resources/kind/logo.png"></image>
    <view class="index-desc">以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。</view>
  </view>
  <view class="index-bd">
    <view class="kind-list">
      <block wx:for-items="{{list}}" wx:key="{{item.id}}">
        <view class="kind-list-item">
          <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
            <view class="kind-list-text">{{item.name}}</view>
            <image class="kind-list-img" src="../../resources/kind/{{item.id}}.png"></image>
          </view>
          <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
            <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
              <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                <navigator url="pages/{{page}}/{{page}}" class="navigator">
                  <view class="navigator-text">{{page}}</view>
                  <view class="navigator-arrow"></view>
                </navigator>
              </block>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>

　　index.js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [
      {
        id: 'view',
        name: '视图容器',
        open: false,
        pages: ['view', 'scroll-view', 'swiper']
      }, {
        id: 'content',
        name: '基础内容',
        open: false,
        pages: ['text', 'icon', 'progress']
      }, {
        id: 'form',
        name: '表单组件',
        open: false,
        pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
      }, {
        id: 'nav',
        name: '导航',
        open: false,
        pages: ['navigator']
      }, {
        id: 'media',
        name: '媒体组件',
        open: false,
        pages: ['image', 'audio', 'video']
      }, {
        id: 'map',
        name: '地图',
        pages: ['map']
      }, {
        id: 'canvas',
        name: '画布',
        pages: ['canvas']
      }
    ]
},

  kindToggle: function (e) {
    var id = e.currentTarget.id, list = this.data.list;
    for (var i = 0, len = list.length; i < len; ++i) {
      if (list[i].id == id) {
        list[i].open = !list[i].open
      } else {
        list[i].open = false
      }
    }
    this.setData({
      list: list
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

　　index.wxss代码：

.index-hd {
  padding: 80rpx;
  text-align: center;
}

.index-bd {
  padding: 0 30rpx 40rpx;
}

.index-ft {
  padding-bottom: 20rpx;
  text-align: center;
}

.index-logo {
  width: 86rpx;
  height: 86rpx;
}

.index-desc {
  margin-top: 20rpx;
  color: #888;
  font-size: 28rpx;
}

.navigator-box {
  opacity: 0;
  position: relative;
  background-color: #fff;
  line-height: 1.41176471;
  font-size: 34rpx;
  transform: translateY(-50%);
  transition: 0.3s;
}

.navigator-box-show {
  opacity: 1;
  transform: translateY(0);
}

.navigator {
  padding: 20rpx 30rpx;
  position: relative;
  display: flex;
  align-items: center;
}

.navigator:before {
  content: " ";
  position: absolute;
  left: 30rpx;
  top: 0;
  right: 30rpx;
  height: 1px;
  border-top: 1rpx solid #d8d8d8;
  color: #d8d8d8;
}

.navigator:first-child:before {
  display: none;
}

.navigator-text {
  flex: 1;
}

.navigator-arrow {
  padding-right: 26rpx;
  position: relative;
}

.navigator-arrow:after {
  content: " ";
  display: inline-block;
  height: 18rpx;
  width: 18rpx;
  border-width: 2rpx 2rpx 0 0;
  border-color: #888;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -8rpx;
  right: 28rpx;
}

.kind-list-item {
  margin: 20rpx 0;
  background-color: #fff;
  border-radius: 4rpx;
  overflow: hidden;
}

.kind-list-item:first-child {
  margin-top: 0;
}

.kind-list-text {
  flex: 1;
}

.kind-list-img {
  width: 60rpx;
  height: 60rpx;
}

.kind-list-item-hd {
  padding: 30rpx;
  display: flex;
  align-items: center;
  transition: opacity 0.3s;
}

.kind-list-item-hd-show {
  opacity: 0.2;
}

.kind-list-item-bd {
  height: 0;
  overflow: hidden;
}

.kind-list-item-bd-show {
  height: auto;
}

　　app.wxss代码：

/**app.wxss**/
/* reset */
page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
checkbox, radio{
  margin-right: 10rpx;
}
button{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
form{
  width: 100%;
}

/* lib */
.strong{
  font-weight: bold;
}
.tc{
  text-align: center;
}

/* page */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
  font-size: 32rpx;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.page-head{
  padding: 60rpx 50rpx 80rpx;
  text-align: center;
}
.page-head-title{
  display: inline-block;
  padding: 0 40rpx 20rpx 40rpx;
  font-size: 32rpx;
  color: #BEBEBE;
}
.page-head-line{
  margin: 0 auto;
  width: 150rpx;
  height: 2rpx;
  background-color: #D8D8D8;
}
.page-head-desc{
  padding-top: 20rpx;
  color: #9B9B9B;
  font-size: 32rpx;
}

.page-body {
  width: 100%;
  flex-grow: 1;
  overflow-x: hidden;
}
.page-body-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.page-body-wording {
  text-align: center;
  padding: 200rpx 100rpx;
}
.page-body-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  width: 100%;
  padding: 50rpx 0 150rpx 0;
}
.page-body-title {
  margin-bottom: 100rpx;
  font-size: 32rpx;
}
.page-body-text {
  font-size: 30rpx;
  line-height: 26px;
  color: #ccc;
}
.page-body-text-small {
  font-size: 24rpx;
  color: #000;
  margin-bottom: 100rpx;
}

.page-foot{
  margin: 100rpx 0 30rpx 0;
  text-align: center;
  color: #1aad19;
  font-size: 0;
}
.icon-foot{
  width: 152rpx;
  height: 23rpx;
}

.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 80rpx;
}
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.page-section-gap .page-section-title{
  padding-left: 0;
  padding-right: 0;
}
.page-section-ctn{

}

/* widget */
.btn-area{
  margin-top: 60rpx;
  box-sizing: border-box;
  width: 100%;
  padding: 0 30rpx;
}

.image-plus {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx solid #D9D9D9;
  position: relative;
}
.image-plus-nb{
  border: 0;
}
.image-plus-text{
  color: #888888;
  font-size: 28rpx;
}
.image-plus-horizontal {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #d9d9d9;
  width: 4rpx;
  height: 80rpx;
  transform: translate(-50%, -50%);
}
.image-plus-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #d9d9d9;
  width: 80rpx;
  height: 4rpx;
  transform: translate(-50%, -50%);
}

.demo-text-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1AAD19;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

　　效果如图：