微信小程序学习

1. 认识小程序

1.2 认识小程序页面

1.2.1 WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

WXML和HTML的区别

• 标签名称不同
  • HTML：div, span, img, a
  • WXML：view, text, image, navigator
• 属性节点不同
  • <a href="#">超链接</a>
  • <navigator url="/pages/home/home"></navigator>
• WXML提供了类似Vue中的模板语法
  • 数据绑定
  • 列表渲染
  • 条件渲染

1.2.2 WXSS 和 CSS 的区别

• WXSS 新增了 rpx 尺寸单位
• WXSS 提供了全局的样式和局部样式
  • 项目根目录中的 app.wxss 会作用于所有小程序页面
  • 局部页面的 .wxss 样式仅对当前页面生效
• WXSS仅支持部分CSS选择器
  • .class 和 #id
  • element
  • 并集选择器、后代选择器
  • ::after和::before 等伪类选择器

1.2.3 .js文件

app.js

是整个小程序的入口文件，通过调用App()函数来启动整个小程序

页面的.js文件

是页面的入口文件，通过调用Page()函数来创建并运行页面

普通的.js文件

是普通的功能模块文件，用来封装公共的函数或属性供页面使用

1.2.4 小程序的宿主环境

手机微信

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

1. 通信模型

小程序中通信的主体是渲染层和逻辑层，其中：WXML模板和WXSS样式工作在渲染层；JS脚本工作在逻辑层。

小程序中的通信模型分为两部分：

• 渲染层和逻辑层之间的通信：由微信客户端进行转发
• 逻辑层和第三方服务器之间的通信：由微信客户端进行转发
  

2. 运行机制

小程序启动的过程：

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

页面渲染过程：

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

3. 组件

小程序中的组件也是由宿主环境提供的，分为：

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map 地图组件
7. canvas 画布组件
8. 开放能力
9. 无障碍访问

4. API

小程序的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。

1. 事件监听API
   • 特点：以on开头，用来监听某些事件的触发
   • 举例：wx.onWindowResize(function callback)监听窗口尺寸的变化
2. 同步API
   • 特点1：以 Sync结尾的API都是同步API
   • 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
3. 异步API
   • 特点：需要通过 success、fail、complete接收调用的结果