微信小程序开发之布局奇盈绝技

1.微信小程序对flex流式布局支持的相当不错，甚至有些地方可以使用flex进行修复操作
如在设置image这个标签的时候，内设有个10rpx的底部空间，假如这个空间背景为黑色，那么10rpx这个底部空间就会变成黑色，假如是白色，那就是白色，所以不处理这个底部空间，有可能会影响整体美观，做法很简单

display:flex

在图片样式上面加上这个流式显示，这个底部空间就消失了，是不是很神奇？
2.既然我们谈到了背景颜色，那么微信小程序如何修改背景颜色的呢？
我们有两种做法:首先我们可以在骨架上面包装个整体的层，将这个层这样设置样式

width:100%;
height:100%;
background-color:#******

是不是恍然大悟？
其实我们还可以这样干，我们分析下编译好的骨架，我们可以看到微信小程序这个骨架最终的结果是

<page></page>

那么我们可以这样设置

page{
background:"************"
}

3.在我们使用scroll-view的时候呢，我们会发现一个问题，flex布局好像不生效啊，它真的是不支持flex吗？前边说过小程序其实对flex布局支持的相当好，不会被打脸了吧，我们回归文档看一看scroll-view

原来是没开启这个功能！！~~
4.在做scroll-view的时候底下留了好大一块区域，但是我们也没定高和宽，这时候该怎么办呢？
我们可以在scroll-view下面包装一层

<scroll-view scroll-x enable-flex>
		<view></view>
</scroll-view>

我们会发现还是没有什么用，这时候就该猜测是不是我们动用了什么组件里面某个属性，当我们吧enable-flex去除之后，多余区域神奇般的消失了~~~

<scroll-view scroll-x>
		<view></view>
</scroll-view>

5.说到定高和宽，这里提醒一下。没有特殊要求，不要定高宽，让组件本身把高和宽顶起来。
6.wxs的使用小记录,wxs是微信小程序嵌入wxml中的一种用法，其写法和js一样，我们首先具体格式如下

<wxs module="xxx" src="xxx">
	

</wxs>

当我们想做渲染的时候
我们可以直接调用wxs里面的方法，进行渲染，我目前使用wxs做过滤器
7.当我们两个模块设计图是这样的

我们该如何用flex进行处理呢？
首先，我们可以把这个看做成左和右两个模块，右模块可以分为上下两个模块，左右模块设计师假如有刻意留边距的时候，这个width肯定不是做到100%的，我们可以先把大的模块整体设置100%width，然后图片正常尺寸设计，

display:flex;
flex-direction:row;
justify-content:space-between

这样做的样式就是左模块往左，右模块往右，中间就会留个间距出来了。
右上，右下也是同理。
8.更了这么多，也谈谈对产品的思考
京东和淘宝大家都知道是电商，其实这两个有一部分地方不一样，淘宝一般用来没事逛逛，而京东呢，一般用户群体带有明显的购物目的，因为自营用起来是比较放心的，淘宝可能需要货比货，这就影响了许多格局方面的问题，比如sku方面的设计，ui的设计，心理学之类的东西。
9.如何动态的去调整图片大小,而不改变图片的长宽比例
关于这个问题呢，小程序已经帮我们想到了，也就是说在我们来看看文档是怎么写的

image组件中有个mode选项，
这么多模式可以选择，所以我们可以轻而易举的进行缩放，
但是问题来了，当我们的width固定不是350rpx，假如是340rpx，那又如何控制缩放呢，
其实微信小程序在监听图片尺寸上开放了个接口，我们还是回归文档看一下

我们可以使用这个方法对图片进行监听，得出width和height，长和高的比进行计算
公式也很简单，就是 h/w=newh/neww
这样我们就可以求出按这个比例算出的长和宽了，

    <image
    bind:load="imgLoad" 
    ></image>
    imgLoad(e){
      console.log(e)
      const {width,height}=e.detail
      console.log(width,height)
      //width / height= 340 / height
      let percent=width/height
      this.setData({
        w:340,
        h:width/percent
      })
    }

等等，那该如何动态赋值?
我们可以进行这样改造

<image bind:load="imgload" style="height:{{h}}rpx;width:{{w}}rpx"></image>

这样子，我们就可以动态获取h和w了~~~