应用解析

上一个章节，我们分析了一个 YIS 应用的代码构成。本章我们将介绍这些代码是如何合力工作的。

应用启动

客户端在打开一个 YIS 应用之前，会将整个应用的资源包（QP 包）下载下来。

  1. 首先，在用户访问某个 YIS 应用的时候，客户端会进行一些应用相关的初始化工作。
  2. 然后，根据 app.json 中的配置，对页面进行一些初始化工作。
  3. 最后，按照用户访问的页面名称，加载页面对应的资源。通过一些底层机制，渲染出这个页面。

打开一个 YIS 应用的页面有多种方式，能够配置一些参数，详细的方法可以查看 如何打开 YIS 应用。

下面我们简单看看一个页面是怎么写的。

应用页面

YIS 应用中的页面代码统一放在 src/pages 目录中。每个子目录的名称即为页面名称。每个子目录中默认有 index.js、index.skel 和 main.css 三个文件，分别是页面的 js 文件、页面骨架屏和样式文件。

index.js 中的内容大致是这样的：

class PageName extends PageCore {
    constructor(){
        //...
    }

    didShow() {
        //...
    }

    willDestroy() {
        // ...
    }

    render() {
        // ...
    }
}

PageCore 是所有页面组件的基类。在渲染一个页面的时候，首先会根据 index.skel 生成骨架屏的 html 展示出来。然后根据 render 方法来渲染出这个页面的内容。你可以在页面的 didLoad 回调里处理你的初始化逻辑。在页面即将销毁的时候，会触发 willDestroy 回调，你可以在这个回调里进行一些销毁工作。

更多关于如何构造一个页面的详细文档请参考 页面构造。

页面骨架屏

为了提高首屏体验，在 YIS 应用中，我们提供了页面骨架屏功能。骨架屏幕指的是根据页面目录中的 index.skel 生成的初始页面，你可以根据你的页面结构渲染一个骨架屏。在有离线包的情况下，骨架屏的显示时间大概是 300+ms，所以推荐为你项目中的所有页面都提供骨架屏。

骨架屏示例

index.skel 中的骨架屏内容需要通过 class 为 yis-skeleton 的容器包裹。框架会自动给这个容器添加全屏的样式，并且在切换显示时进行一些动画操作。

<div class="yis-skeleton">
    <!-- 这里是你的骨架屏幕内容 -->
</div>

骨架屏默认会在页面第一次 render 的时候关闭，即页面的首次渲染时。但是，我们也提供了手动关闭骨架屏的功能，以提升用户体验。更多详细信息可以参照 骨架屏。

组件

YIS 提供了许多基础组件，方便用户像搭积木一样构建自己的应用。

由于 YIS 使用的是 JSX 语法，所以可以很方便的通过 JSX 来使用组件。比如，你需要在页面中添加一个按钮，只需添加以下 JSX 代码：

<Button />

你可以给这个按钮添加一些属性，比如，指定按钮上的文字内容或者给按钮添加额外的 class：

<Button label="提交" className="custom-btn"/>

你还可以给这个按钮绑定一些事件，比如，这个按钮支持绑定 onTouchTap 事件：

<Button label="提交" className="custom-btn" onTouchTap={(evt)=>{}}/>

更多的组件请参考 YIS 组件。

API

为了让开发者可以很方便的使用客户端提供的能力，例如获取用户信息、分享等等，YIS 提供了很多 API 。

要获取用户当前位置，只需要：

YIS.AppInfo.getCurrentPosition({
    enableHighAccuracy: true,
    timeout: 3000,
    maximumAge: 30000
}, (error, data) {
    console.log(data);
});

存储某一条数据，只需要：

YIS.Storage.setItem('test-item', 'some-value', true, (error, data) => {
    console.log(data);
});

需要注意的是：API 的回调都是异步，你需要处理好代码逻辑的异步问题。

更多的 API 请参考 YIS API。




通过这个章节你已经大概了解了 YIS 应用运行的一些基本概念，当你开发完一个 YIS 应用之后，你就需要发布你的应用。在下个章节，我们将介绍如何发布一个 YIS 应用。

配置文件
发布上线