小程序开发 vs 网页开发

• 网页开发中的渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应
• 网页开发者可以使用各种浏览器暴露出来的DOM API，进行DOM选中和操作
• 在小程序中，页面渲染和业务逻辑是分离的，分别运行在不同的线程中
  （1）逻辑层运行在JSCore中，并没有一个完整浏览器对象，因此缺少相关的DOM API和BOM API
  （2）在网页开发中非常熟悉的一些库，例如jQuery、Zepto等，在小程序中无法运行的
  （3）SCore的环境同NodeJS环境也是不完全相同的，所以一些NPM的包在小程序中也是无法使用的
• 小程序的性能介于纯网页开发与原生(native)开发之间

小程序的运行环境

什么是微信小程序

无需安装

小程序 vs APP

• 安装使用
  （1）小程序：无需安装、无需卸载、简单易用、占用内存较小
  （2）APP：需要主动联网下载安装APP、不想用了需要主动下载
• 开发
  （1）小程序：跨平台、开发门槛低、开发周期短、开发成本低（对初创企业来说是个很好的选择）
  （2）APP：开发成本高、每一个平台都要维护一套代码（目前也有ReactiveNative、Flutter等跨平台方案）
• 发布上线
  （1）小程序：提交到微信公众平台审核
  （2） APP：提交到应用商店审核（Apple的App Store常有审核不通过的情况，审核周期也较长）
• 其他：小程序用户体验、功能丰富度、开发性不如APP

小程序开发的目录结构

必须存在必须存在必须存在必须存在

小程序中的flex布局

flex container

display: flex;        /* flex container以block-level形式存在：块级元素 */
display: inline-flex; /* flex container以inline-level形式存在：行内元素 */

直接子元素flex items

• flex container容器存在两个轴：主轴（main axis）与交叉轴（cross axis）：主轴是可以设置为水平的还是垂直的，交叉轴是一直垂直于主轴的

• flex-direction属性决定了main axis的方向：有4个取值：
  （1）row：默认值：主轴从左到右，交叉轴从上到下
  （2）row-reverse：主轴从右到左，交叉轴从上到下
  （3）column：主轴从上到下，交叉中从左到右
  （4）column-reverse：主轴从下到上，交叉轴从左到右
  

• flex item默认都是沿着main axis（主轴）从main start开始往main end方向排布
  

• flex container上的css属性

justity-content

• 取值：flex-start：flex item与main start对齐

• 取值：flex -end：与main end对齐
  
• 取值：center
  
• 取值：space-between
  （1）flex item之间的间距相等
  （2）与main start、main end两端对齐
  
• 取值：space-evenly
  （1）flex item之间等距离
  （2）flex item与main start、main end之间的距离等于flex item之前的距离
  
• 取值：space-around
  （1）flex item之间等距离
  （2）flex item与main start、main end之间的距离是flex item距离的一半