微信小程序 02 Hello miniProgram

2.1 小程序特点概述

---

1. 没有 Dom

2. 核心是组件化开发（具备特定功能和展示效果的代码集合。区别于模块化。）

3. 体积小，单个压缩包体积不能大于 2MB，否则无法上线。

4. 小程序的四个重要文件：.js .wxml .wxss .json

5. 小程序适配方案：rpx（responsive pixel 响应式像素单位）

• 小程序适配单位：rpx
• 规定任何屏幕下的宽度都为 750 px
• 小程序会根据屏幕的宽度不同 来 自动 计算 rpx 这个单位 的大小
• Iphone6 的话，1rpx = 1 物理像素 = 0.5 px

---

2.2 Hello 微信小程序

1. 获取到 自己的 APPID

2. 新建一个 项目

3. 项目文件说明

project_config.json：项目的 配置文件，但不建议在这里 去做更改。可以 点击 IDE 右上角的 详细，然后 进行更改。更加的 亲民人性化，至少全中文。哈哈 ~

app.json：整个项目 全局的 配置，比如说 我们 要绑定 几个 页面，显示的窗口样式是什么样的，sitemap 文件在哪。当然 现在 用 entryPagePath 就可以 设置 小程序的默认起始页。

sitemap.json：被索引配置文件，在这里 可以 通过 配置，让小程序 的曝光率变低或变高。也可以 指定 哪些页面 可以被 wx 爬虫 索引到。

app.wxss：全局 css 配置，可以 作为 初始化 页面的 CSS。

app.js：可以写逻辑内容，内置有函数。可以判断用户以什么方式进入的小程序，获取到用户的信息（可以在 onlunch 函数里写这个逻辑，onlunch 是指小程序打开后，第一次执行的函数。），还可以定义全局数据（globleData 那个就是定义全局数据的）！

pages：里面存放 的 每个文件夹，就是 页面。

index.js：页面的 js 文件，大多数 里面 写的都是 Page() 这样的类，代表 当前 页面的意思。data{} 是 声明和初始化一些属性的。Page() 里面 也可以 写 一些函数，最重要的函数 肯定是onLoad 指的是 当页面 加载时，第一次执行的 函数。this.setData({}) 是 用来 给 属性 赋值的 方法。

index.wxml：页面的 内容主体 架子。里面可以用 各种 组件，组件里面 可以 写 bindtap 作为 事件的绑定。

index.wxss：就是 给 页面 装潢的，跟 普通的 css 没啥区别。

---

2.3 关于数据

1. 声明 和 初始化 一个 页面里面的 数据/属性

2. {{属性}} 来使用 这个属性 里面的数据

3. this.setData({键值对}) 来进行 数据的修改

4. 直接 this.data.xxx 获取 到 属性