小程序学习之路（持续更新）

1. 小程序简介

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

• 运行环境不同：网页运行在浏览器环境中、小程序运行在微信环境中
• API不同：小程序无法调用DOM和BOM的API，但是可以调用微信环境提供的各种API 地理定位、扫码、支付。
• 开发模式不同：网页开发模式：浏览器+代码编辑器 ；小程序有自己标准的开发模式：①申请小程序开发账号② 安装小程序开发者工具③创建和配置小程序项目

2. 第一个小程序

使用浏览器打开 https://mp.weixin.qq.com/网址，点击右上角的立即注册即可进入到小程序开发账号

一. 注册流程如下
1.注册：选小程序
2.填写账号信息：
3.提示邮箱激活：
4.点击链接激活账号：
5.选择主体类型：中国大陆、个人
6.主体信息登记：个人、
7.获取小程序的AppID：点左侧的开发、开发设置、创建小程序项目时，需要用到APPID

二. 安装开发者工具

1. 推荐下载和安装最新的稳定版，下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
   2.打开开发工具扫码登陆
   3.点左侧小程序：设置下的代理——》代理设置选不使用任何代理，勾选后直连网络

三. 创建小程序项目
1.点击加号按钮
2.填写项目信息 ： 开发模式——》小程序、后端服务——》不使用云服务、语言javascript
3.在模拟器上查看项目效果（点头部的编译）
4.在真机上预览项目效果（点头部的预览）扫码查验
5.以头像为界限主界面的5个组成部分：头像上部是菜单栏、头像那栏是工具栏、头像下是模拟器、模拟器右边是代码编辑区、编辑区下边是调试区

四. 项目组成结构
1.pages: 用来存放所有小程序的页面
2.utils 用来存放工具性质的模块（格式化时间的自定义模块）
3.app.js 小程序项目的入口文件（页面的脚步文件，存放页面数据，事件处理函数）
4.app.json 小程序项目的全局配置文件（当前页面的配置文件,配置窗口外观、表现）

• pages: 用来记录当前小程序所有页面的路径
• window： 全局定义小程序所有页面的背景色、文字颜色
• style: 全局定义小程序组件所使用的样式版本
• sitemapLocation: 用来指明 sitemap.json的位置

5.app.wxss 小程序项目的全局样式文件（当前页面的样式表文件）
6.project.config.json 项目的配置文件
7.sitemap.json 用来配置小程序及其页面是否允许被微信索引
8.wxml文件（页面的模板结构文件）

• 页面的.json配置文件，可对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项

9.新建小程序页面只需要在app.json——》pages中新增页面的存放路径即可

3.小程序代码的构成

一 . 小程序代码的构成——WXSS样式
1.WXML和HTML的区别

• 标签名称不同

HTML (div、span、img、a)
WXML (view 、text、image、navigator)

• 属性节点不同

《a href = ‘#’>超链接》《/a》
《navigator url=‘/pages/home/home’》《/navigator》

2.WXSS和CSS的区别

• 新增了rpx尺寸单位

CSS中需要手动像素单位换算，例如rem
WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动换算

• 小程序提供了全局的样式和局部样式

项目根目录中的app.wxss会作用于所有小程序页面
局部页面的.wxss样式仅对当前页面生效

• WXSS仅支持部分CSS选择器

.class和#id
element
并集选择器、后代选择器
::after和::before登伪类选择器

二.小程序代码的构成——JS逻辑交互

1. 小程序中的js文件分为三大类，分别是

① app.js:是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

② 页面的.js：是页面的入口文件，通过调用Page()函数来创建并运行页面
③ 普通的.js文件：是普通的功能模块文件，用来封装公共的函数或属性供页面使用

4.小程序的宿主环境

4.1 小程序的启动过程

① 把小程序的代码包下载到本地
② 解析app.json 全局配置文件
③ 执行app.js小程序入口文件,调用App()创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成

4.2 页面渲染过程

① 加载解析页面的.json配置文件
② 加载页面的.wxml模板和.wxss样式
③ 执行页面.js文件，调用Page()创建页面实例
④ 页面渲染完成

5. WXML模板语法

在data中定义页面数据
在页面对应的.js文件中，把数据定义到data对象中即可：

Page({
 data: {
  //字符串类型的数据
  info:	'init data',
  // 数组类型的数据
  msgList:[{msg: 'hello'},{msg:'world'}]	
 }
})