快应用开发教程（6）：APP开发实战-细节优化和总结

vivo官方技术团队

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

• 列表骨架屏加载
• 数据请求错误处理
• 增加获取定位的功能

列表骨架屏加载

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

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

template代码

1. <list-item class="skeleton" type="skeleton" if="!more">
2. <div class="skeleton-movie">
3. <div class="skeleton-poster bg-grey"></div>
4. <div class="skeleton-info">
5. <div class="skeleton-top">
6. <div class="column">
7. <div class="skeleton-title bg-grey"></div>
8. <div class="skeleton-year bg-grey"></div>
9. </div>
10. <div class="skeleton-rating bg-grey"></div>
11. </div>
12. <div class="skeleton-bottom">
13. <div class="skeleton-wrap bg-grey"></div>
14. <div class="skeleton-wrap bg-grey"></div>
15. <div class="skeleton-wrap bg-grey"></div>
16. </div>
17. </div>
18. </div>
19. </list-item>

复制代码

style代码

1. .skeleton-movie {
2. height: 300px;
3. width: 100%;
4. flex-direction: row;
5. justify-content: center;
6. padding: 20px;
7. }
8. ​
9. .bg-grey {
10. background-color: #dedede;
11. }
12. ​
13. .skeleton-poster {
14. width: 200px;
15. height: 260px;
16. flex-shrink: 0;
17. }
18. ​
19. .skeleton-info {
20. height: 260px;
21. width: 100%;
22. flex-direction: column;
23. }
24. ​
25. .skeleton-top {
26. height: 100px;
27. width: 100%;
28. }
29. ​
30. .skeleton-title {
31. height: 60px;
32. width: 100%;
33. margin-left: 20px;
34. }
35. ​
36. .skeleton-year {
37. height: 30px;
38. width: 200px;
39. margin-top: 10px;
40. margin-left: 20px;
41. }
42. ​
43. .skeleton-rating {
44. height: 100px;
45. width: 100px;
46. border-radius: 10px;
47. flex-shrink: 0;
48. margin-left: 20px;
49. }
50. ​
51. .skeleton-bottom {
52. height: 160px;
53. width: 100%;
54. flex-direction: column;
55. }
56. ​
57. .skeleton-wrap {
58. height: 60px;
59. width: 100%;
60. margin: 20px 20px 0 20px;
61. }

复制代码

现在加载数据之前会是这样的效果

数据请求错误处理

之前我们数据请求都默认成功的，实际上数据请求在复杂网络环境下是有可能出错的，如果我们没有对应的逻辑处理，会在出错后导致不可预计的问题，界面会没有反馈，交互体验不好，所以我们把请求部分的代码优化一下。这里以首页的请求为例。

1. import prompt from "@system.prompt";
2. export default {
3. getMovieList: function () {
4. const that = this; // 保存当前this
5. fetch.fetch({
6. url: 'https://api.douban.com/v2/movie/' + that.type + '?count=' + that.count + '&start=' + that.start,
7. success: function (response) {
8. let data = JSON.parse(response.data); // 解析请求回来的数据为对象
9. if (response.code === 200) { // 判断当前请求是否成功返回
10. that.movies = that.movies.concat(data.subjects); // 把请求到的数据赋值到定义的变量上去
11. that.start += that.count; // 每次请求成功后给start增加页码
12. } else {
13. prompt.showToast({
14. message: '请求出错！错误码：' + response.code
15. })
16. }
17. if (that.movies.length === data.total) {
18. that.more = true;
19. }
20. },
21. fail: function (err, code) {
22. prompt.showToast({
23. message: '请求出错！错误码：' + code
24. })
25. }
26. })
27. },
28. }

复制代码

增加获取定位的功能

我们的接口文档里提供了按照传入的城市查询数据的字段，不过我们没有传值，现在我们使用手机的定位接口和百度的位置转换服务把城市传入查询接口。由于快应用的地理位置接口返回的是经纬度，所以我们还需要将其转换成对应的地址 ，好在百度地图开发者平台提供了这个转化接口，注册一个账号，登录网站，进入控制台，创建一个应用，拿到应用的AK。准备工作完成，可以开始开发了。

创建src/common/script/get-city-name.js文件。

1. const geolocation = require('@system.geolocation');
2. const fetch = require('@system.fetch');
3. const prompt = require('@system.prompt');
4. ​
5. let location = null; // 保存请求回来的地址
6. const baiduAK = 'UGM0p4Qn4QTgiGUdYI6F1ZCQETacp43'; // 替换成你自己的百度地图AK
7. ​
8. function getCityName() {
9. return new Promise(((resolve, reject) => { // 返回一个promise对象
10. if (location) { // 判断是否已经缓存了地理位置，避免重复请求
11. resolve(location);
12. }
13. geolocation.getLocation({
14. success: function (res) {
15. let locationParam = res.latitude + ',' + res.longitude;
16. fetch.fetch({
17. url: 'https://api.map.baidu.com/geocoder/v2/?ak=' + baiduAK + '&location=' + locationParam + '1&output=json&pois=1',
18. method: 'GET',
19. success: function (res) {
20. if (res.code === 200) {
21. location = JSON.parse(res.data).result.addressComponent.city;
22. resolve(location);
23. } else {
24. prompt.showToast({
25. message: '请求出错！错误码：' + res.code
26. });
27. reject(res.code);
28. }
29. },
30. error: function (err) {
31. prompt.showToast({
32. message: '请求出错！错误信息：' + err
33. });
34. reject(err);
35. }
36. });
37. }
38. });
39. }));
40. ​
41. }
42. ​
43. export {
44. getCityName // 导出获取地理位置的方法
45. }
46. ​

复制代码

接下来在首页修改调用的代码

1. onInit: function () {
2. getCityName().then((city) => {
3. this.city = city; // 保存返回的地理位置
4. this.getMovieList(); // 请求电影列表数据
5. this.$page.setTitleBar({text: '首页-' + city}); // 设置页面标题
6. });
7. }

复制代码

总结

现在终于完成了整个快电影快应用的开发，虽然这个项目不是那么复杂，但是涉及到的东西基本涵盖了快应用开发的大部分，至于很多没有用到了组件和接口，只要按照对应的文档去对接，也不会是太大的难度了。我们熟悉了快应用的从零开发的流程和方法后，就可以进一步熟悉其他组件和接口了，最好是自行再把项目的代码敲一遍，在这个过程中应该会有不一样的体会。

---

文档github项目地址：https://github.com/vivoquickapp/quickapp-tutorial/tree/master

作者：dadong

时间：2018.11.26

大橙子

每个节点都要去写的骨架太麻烦了吧，希望能够有统一的解决方案

dcxj168

厉害了