1 程序开发

1.1 原则（自己感悟）

1、文件展示
2、逻辑调用
3、数据存储
4、架构使用
5、硬件匹配

1.2 架构

开发类型	架构	说明
网页开发	HTML + CSS + JS	HTML 是用来描述当前这个页面的结构 CSS 用来描述页面的样子 JS 通常是用来处理这个页面和用户的交互。

1.3 开发模式

1、MVVM:例如 React, Vue，提倡把渲染和逻辑分离。

2 建立项目

打开开发工具，创建小程序，在目录中选择空目录。测试可用测试账号。
注意：每个微信可以使用5个测试账号。

3 微信代码构成

后缀	说明
.json	JSON 配置文件
.wxml	WXML 模板文件
.wxss	WXSS 样式文件
.js	JS 脚本逻辑文件

3.1 JSON 配置文件

页面配置

名称	主要配置文件	功能
app.json	小程序配置	全局配置
project.config.json	工具配置	个性化配置、编辑器的颜色、代码上传时自动压缩等等一系列选项。
page.json	页面配置	表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。单个页面的个性配置。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

1. 数字，包含浮点数和整数
2. 字符串，需要包裹在双引号中
3. Bool值，true 或者 false
4. 数组，需要包裹在方括号中 []
5. 对象，需要包裹在大括号中 {}
6. Null
7. 还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

3.2 WXML 模板文件

操作
和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

功能	HTML	WXML
标签名字	div, p, span	view, button, text
属性	通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化	wx: 开头的属性

3.3 WXSS 样式文件

布局样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1. 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位 rpx，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3. 此外 WXSS 仅支持部分 CSS 选择器

3.4 JS 脚本逻辑文件

交互 ：

1. 响应用户的操作
2. JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。