微信小程序入门

      一放暑假学校就安排了为其4周的实训，跑来广药的拓胜学下微信小程序，一开始以为很难，结果通过看文档慢慢入门之后发现并没想象中的难，入门之后自己跟着视频做了个简易版的天气预报，再自己做了个豆瓣电影app（基本上自己能够做出来，主要是调用api，挺方便的），还参考源码做了美团外卖，以为会教后台，结果并不教，就教了一周多小程序就结束小程序的教学了，好了，闲话少说，先介绍下入门基本步骤：

直接百度微信小程序进去文档，再选择“工具”一栏点进去选择下载开发工具，（每次开发都得在有网情况下！哎！），如下图所示：

接下来就安装再新建项目就可以使用了，可以上mp.weixin.qq.com注册微信小程序（该邮箱必须未注册过微信公众号，可以直接新申请一个qq，注册成功获取 AppID），当然也可以直接选择无AppID来新建项目。主要要勾选默认会帮你构建一个模板页面的选项。

之后就可以查看官方文档慢慢试试一些属性及效果。

了解文件结构如下图所示：

   Pages 数组

   数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

   文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。如下所示，

  “pages/index/index”代表4个文件：index.json+index.js+index.wxml+index.wxss 的组合。

  tabBar

  如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指   定   tab 栏的表现，以及 tab 切换时显示的对应页面。

  Tip:

1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

 大概就这样吧。自己慢慢试。

 是不是觉得.js、.wxss、.wxml 看起来似曾相识，其实就对应于 .js、.css、.html 三个文件，分别代表逻辑、样式、布局三种。

 布局主要使用<view></view>标签，<view> 标签相当于 <div> 标签，其它的可以查看“组件”，“api”等都有详细例子，可以自己黏贴过来看看效果。

 wxss 使用一个新的单位 rpx（相对的像素），1px = 2rpx。

 flex 布局（灵活布局）：

 1、要使几个元素块并排显示（按行排列），wxss 样式如下：

       display:flex;

       flex-direction:row;

 2、要使几个元素块竖着显示（按列排列），wxss 样式如下：

       display:flex;

       flex-direction:column;

 3、把一行的空间分配给几个元素适配显示：

      flex: 1;

 4、若一个元素占据了一行的某部分空间，剩余的空间要全部给另外一个元素的话，可以如下表示：

      flex-grow: 1;   /* 表示将剩余的空间分配给它 */

 5、一行的元素居中：

      justify-content:space-around;    /** 两端的距离较小 */

 或 justify-content:space-between;  /** 尽量往中间靠，两端的距离稍大 */

 6、对准上面的元素：

     align-item:center;

 7、响应的数据绑定

      框架的核心是一个响应的数据绑定系统。
      整个系统分为两块视图层（View）和逻辑层（App Service）
      框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

 8、页面管理
 框架 管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期  函数注册进 框架 中，其他的一切复杂的操作都交由 框架 处理。

 9、基础组件
 框架 提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。

 10、丰富的 API
 框架 提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。