Flex布局与技术对比-优快云博客

1，Flex布局

容器叫container 子控件叫items

设置容器的属性：

display:flex;

flex-direction:相当于LinearLayout的orientation，row（默认值） | row-reverse | column |column-reverse

flex-wrap:是否允许换行。nowrap（默认值）不换行 | wrap（向下换行） | wrap-reverse（向上换行）

justify-content:item在主轴上的对齐方式，flex-start（默认值） | flex-end | center |space-between（空白在item中间） | 
                space-around（空白在item两边） | space-evenly（空白在item两边，item之间的空白会“重叠”）

align-items:项目在行中的对齐方式，stretch（默认值，项目拉伸至填满行高） | center  | flex-end | baseline | flex-start

align-content:多行排列时在交叉轴对齐方式，stretch（默认值，项目行拉伸至填满交叉轴） | flex-start | center |flex-end | space-between | space-around | space-evenly

设置项目的属性：

order:项目沿主轴方向上的排列顺序，数值越小，排列越靠前，0（默认值） | <integer>

flex-shrink:溢出时用到，项目收缩因子，1（默认值） | <number>

flex-grow:扩张因子，容器有空余时用到，0（默认值） | <number>
            扩张因子相加>=1此时和android中weight处理逻辑一样，
            扩张因子相加<1时要计算，比如空余60的空间，扩张因子为0.1、0.2、0.3,0.1+0.2+0.3=0.6<1,那每个控件分到的长度为 60x0.1、60x0.2、60x0.3

flex-basis:auto（默认值） | <length>

flex:none | auto | @flex-grow @flex-shrink @flex-basis

align-self:用于覆盖容器的align-items，auto（默认值） | flex-start | flex-end |center | baseline| stretch

2，域名

域名配置要是https

3，发布

并非全量发布之后，用户就会立即使用到最新版的小程序，这是因为微信客户端存有旧版本小程序包缓存。用户在使用小程序时会优先打开本地的小程序包，微信客户端在某些特定的时机异步去更新最新的小程序包。一般我们认为全量发布的24小时后，所有用户才会真正使用到最新版的小程序。

4，技术原理比较

React Native：产出的并不是“网页应用”，或者说“HTML5应用”，又或者“混合应用”。最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。

小程序：选择类似于微信 JSSDK 这样的 Hybrid 技术，即界面主要由成熟的 Web 技术渲染，辅之以大量的接口提供丰富的客户端原生能力。同时，每个小程序页面都是用不同的WebView去渲染，这样可以提供更好的交互体验，更贴近原生体验，也避免了单个WebView的任务过于繁重。

5，加载

小程序的代码包被下载（或从缓存中读取）完成后，小程序的代码会被加载到适当的线程中执行。此时，所有app.js、页面所在的JS文件和所有其他被require的JS文件会被自动执行一次，小程序基础库会完成所有页面的注册。

在视图层内，小程序的每一个页面都独立运行在一个页面层级上。小程序启动时仅有一个页面层级，每次调用wx.navigateTo，都会创建一个新的页面层级；相对地，wx.navigateBack会销毁一个页面层级。对于wx.redirectTo，这个调用不会打开一个新的页面层级，而是将当前页面层级重新初始化

6，渲染

初始渲染中得到的data和当前节点树会保留下来用于重渲染。每次重渲染时，将data和setData数据套用在WXML片段上，得到一个新节点树。然后将新节点树与当前节点树进行比较，这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除。最后，将setData数据合并到data中，并用新节点树替换旧节点树，用于下一次重渲染。