# 框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在 QQ 中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 QML 和 QSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

# 响应的数据绑定

框架的核心是一个响应的数据绑定系统。

整个小程序框架系统分为两部分：视图层（View）和逻辑层（App Service）

框架可以让数据与视图非常简单地保持同步。当数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：

<!-- This is our View -->
<view>Hello {{name}}!</view>
<button bindtap="changeName">Click me!</button>

1
2
3

// This is our App Service.
// This is our data.
const helloData = {
  name: 'QQ',
}

// Register a Page.
Page({
  data: helloData,
  changeName(e) {
    // sent data change to view
    this.setData({
      name: 'MINA',
    })
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面一打开的时候会显示 Hello QQ!；
当点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层找到并执行对应的事件处理函数；
回调函数触发后，逻辑层执行 setData 的操作，将 data 中的 name 从 QQ 变为 MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为 Hello MINA!。

# 页面管理

框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到框架中，其他的一切复杂的操作都交由框架处理。

# 基础组件

框架提供了一套基础的组件，这些组件自带 QQ 风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的QQ 小程序 。

# 丰富的 API

框架提供丰富的 QQ 原生 API，可以方便的调起 QQ 提供的能力，如获取用户信息，本地存储，支付功能等。

# PC 小程序开发

# 开发者工具支持

开发者工具暂不支持 PC 小程序调试，相关能力开发中，敬请期待。

# 常见问题

如何判断是 PC 平台？

const { platform } = qq.getSystemInfoSync()
const isPC = ['mac', 'windows'].includes(platform)

1
2

PC 小程序如何支持横屏？

app.json中将字段“resizable”配置为 true 可使小程序在 PC 上横屏窗口展示，体验可参考腾讯文档小程序。