微信小程序基础

# 一、小程序简介

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序依赖于微信环境，可以调用微信提供的API接口，如微信登录、扫码支付等。

其实以前有尝试着开通了一个小程序，是为了将wordpress博客同步放到小程序上，后面因为wordpress太耗资源，换了博客就没有使用了，现在是感觉可以使用小程序做一些小工具，比如天气预报、番茄闹钟、万年历、亲戚关系称呼、备忘录等等，想着总要再重新了解一下，之前都是套用别人教程模板的。

微信小程序我大概看了下其实如果有一点前端HTML/CSS基础是比较好理解的，不过也还好，我也不太懂，以前自己学习也就看懂一点标签，而且前期我应该也是跟着教程使用原生工具进行开发，不过进度肯定没办法保证，以后作为了就丢到公众号里面进行调用。

## 二、小程序与普通网页开发的区别

1、运行环境不同

网页运行在浏览器环境中

小程序运行在微信环境中

2、API不同

小程序无法调用DOM和BOM的API

可以调用微信提供的API接口，如微信登录、扫码支付等

3、开发模式不同

网页开发使用代码编辑器和浏览器即可

微信小程序开发步骤：

- 申请小程序开发账号
- 安装小程序开发工具
- 创建和配置小程序项目

## 三、基础介绍
**小程序体验：**
![微信小程序](/media/202312/2023-12-13_095130_8576510.6790982169056993.png)

**小程序注册与认证：**

[微信公众平台 (qq.com)](https://mp.weixin.qq.com/)

**微信小程序开发工具下载：**

[微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

## 四、微信开发工具简介：

![微信开发工具](/media/202312/2023-12-13_095154_6033310.3599490639224414.png)

分为：
- 预览区域，可以设置机型，热重载
- 文件区域
- 编辑器
- 调试区域
- 上方是菜单栏，进行一些全局设置、代理、外观等。
- 右上方详情是小程序的基本信息，包括APPID，项目名称和目录等

![微信开发工具介绍](/media/202312/2023-12-13_095231_8650420.09370648322855901.png)

## 五、小程序项目的组织结构

![组织架构](/media/202312/2023-12-13_095335_9403920.38232040268861334.png)

小程序根目录包含了基本的pages目录、utils目录、app.js、app.json、app.wxss、project.config.json、sitemap.json

| 文件                                                         | 必需 | 作用                                   |
| :----------------------------------------------------------- | :--- | :------------------------------------- |
| [app.js](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html) | 是   | 小程序逻辑                             |
| [app.json](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html) | 是   | 小程序公共配置                         |
| [app.wxss](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html) | 否   | 小程序公共样式表                       |
| pages目录                                                    | 是   | 页面目录，里面每个目录为一个页面       |
| utils目录                                                    | 否   | 公用函数代码                           |
| project.config.json                                          | 是   | 定义了项目的基本信息，名称，基础库版本 |
| sitemap.json                                                 | 是   | 定义是否允许微信索引                   |

pages目录里面每个目录为一个页面文件，里面包含了如下文件：

- .js页面处理逻辑文件，页面数据，事件处理。
- .json页面配置文件，窗口外观，表现
- .wxml页面源代码，模板结构
- .wxss页面css文件，样式表

所有页面需要在app.json定义，按顺序作为首页。

![页面逻辑](/media/202312/2023-12-13_095418_6595310.2053216648370655.png)

**简单来说就是，每个页面在app.json定义好，编译完会自动生成4个默认配置文件。然后自定义修改页面文件即可。**

## 六、WXML和HTML的区别

小程序的页面文件后缀为.wxml,和html很类似的叫法，但是还是有区别的。

1、标签名称不同：

HTML(div,span,img,a)

WXML(view,text,image,navigator)

2、属性节点不同：
```html
<a href="#">超链接</a>

<navigator url="/pages/home/home"></navigator>
````

3、提供了类似于vue的模板写法：
- 数据绑定
- 列表渲染
- 条件渲染

## 七、WXSS和CSS的区别
小程序的样式文件后缀为.wxss，也是和CSS类似。

1、新增了rpx尺寸单位，可以在不同大小的屏幕自动换算

2、提供了全局的样式和局部样式，如app.wxss与页面的wxss

3、WXSS仅支持部分CSS选择器，但是基本的选择器如ID，class，和标签选择器、后代选择器，伪类选择器都支持的

后面我都会尝试下。

## 八、小程序的宿主环境

操作系统是最底层的系统环境，如Andriod和IOS系统。

然后基于Andriod/IOS安装了微信环境

小程序基于微信环境运行，使用的API和第三方服务器都是基于微信环境进行交互，小程序在微信上运行，如果想要和第三方服务器通信需要通过微信提供的接口，微信本身提供了很多API接口来实现调用微信登录，获取手机号码、获取微信头像等等功能，挺方便的。

小程序的宿主环境包含的内容：

- 通信模型
- 运行机制
- 组件(标签)
- API

**小程序启动过程：**

1. 把小程序的代码包下载到本地
2. 解析app.json全局配置
3. 执行app.js小程序入口文件，调用APP()创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

**页面渲染过程：**

1. 加载解析页面的.json配置文件
2. 加载页面的.wxml文件和wxss样式
3. 执行页面的js文件，调用Page()创建页面实例
4. 页面渲染完成

大概了解下微信小程序，这里不涉及小程序的申请开通等，一般在微信公众平台填写信息申请即可。下次开始一点点从头进行学习。