快应用技术干货分享（第六篇）

经过前几篇教程的开发，我们的快应用基本达到上架使用的水平了，但是作为工程师，当然要更加精益求精，虽然数据和界面都已经完成，但是还有很多细节的地方有优化的空间。下面我们就把整个快应用中优化点列出来，然后一个一个优化它。

• 列表骨架屏加载

• 数据请求错误处理

• 增加获取定位的功能

---

列表骨架屏加载

骨架屏是一种常用的提升用户交互体验的手段，在弱网环境下，数据加载较慢，为了减少等待数据加载导致页面白屏导致的用户流失，我们预先在动态获取的内容处用写好填充的框架，让用户明确知道此处的数据加载，从而降低用户的心理等待时间。

在我们的电影快应用中，数据加载主要是集中在列表中，所以我们主要给列表组件src/common/component/movieList.ux添加骨架屏的优化。废话不多说，上代码。

template代码

<list-item class="skeleton" type="skeleton" if="!more">
    <div class="skeleton-movie">
        <div class="skeleton-poster bg-grey"></div>
        <div class="skeleton-info">
            <div class="skeleton-top">
                <div class="column">
                    <div class="skeleton-title bg-grey"></div>
                    <div class="skeleton-year bg-grey"></div>
                </div>
                <div class="skeleton-rating bg-grey"></div>
            </div>
            <div class="skeleton-bottom">
                <div class="skeleton-wrap bg-grey"></div>
                <div class="skeleton-wrap bg-grey"></div>
                <div class="skeleton-wrap bg-grey"></div>
            </div>
        </div>
    </div>
</list-item>

style代码

.skeleton-movie {
    height: 300px;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding: 20px