一. 何为微信小程序？

1. 微信小程序是一种全新的连接用户与服务的方式

2. 它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

二. 如何开发小程序

1. 开发小程序的第一步：

你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序（需要在网页搜索微信公众平台账号注册，网址为：微信公众平台）。

2.  第二步

        ① 登录小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。 

        ② 登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

        ③ 小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID 

3. 第三步

★ 下载安装最新版本微信小程序开发工具 ，如：微信开发者工具

三. 微信小程序代码的构成

1. 微信小程序由4类文件组成：

        ① json 后缀的JSON 配置文件

        ② wxml 后缀的WXML 模板文件

        ③ wxss 后缀的 WXSS 样式文件

        ④ js 后缀的JS脚本逻辑文件

2. 每类文件的功能

① Json文件：

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。 我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外，在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

        ★ app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

        ★ project.config.json工具配置，通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，直接复制带走此文件，就可以继续沿用你的常用配置。

        ★ page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。 app.json配置文件可以全局配置所有页面都生效的配置，而具体页面的‘page.json’文件则是用来完成每个页面的个性化配置。

② Wxml模版文件：

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

注意：在wxml模版文件中，不再使用常规的标签，而使用的是微信官方封装的组件。

3. Wxss样式文件：Wxss相当于css文件，但是也与css文件有些不同

① 新增rpx尺寸单位：

手机端做布局写css样式时，需要考虑不同设备不同屏幕尺寸的显示不同。微信通过底层的换算，封装出来rpx单位，省略了开发者在开发过程中的尺寸换算问题。

        ★ rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

② 提供了全局的样式和局部样式：

和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

③ css文件导入：

样式文件除了有全局样式文件和页面样式文件以外，也可以选择制作独立样式文件，只针对部分文件生效。通过@import ‘样式文件路径’; 引入独立样式文件。

④ 内联引入：

支持内联方式引入css样式，但是建议：如果设置的是静态样式，则不建议使用内联方式引入。 

★ 可以使用：

★ 不可以使用：

⑤ 支持的css选择器     

4. Js逻辑交互文件：

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。  

        ★ 微信小程序的js语法类似于vue语法。