代码构成

  • JSON配置，静态配置

    • 小程序配置 app.json

      • 当前小程序的全局配置。所有页面路径，界面表现，网络超时时间，底部tab等
      • pages字段：描述当前小程序所有页面路径
      • window字段：定义小程序所有页面的顶部背景颜色，文字颜色定义等
        1. {
        2. "pages":[
        3. "pages/index/index",
        4. "pages/logs/logs"
        5. ],
        6. "window":{
        7. "backgroundTextStyle":"light",
        8. "navigationBarBackgroundColor":"#fff",
        9. "navigationBarTitleText":"Weixin",
        10. "navigationBarTextStyle":"black"
        11. }
        12. }

    • 工具配置 project.config.json

      • 微信开发者工具的配置文件
    • 页面配置 page.json
      • 用来表示 pages/logs目录下的 logs.json 这类和小程序页面相关的配置
      • 如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
  • WXML模板
    • 类似 HTML 的角色
    • MVVM的开发模式（如React、Vue），提倡把渲染和逻辑分离
      • 简单来说，就是不再让 JS 直接操控 DOM。JS 只管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可

  • WXSS 样式

    • 具有 CSS 大部分的特性，也做了一些扩充和修改
    • 新增了尺寸单位
      • 在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不用的宽度和设备像素比，采用一些技巧来换算一些像素单位
      • WXSS 在底层支持新的尺寸单位 rpx，开发者可以免去换算的烦恼。只要交给小程序底层来换算即可
      • 由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差
    • 提供了全局的样式和局部样式
      • app.wxss作为全局样式，作用于小程序的所有页面
      • page.wxss，局部样式，仅对当前页面生效

        小程序宿主环境

        即微信客户端给小程序所提供的环境

  • 渲染层和逻辑层

    • WXML模板和WXSS样式工作在渲染层，JS 脚本工作在逻辑层
    • WebView线程管理渲染层，一个小程序存在多个界面，所以渲染层存在多个 WebView 线程
    • JsCore线程管理逻辑层，运行 JS 脚本
    • 开发说明 - 图1

  • 程序与界面

    • 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地
    • 紧接着通过 app.json 的 pages 字段就可以知道当前小程序的所有页面路径
      • 写在 pages 字段的第一个页面就是这个小程序的首页
    • 小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行
    • 整个小程序只有一个 App 实例，是全部页面共享的
    • 简单看看小程序的一个页面怎么写
      • pages/logs/logs
      • 微信客户端先根据 logs.json 配置生成一个界面
      • 紧接着装载页面的 WXML 结构和 WXSS 样式
      • 最后装载 logs.js
        1. Page({
        2. data: { // 参与页面渲染的数据，和 index.wxml一起渲染出最终的节后
        3. logs: []
        4. },
        5. onLoad: function () {
        6. // 页面渲染后 执行，在这个回调中处理逻辑
        7. }
        8. })

  • 组件

  • API

    • 多数 API 的回调都是异步，需要处理好代码逻辑的异步问题

      目录结构

  • 主题部分，三个文件，必须放在项目的根目录 | 文件 | 必须 | 作用 | | —- | —- | —- | | app.js | 是 | 小程序逻辑 | | app.json | 是 | 小程序公共配置 | | app.wxss | 否 | 小程序公共样式表 |

  • 一个页面，四个文件

    • 为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径和文件名 | 文件类型 | 必需 | 作用 | | —- | —- | —- | | js | 是 | 页面逻辑 | | wxml | 是 | 页面结构 | | json | 否 | 页面配置 | | wxss | 否 | 页面样式表 |

小程序配置

  • sitemap配置，sitemap.json

    • 配置小程序及其页面是否允许被微信索引

      小程序框架

  • 注册页面

    • Page()
    • 页面可以引用 behaviors，让多个页面有相同的数据字段和方法
    • 使用 Component 构造器构造复杂页面
  • 生命周期
    • 开发说明 - 图2
  • 页面路由
    • 所有页面的路由全部由框架进行管理
    • 框架以栈的形式维护了当前的所有页面，用 getCurrentPages() 函数获取当前页面栈
    • 路由方式
      • image.png
  • 模块化
    • 可以将一些公共的代码抽离成一个单独的 js 文件，作为一个模块
    • 模块只有通过 module.exports 或 exports 才能对外暴露接口
    • 使用 require 将模块引入