＜微信小程序＞《微信小程序开发笔记》（二）

程序开发笔记》（二）"/>

＜微信小程序＞《微信小程序开发笔记》（二）

《微信小程序开发笔记》（二）

• 1 程序开发
• • 1.1 原则（自己感悟）
  • 1.2 架构
  • 1.3 开发模式
• 2 建立项目
• 3 微信代码构成
• • 3.1 JSON 配置文件
  • 3.2 WXML 模板文件
  • 3.3 WXSS 样式文件
  • 3.4 JS 脚本逻辑文件

1 程序开发

1.1 原则（自己感悟）

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

1.2 架构

1.3 开发模式

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

2 建立项目

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

3 微信代码构成

3.1 JSON 配置文件

页面配置

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

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

3.2 WXML 模板文件

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

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 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。