微信小程序（基本结构）

起步

目录介绍

建议每个页面都以单独的文件夹存放在pages中

JSON配置文件介绍

小程序中共有4种JSON配置文件

1. 项目根目录中的app.json：包含小程序的所有页面路径、窗口外观、界面表现、底部tab等。
2. project.config.json：项目配置文件，记录小程序开发工具所做的个性化设置
3. sitemap.json：小程序内搜索设置，类似于网页的SEO
4. .json：每个页面文件夹中的.json文件用于对本页面窗口的外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项

页面简述

• 首页设置：app.json中pages字段第一条即为首页路径
• WXML和HTML区别：
  • 标签名不同：
    • div == view
    • span == text
    • img == image
    • a == navigator
  • 属性节点不同：
    • eg：
  • 提供了类似vue的模板语法
• WXSS和CSS的区别
  • 新增了rpx单位（自动换算）
  • 提供了全局样式和局部样式：全局样式app.wxss，局部样式.wxss
  • WXSS只支持部分CSS选择器：类、id、元素、并集、后代、伪类
• js文件
  • app.js：整个小程序入口文件，通过App()函数来启动整个小程序
  • 页面的.js文件：页面入口文件，通过调用Page()函数来创建并运行界面
  • 普通.js文件：用来封装公共的函数或属性供页面使用

小程序宿主环境

即微信为小程序提供的支持

1. 通信模型

   • 渲染层（wxml、wxss）和逻辑层（js）之间的通信

   • 逻辑层和第三方服务之间的通信

2. 运行机制

   • 小程序的启动过程
     1. 把小程序的代码包下载到本地
     2. 解析app.json全局配置文件
     3. 执行app.js小程序入口文件，调用App()创建小程序实例
     4. 渲染小程序首页
   • 页面渲染过程
     1. 加载解析页面的.json配置文件
     2. 加载页面的.wxml模板和.wxss样式
     3. 执行页面的.js文件，调用Page()创建页面实例

3. 组件

   1. 视图容器

   2. 基础内容

   3. 表单组件

   4. 导航组件

   5. 媒体组件

   6. map 地图组件

   7. canvas画布组件

   8. 开放能力

   9. 无障碍访问

4. API

   1. 事件监听API：以on开头，用来监听某些事件的触发
   2. 同步API：以Sync结尾的API，执行结果可以通过函数返回值直接获取，如果执行出错会排除异常
   3. 异步API：需通过success、fail、complete接收调用的结果