小程序开发中的各种汇总

一个月前听说了小程序，前几天因为公司需要，试着开发了一个小程序，在开发中遇到了很多的问题，在这里做一个汇总，希望能给以后提供一些帮助！

1、页面布局

小程序中.wxml中的<view>类似于<div>,是块级别的，想要达到一行排列几个的<view>的效果
.wxss

        display:flex;
        flex-direction: row;
        flex-wrap: wrap ;

flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

（1）容器的属性

flex容器的六个属性分别为：

flex-direction 决定主轴的方向

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column-reverse：主轴为垂直方向，起点在下沿。
• flex-wrap 默认情况下，项目都排在一条线（又称”轴线”）上。

flex-wrap属性定义，如果一条轴线排不下，如何换行。

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

    flex-flow: <flex-direction> || <flex-wrap>;

justify-content 项目在主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 项目在交叉轴上如何对齐。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline:项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

（2）项目的属性

order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

2、样式修饰

（1）border

 border-color:  #ccc;
 border-style: solid;
 border-radius: 10rpx; 
 border-width: 4rpx;

（2）字符间距、行距

 line-height: 25px;
 letter-spacing: 2px;

3、弹窗

.wxml
    <view  bindtap="powerDrawer2" data-statu="open">弹窗2</view>
<view  bindtap="powerDrawer3" data-statu="open">弹窗3</view>
<view class="drawer_screen" bindtap="powerDrawer3" data-statu="close" wx:if="{{showModalStatus3}}"></view>
 <view animation="{{animation3}}" class="drawer_box" wx:if="{{showModalStatus3}}">  

 <!--drawer content-->
 <view class="drawer_title2">xxx</view> 
 <view class="drawer_ys"> 
 <view class="ys_1">xxx</view>
 <view class="ys_2">xxx</view>
 </view>
 <view class="drawer_ys"> 
 <view class="ys_1">xxx</view>
 <view class="ys_2">xxx</view>
 </view>
 <navigator url="/pages/yuyue/yuyue">
<button class="btn_ok" bindtap="powerDrawer3">xxxx</button>
 </navigator>
 </view>
<view class="drawer_screen" bindtap="powerDrawer2" data-statu="close" wx:if="{{showModalStatus2}}"></view>
 <view animation="{{animation2}}" class="drawer_box" wx:if="{{showModalStatus2}}">  
 <view class="drawer_title">标题</view> 
 <view class="drawer_content"> 
  <view class="top grid"> 
 <view class="title col-0">xxx</view>
 <view class="title col-0">xxx</view>
 </view>
  <view class="top grid"> 
 <view class="title col-0">xxx</view>
 <view class="title col-0">xxx</view>
 </view>
</view>
 <navigator url="/pages/yuyue/yuyue">
 <button class="btn_ok" bindtap="powerDrawer2">xxxx</button>
 </navigator>
 </view>

效果：同一个页面两个不同的点击事件出现不同的弹窗，所以在js中也配置了两次，看着大部分都是重复代码而且有点繁琐，不知道有没有别的方法可以改进下？

.js
powerDrawer2: function (e) {
var currentStatu2 = e.currentTarget.dataset.statu;
this.util2(currentStatu2)
  },

  powerDrawer3: function (e) {
var currentStatu3 = e.currentTarget.dataset.statu;
this.util3(currentStatu3)
  },

  util3: function (currentStatu3) {
var animation3 = wx.createAnimation({
  duration: 200, //动画时长 
  timingFunction: "linear", //线性 
  delay: 0 //0则不延迟 
});
this.animation3 = animation3;
animation3.opacity(0).rotateX(-100).step();
this.setData({
  animationData3: animation3.export()
})
setTimeout(function () {
  // 执行第二组动画 
  animation3.opacity(1).rotateX(0).step();
  // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 
  this.setData({
    animationData3: animation3
  })

  //关闭 
  if (currentStatu3 == "close") {
    this.setData(
      {
        showModalStatus3: false
      }
    );
  }
}.bind(this), 200)
if (currentStatu3 == "open") {
  this.setData(
    {
      showModalStatus3: true
    }
  );
}

},
  util2: function (currentStatu2) {
  var animation2 = wx.createAnimation({
  duration: 200, //动画时长 
  timingFunction: "linear", //线性 
  delay: 0 //0则不延迟 
});
this.animation2 = animation2;
animation2.opacity(0).rotateX(-100).step();
this.setData({
  animationData2: animation2.export()
})
setTimeout(function () {
  // 执行第二组动画 
  animation2.opacity(1).rotateX(0).step();
  // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 
  this.setData({
    animationData2: animation2
  })

  //关闭 
  if (currentStatu2 == "close") {
    this.setData(
      {
        showModalStatus2: false
      }
    );
  }
}.bind(this), 200)
if (currentStatu2 == "open") {
  this.setData(
    {
      showModalStatus2: true
    }
  );
}
},

4、地图

5、数据提交

6、客服

 <contact-button 
  type="default-light" 
  size="20"
  session-from="weapp">客服
</contact-button>

7、拨打电话

callmeTap: function () {
wx.makePhoneCall({
  phoneNumber: '电话号码'
}) }

8、编辑预览和上传后预览不一致

（1）上传后图片不显示

小图标都是美工做好给我的，为了好区分用的中文命名，修改成字母命名就可以正常显示了，并且不能有空格。

（2）导航的颜色不显示

"navigationBarBackgroundColor":"blue",

修改为

"navigationBarBackgroundColor":"#20B2AA",

上传后遇到的问题暂时就这两个，写的有点乱，因为时间关系，下次再把地图和数据提交补充上~~