微信小程序开发教程之组件

study01

开发工具下载路径：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359

视频教程：http://v.youku.com/v_show/id_XMTczNjc4Mjk5Mg==.html

我这里仅抛出常见开发问题哦：

1，image和text一起如何实现换行

微信小程序本质上是对android和ios的接口调用，跟html是不一样的，是没有办法通过<br>或者其他方式来直接实现换行。

但是可以通过设置父级视图为列布局来实现换行

<view style="margin-top:200rpx;font-size:15px;color:orange;display:flex;flex-direction:column;">
  <text style="">pqfitness</text>
  <image src="../../resource/images/pqfitness.jpg" style="width:100px;height:80px;"></image>
</view

这里就是设置了display:flex;flex-direction:colunm;这个问题解决了。这里系统默认是设置的行布局。

2，view的居中问题

方案一：通过设置父级视图align-items:center;那么所有的子视图都可以实现居中

方案二：子视图设置margin:auto;也可以实现居中

3，px和rpx单位的转换，以及对应的意义

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

不同的屏幕的分辨率是不一样的，为了更好的兼容各个手机设备，所以建议所有的度量单位都是用微信官方推荐的rpx。

4，sroll-view是默认可列布局，如何实现行布局，并可滑动。

<scroll-view scroll-x="true" style="width:220px;margin:10px auto;white-space: nowrap;" >
  <view style="background-color:green;width:200px;height:100px;display:inline-block;">1</view>
  <view style="background-color:yellow;width:200px;height:100px;display:inline-block;">2</view>
  <view style="background-color:green;width:200px;height:100px;display:inline-block;">3</view>
</scroll-view>

scroll-view设置white-space:nowrap;并且子元素设置为display:inline-block; 这两个样式的设置必须同时配置。

这里表示子元素设置为行内元素，并在父级视图中指出不换行。这样就完成了在一行中布局。

study02

视频教程：http://v.youku.com/v_show/id_XMTczNzY1MTA2OA==.html

swiper

  <swiper style="margin-top:100rpx;width:300rpx;height:100rpx;" indicator-dots="true" autoplay="true">
    <swiper-item>
      <view style="background-color:yellow;width:300rpx;height:100rpx;display:block;">1</view>
    </swiper-item>
    <swiper-item>
      <view style="background-color:green;width:300rpx;height:100rpx;">2</view>
    </swiper-item>
  </swiper>

swiper和swiper-item里面的view都是需要设置width和height哦。最好是一样的大小。

问题：

1，直接在view后面添加swiper组件，然而并没有显示组件内容。

因为该view是系统自动生成，并设置样式为container，container在app.wxss中被设置height:100%；即占满了整个屏幕，那么在后面添加的任何的组件都是没有办法在屏幕上看到的。理论上来说，设计者就是希望你把所有的组件都放在container里面，而不是后面。container即是容器的意思，用来容纳各种组件。

2，swiper autoplay=false时，也会发生自动切换.

这里swiper有个bug，autoplay主动设置为false，也会出现自动滑动的bug。这个bug比较明显，应该很快微信就可以修复的。

目前为止，只有不设置swiper的autoplay就可以实现不自动滑动效果。

3，indicator-dots的位置可以调整吗？

indicator-dots目前是没有开放接口调整精确位置，但是可以通过设置swiper的width,height来调整dots的大概位置。毕竟这只是个简单的装饰，不用太在意。

===========喜欢的可以收藏文章，或者关注我哦，将持续更新文章以及教学视频=========