# 小程序宿主环境

BossHi 小程序运行在 BossHi 客户端上(包括 PC 端和移动端)，客户端为小程序提供运行时所需的环境和各种能力，支撑起小程序应用。我们将这套环境称为宿主环境。通过宿主环境提供的各种能力，小程序可以实现很多 Web 网页无法完成的功能，获得更流畅的体验和交互。

# 逻辑层和视图层

小程序的运行环境分为 2 部分：逻辑层和视图层。其中逻辑层是加载小程序应用的 JS 脚本，负责处理业务逻辑的。而视图层负责渲染 HTML 模板和 CSS 样式，显示页面。

小程序的逻辑层和视图层是 2 个独立的线程来管理。逻辑层的线程启动 JSCore 引擎去执行 JS 脚本，处理业务逻辑。视图层的每个页面使用一个 Webview 进行渲染，多个页面则是多个 Webview。所以一个小程序应用只有一个 JSCore 线程，多个 Webview 线程。

小程序整体的运行环境和通信模型如下图所示

小程序的宿主环境就是图中的 Mobile 或者 PC 客户端，分别跟视图层和逻辑层进行通信和数据交互。视图层和逻辑层之间无法直接通信，只能通过客户端作为桥来通信。

# 程序与页面

在 BossHi 里打开小程序时，首先会将小程序的代码包下载到本地，然后解析 pages.json 里的 pages 字段，就可以知道该小程序的所有页面路径：

{
  "pages": [
    {
      "path": "pages/component/index"
    },
    {
      "path": "pages/API/index"
    },
    {
      "path": "pages/component/view/index"
    }
  ]
}

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

pages 里配置的第一个值，就是小程序应用的打开时看到的第一个页面, 作为当前工程的首页（启动页）。

每个页面路径在程序代码包里都可以找到对应的文件夹路径。例如 pages/index/index，在该路径下，存在着这个页面对应的 HTML、CSS 和 JS 文件。小程序启动之后，就根据这个路径找到对应页面的这些代码文件，然后交给逻辑层和视图层执行，于是我们就可以在客户端上看到该页面。

当小程序启动之后，会触发 App.vue 里定义的 onLaunch 方法

onLaunch: async function() {
    // 小程序启动之后执行
    console.log('App Launch')
},

1
2
3
4
5

下面我们具体看下小程序的页面结构和具体的构成，以 pages/index/index 为例，该文件目录下存在 index.vue。

// index.js 的内容
<template>
  <view>
    <text>{{ title }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
};
</script>

<style>
// css
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在 index.vue 文件就构造出这 index 页面实例，data 表示的是该页面需要用到的渲染数据。当生成页面时，小程序引擎会把 data 数据和 index.html 结合，再渲染出来显示给用户。

# 组件

组件是小程序提供给开发者来创建页面 UI，自定义 HTML 的。开发者可以以灵活的方式自由组合各种组件，去构建属于自己的页面 UI。

什么是组件：

在 Vue 中使用组件，是视图层的基本组成单元。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

就像 HTML 的标签一样，在小程序里，开发者在 template 里写上对应组件的标签，就能显示出来。例如：

// index.vue 内容
<template>
  <view class="intro">Welcome to Gadget</view>
</template>

1
2
3
4

该页面就显示一行文案： Welcome to Gadget。开发者可以通过 style 和 class 来控制该组件的样式，来指定宽、高、颜色等

更多组件相关的内容可以参考小程序的组件。

TIP

小程序的 UI 可分为以下三大类，实际开发时可结合三者合理使用：

小程序内置组件，内置资源，直接使用，贴近底层原生能力
客户端交互组件，弹窗、Toast等，客户端能力，通过小程序 API 展示
小程序扩展组件，额外依赖，基于内置组件，不主动占据项目体积

# API

为了让开发者很方便的使用 BossHi 提供的能力，例如获取用户信息，获取设备当前的地理位置，播放视频等等。小程序提供了很多 API 供开发者使用，这些 API 分为两种：同步、异步。其中异步 API 通过回调返回结果，同步 API 直接返回结果。

例如

获取设备当前的地理位置：

bz.getLocation({
  success(res) {
    console.log(`经度 ${res.longitude}，纬度 ${res.latitude}`);
  },

  fail(res) {
    console.log(`getLocation 调用失败`);
  },
});

1
2
3
4
5
6
7
8
9

很多 API 都是基于异步回调的，所以需要开发者处理好异步逻辑，传入正确的回调函数去处理业务

更多 API 相关的内容可以参考小程序的 API

小程序代码构成 →