微信小程序开发1
1.小程序简介
1.1.小程序与普通网页开发的区别
运行环境的不同
网页运行在浏览器
小程序运行在微信环境API 不同
小程序无法调用 DOM 和 BOM 的 API
但是小程序可以调用微信环境提供的一些 API
地理定位
扫码
支付开发模式不同
网页的开发模式： 浏览器+代码编辑器
小程序开发模式
申请小程序开发账号
安装小程序的开发者工具
创建和配置小程序项目
2小程序代码的构成
2.1.项目的基本组成结构
- pages 用来存放所有小程序的页面，每个页面都是一个单独的文件夹
- utils 用来存放工具性质的模块
- app.js 整个小程序项目的入口文件
- app.json 小程序项目的全局配置文件
- app.wxss 小程序项目的全局样式文件
- project.config.json 项目的配置文件
- sitemap.json 用来配置小程序及其页面是否允许被微信索引
2.2.小程序页面的组成部分
小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，
每个页面由 4 个基本文件组成，它们分别是： .js 文件（页面的脚本文件，存放页面的数据、事件处
理函数等） .json 文件（当前页面的配置文件，配置窗口的外观、表现等） .wxml 文件（页面的模
板结构文件） .wxss 文件（当前页面的样式表文件）
总结而言,就是一个页面的结构,样式,功能和配置都被分别放到了单独的文件夹中进行维护
2.3. JSON 配置文件
JSON 是一种数据格式，在实际开发中， JSON 总是以配置文件的形式出现。小程序项目中也不例外：
通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。 小程序项目中有 4 种 json 配置文件，分别是：
项目根目录的 app.json 配置文件
项目根目录种的 project.config.json 配置文件
项目根目录中的 sitemap.json 配置文件
每个页面文件夹中的 .json 配置文件
2.4 WXML
WXML 是小程序框架的标签语言,用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。他们 主要存在下面几点的差别
标签名不同 1. HTML（div）
提供了类似于 vue 中的模板语法
- 数据绑定 2. 列表渲染 3. 条件渲染
2.5. WXSS
WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的
CSS 。他们主要存在下面几点的差别
① 新增了 rpx 尺寸单位
CSS 中需要手动进行像素单位换算，例如 rem
WXSS 在底层支持新的尺寸单位 rpx ，在不同大小的屏幕上小程序会自动进行换算
② 提供了全局的样式和局部样式
项目根目录中的 app.wxss 会作用于所有小程序页面
局部页面的 .wxss 样式仅对当前页面生效
③ WXSS 仅支持部分 CSS 选择器
.class 和 #id element
并集选择器、后代选择器
::after 和 ::before 等伪类选择器
3.8. js 文件的分类
小程序中的 JS 文件分为三大类，分别是：
① app.js
是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序
② 页面的 .js 文件
是页面的入口文件，通过调用 Page() 函数来创建并运行页面
③ 普通的 .js 文件
是普通的功能模块文件，用来封装公共的函数或属性供页面使用
DAY01总结
① 能够知道如何创建小程序项目
微信开发者工具的使用、 appID 的获取
② 能够清楚小程序项目的基本组成结构
app.js 、 app.json 、 app.wxss 、 pages 文件夹
③ 能够知道小程序页面由几部分组成
wxml 、 wxss 、 json 、 js
④ 能够知道小程序中常见的组件如何使用
view 、 text 、 image
⑤ 能够知道小程序如何进行协同开发和发布
成员管理、发布小程序、查看运营数据
