开始学习小程序

Weipeng Qiao大约 2 分钟

微信小程序登录open in new window
小程序微信开发文档open in new window
微信开发者工具下载open in new window

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

运行环境不同
- 网页运行在浏览器环境中
- 小程序运行在微信环境中
开发模式不同
- 网页的开发模式：浏览器+代码编辑器
- 小程序的开发模式：申请小程序开发账号+安装小程序开发者工具+创建和配置小程序项目
API 不同

小程序无法调用 DOM 和 BOM 中的 API
小程序只能调用微信环境提供的各种 API（如，定位扫码和支付）

小程序的基本项目结构

pages：用来存放所有小程序的页面
utils：用来存放工具性质的模块（例如：格式化时间的自定义模块)
app.js：小程序项目的入口文件
app.json：小程序项目的全局配置文件
app.wxss：小程序项目的全局样式文件
project.config.json：项目的配置文件
sitemap.json：用来配置小程序及其页面是否允许被微信索引

小程序的页面组成部分

https://developers.weixin.qq.com/miniprogram/dev/framework/structure.htmlopen in new window)

小程序中的每个 json 文件的用途

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps6.jpg)

app.json

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps7.jpg)

project.config.json

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps8.jpg)

sitemap.json

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps9.jpg)

页面中的.json 文件

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps10.jpg)

· 快速新建一个小程序页面

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps11.jpg)

· 修改项目首页

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps12.jpg)

· WXML

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps13.jpg)

· WXSS

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps14.jpg)

· 小程序中的.js 文件分类

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps15.jpg)

中心主题

· 小程序 API 的分类

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps16.jpg)

· 主题

![img](file:///C:\Users\qwp\AppData\Local\Temp\ksohtml39504\wps17.jpg)

· 主题

开始学习小程序

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

# 小程序的基本项目结构

# 小程序中的每个 json 文件的用途

# · WXML

# · WXSS

# · 小程序中的.js 文件分类

# · 小程序 API 的分类