前言：微信小程序开发模式
1、申请小程序开发账号
2、安装小程序开发者工具
3、创建和配置小程序项目
一、申请小程序开发账号
1、体验小程序
2、注册小程序开发账号
使用浏览器打开https://mp.weixin.qq.com网址，按照提示注册
注册承购后，获取小程序ID
二、安装小程序开发者工具
微信开发者工具是微信官方推荐使用的小程序开发工具
1、下载开发者工具
推荐下载稳定版，下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
2、登录界面
3、设置代理
选择“不使用任何代理，勾选后直连网络”
三、创建第一个小程序
1、创建小程序
选择
“不使用云服务”
，
“javascript”
四、小程序代码的构成
1、项目结构
| 文件 | 用途 |
|---|---|
| pages |
|
| utils | 用来存放工具性质的模块（如：格式化时间的自定义模块） |
| app.js |
|
| app.json |
|
| app.wxss | 小程序项目的全局样式文件 |
| project.config.json | 项目的配置文件 |
| sitemap.json | 用来配置小程序及其页面是否允许被微信索引 |
2、小程序页面的组成部分
官方建议把
所有小程序的页面，都存放在pages 目录
中，以
单独的文件夹
存在
其中，每个页面由
4个基本文件
组成，它们是：
| 文件名 | 用途 |
|---|---|
| .js文件 | 页面的脚本文件，存放页面的数据、事件处理函数等 |
| json文件 | 当前页面的配置文件，配置窗口的外观、表现等 |
| .wxml 文件 | 页面的模板结构文件 |
| .wxss 文件 | 当前页面的样式表文件 |
3、JSON配置文件
JSON是一种数据格式
，小程序通过
不同的.json 配置文件，可以对小程序项目进行不同级别的配置
。
小程序项目中有
4 种json配置文件
| 配置文件 | 用途 | 配置项 |
|---|---|---|
| app.json |
是当前小程序的，包括了小程序的 等 |
①：用来记录当前小程序所有页面的路径 ② ：全局定义小程序所有页面的背景色、文字颜色等 ③ ：全局定义小程序组件所使用的样式版本 ④ ：用来指明 sitemap.json 的位置 |
| project.config.json |
是项目配置文件，记录对 |
中保存了 ， 中保存的是 ， 中保存的是 |
| sitemap.json |
类似于网页的seo，用来 |
的，如需要关闭 sitemap 的索引提示，可在小程序项目 |
| 页面的.json |
每一个页面，可以使用.json 文件来 |
在app.json -> pages 中新增页面的存放路径 |
① 新建小程序页面
只需要在
app.json -> pages
中新增页面的存放路径，小程序开发者工具即可自动创建对应的页面文件
② 修改项目首页
调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页
4、WXML 模板
WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。
| 区别 | HTML | WXML |
|---|---|---|
| 标签名称不同 | div, span, img, a | view, text, image, navigator |
| 属性节点不同 |
|
|
| 提供了类似于 Vue 中的模板语法 | 无 | 数据绑定、列表渲染、条件渲染 |
5、WXSS 样式
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。
| 区别 | CSS | WXSS |
|---|---|---|
| 新增rpx尺寸单位 | CSS 中需要手动进行像素单位换算，例如 rem | 底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算 |
| 提供了全局的样式和局部样式 | 根据页面需要引入样式 | 项目根目录中的 app.wxss 会作用于所有小程序页面，局部页面的 .wxss 样式仅对当前页面生效 |
| WXSS 仅支持部分 CSS 选择器 | 全部支持 | .class 和 #id、element、并集选择器、后代选择器、::after 和 ::before 等伪类选择器 |
6、JS交互逻辑
通过 .js 文件来处理用户的操作。例如：响应用户的点击、获取用户的位置等
小程序有3种JS文件
| 文件名 | 作用 |
|---|---|
| app.js |
，通过调用 来启动整个小程序 |
| 页面的 .js 文件 |
，通过调用 来创建并运行页面 |
| 普通的 .js 文件 |
，用来 供页面使用 |
四、小程序的宿主环境
宿主环境指的是程序运行所必须的依赖环境。安卓和IOS系统是两个不同的宿主环境。
小程序的宿主环境包括：
通信模型、运行机制、组件、API
1、通信模型
小程序的通信主体是
渲染层
和
逻辑层
① WXML模板和WXSS样式工作在渲染层
② JS脚本工作在逻辑层
渲染层和逻辑层、逻辑层和第三方服务器之间的通信都是通过通过微信客户端进行转发
2、运行机制
小程序启动过程
① 把小程序的代码包下载到本地 → ② 解析 app.json 全局配置文件 → ③ 执行 app.js 小程序入口文件，
调用 App() 创建小程序实例
→ ④ 渲染小程序首页 → ⑤ 小程序启动完成
页面渲染的过程
加载解析页面的.json配置文件 → 加载页面的 .wxml 模板和 .wxss 样式 → 执行页面的 .js 文件，
调用 Page() 创建页面实例
→ 页面渲染完成
3、组件
微信官方9大组件类：
① 视图容器② 基础内容③ 表单组件④ 导航组件⑤ 媒体组件⑥ map 地图组件⑦ canvas 画布组件⑧ 开放能力⑨ 无障碍访问
① 常用的视图容器类组件
| 名称 | 用途 |
|---|---|
| view | 类似于div，实现页面的布局效果 |
| scroll-view | 实现滚动列表效果 |
| swiper和swiper-item | 轮播图 |
swiper组件常用属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | boolean | false | 是否显示面板指示点 |
| indicator-color | color | rgba(0,0,0,.3) | 指示点颜色 |
| indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
| autoplay | boolean | false | 是否自动切换 |
| interval | number | 5000 | 自动切换时间间隔 |
| circular | boolean | false | 是否采用衔接滑动 |
② 常用的基础内容组件
| 名称 | 用途 |
|---|---|
| text | 类似于span |
| rich-text | 富文本组件，支持将html字符串渲染为WXML结构 |
在小程序中只有text组件支持长按选中，通过
text组件的selectable属性
实现长按选中文本
通过
rich-text组件的nodes属性
，把HTML字符串渲染为对应的UI结构
③ 其他常用组件
button组件：可以通过
open-type属性
可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
image组件：image组件默认的宽度约为300px、高度约为240px
navigator组件：页面导航组件，类似于a链接
4、API
3大类API
| 类型 | 特点 |
|---|---|
| 事件监听API | 以ON开头 |
| 同步API | 以Sync结尾 |
| 异步API | 需要通过success、failcomplete接收调用的结果 |