微信小程序，一步一步走（二）

发表于 | 分类于 |

上一篇微信小程序，一步一步走（一）

看文档介绍了那么多，最终还是要落实到实战上面。所以还是准备写一个东西出来比较好，一步一步踩着坑才有意思

导航

我选用导航栏在下面的那种，查看文档后发现，可以直接在app.json里面配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/show/show",
    "pages/mine/mine"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#32C6FF",
    "navigationBarTitleText": "Run-Mentos",
    "navigationBarTextStyle": "#fff"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/show/show",
        "text": "动态"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

我在这一步之前，我先新建了两个页面

屏幕快照 2018-04-12 17.44.48.png

其中tabBar属性就是导航栏的配置

list: [ ] 这里面装的就是导航，最少2个，最多5个

屏幕快照 2018-04-12 17.48.14.png
根据官方给出的api，我们来改变一下字体颜色，背景颜色，选中颜色，再添加上图片

我在网上去找了一些图标，添加进了项目里面

屏幕快照 2018-04-12 20.33.07.png

最后的app.json配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/show/show",
    "pages/mine/mine",
    "pages/activity/activity"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#32C6FF",
    "navigationBarTitleText": "Run-Mentos",
    "navigationBarTextStyle": "#fff"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "states/images/home(1).png",
        "selectedIconPath": "states/images/home.png"
      },
      {
        "pagePath": "pages/show/show",
        "text": "动态",
        "iconPath": "states/images/iconfont-shumajiadian.png",
        "selectedIconPath": "states/images/iconfont-shumajiadian(1).png"
      },
      {
        "pagePath": "pages/activity/activity",
        "text": "活动",
        "iconPath": "states/images/cart(1).png",
        "selectedIconPath": "states/images/cart.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "states/images/wxb.png",
        "selectedIconPath": "states/images/wxb(1).png"
      }
    ],
    "selectedColor": "#32C6FF",
    "backgroundColor": "#fff"
  }
}

首页

接下来完成首页内容

swiper

首页的第一个内容，当然要是banner咯！

找到文档中的swiper组件，根据给出来的api进行使用

index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<swiper class="bannerBox"
  indicator-dots
  circular
  autoplay
>
  <swiper-item
    class="theSmall"
    wx:for="{{banner}}"
    wx:for-item="item"
    wx:key="item.img"
  >
    <image src="{{item.img}}" class="bannerImage"/>
  </swiper-item>
</swiper>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Page({
  data: {
    banner: [{
      img: 'https://i.loli.net/2018/03/25/5ab75a03c5ee2.jpeg',
      path: 'https://www.baidu.com'
    }, {
      img: 'https://i.loli.net/2018/03/25/5ab75a0538920.jpeg',
      path: '/card'
    }, {
      img: 'https://i.loli.net/2018/03/25/5ab75a0f40956.jpeg',
      path: '/hello'
    }, {
      img: 'https://i.loli.net/2018/03/25/5ab75a130047b.jpg',
      path: '/home'
    }, {
      img: 'https://i.loli.net/2018/03/25/5ab75a1351249.jpeg',
      path: 'http://www.google.com'
    }, {
      img: 'https://i.loli.net/2018/03/25/5ab75a13f22d6.jpg',
      path: 'asdfasdf'
    }]
  }
})

其中踩到一个坑，就是图片的宽度并没有占满<swiper-item>标签，并且图片明显被拉长了，并不是原始比例，给image添加一个class，然后写一个width: 100%;就行了

其实我更新把banner这个改成组件，那么就动手吧

首先新建了一个用来装组件的文件夹，然后下面新建组件banner
屏幕快照 2018-04-12 23.34.41.png

然后把刚才的内容复制过来

banner.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--components/banner/banner.wxml-->
<view>
   <swiper class="bannerBox"
    indicator-dots
    circular
    autoplay
  >
    <swiper-item
      class="theSmall"
      wx:for="{{bannerList}}"
      wx:for-item="item"
      wx:key="item.img"
    >
      <image src="{{item.img}}" class="bannerImage"/>
    </swiper-item>
  </swiper>
</view>

banner.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// components/banner/banner.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    bannerList: Array
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

因为是定义的组件，所以要在banner.json中去确定这是一个组件
banner.json

1
2
3
4
5
6
{
  "component": true,
  "usingComponents": {
  }
}

其中properties字段是获取传递的数据，然后定义一下它的数据类型。我写的是简写，更多可以去查看自定义组件文档

接下来就是我刚才采坑的地方，官方文档中说道
屏幕快照 2018-04-12 23.39.09.png

我一直以为是在banner.json中去定义usingComponents字段，后来查询后才发现，应该是在需要引用的那个页面的xx.json文件中去定义。相当于vue中去定义一个组件的名字和路径

所以在index/文件夹下面新建一个文件index.json

1
2
3
4
5
{
  "usingComponents": {
    "banner": "../../components/banner/banner"
  }
}

然后在index.wxml中写到

1
2
3
4
<!--index.wxml-->
<view>
  <banner bannerList="{{banner}}"></banner>
</view>

来看一下成果
屏幕快照 2018-04-12 23.43.30.png

模板

接下来就是首页剩下的部分了，因为我想的是有动态和活动这两个板块，所以决定在这里加上一个火热的动态和热门活动

嗯，想好了就直接动手就行了

因为接下来的两个板块，他们的头部信息都是一样的，所以还是当做模板来做比较好，先新建一个模板
屏幕快照 2018-04-13 11.04.49.png

然后照着之前的写法，去把这个模板加进去
index.wxml

1
2
3
4
5
6
7
<!--index.wxml-->
<view>
  <!-- banner  -->
  <banner bannerList="{{banner}}"></banner>
  <!-- 热门活动  -->
  <hotBox title="热门活动"/>
</view>

hotBox.wxml

1
2
3
4
5
6
7
<!--components/hotBox/hotBox.wxml-->
<view class="hotBox">
  <view class="title">
    <icon></icon>
    <text>{{title}}</text>
  </view>
</view>

hotBox.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* components/hotBox/hotBox.wxss */
.hotBox {
  margin-top: 30rpx;
}
.title {
  text-align: center;
  font-size: 30rpx;
  color: #9B9B9B;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
}
.title>icon {
  display: block;
  width: 10rpx;
  height: 50rpx;
  background-color: #22C5FF;
  margin-right: 20rpx;
}

hotBox.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// components/hotBox/hotBox.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: String
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

接下来就是里面内容的布局了，照样的还是用模板来做

后面的代码我准备直接上传github，就不在这里写了。在下面一篇文章里面，我会列出我猜到的坑和解决方法

我，曼妥思，打钱