小程序开发中的各种汇总

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

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 项目在交叉轴上如何对齐。
4000


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",

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