APICloud 笔记

新手必看篇

视频讲义
视频学习目标:

  • 总体上了解一下 APICloud 平台,重点介绍相关的学习资源,入门资料,常见的 FAQ 等。
  • 明确我们这七天要开发一个什么样的 APP,明确功能需求,跟上每天的课程节奏,可以课前预习
  • 梳理出对于一款 APP,在开发之前(Coding 之前),一些通用而又重要的准备工作,适合于所有 APP 开发,而非单指 APICloud。
  • APICloud 平台介绍

    • 查看 APICloud 平台能力

      APICloud 平台能否满足自己的 APP 开发需求?

      查看 APICloud API 文档了解 APICloud 文档组织结构,学会通过文档搜索,找到需要的功能。
      APICloud 平台功能体系:
      APICloud 平台功能体系

      文档搜索,找到需要的功能
      例如:视频播放功能
      搜索视频播放

      APICloud 提供了很多解决方案;
      视频播放模块

      点开其中一个,可以看到提供的功能、代码示例等等。
      视频播放模块

      • APICloud 应用的开发模式和使用的技术语言
        前端开发者开发模式:HTML/CSS/JavaScript + APICloud 扩展 API
        原生开发者
        代码自动生成

        APICloud 扩展 API 调用方式:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        核心模块在 window.api 对象下,不需要单独引用,可以直接调用
        api.methodName(param, callback);

        扩展模块需要 require 引入,遵守 CommonJS 规范
        var module = api.require('moduleName');
        module.methodName(param, callback);

        param: {} //参数,是一个JSON对象
        callback: function(ret, err){} //回调函数,是一个Function对象,方法调用的结果通过此函数返回

        例如:

        打开新窗口:api.openWin();
        打开系统通讯录:api.openContacts();
        录音:api.startRecord();
        缓存网络图片:api.imageCache();
        加载 fs 模块:var fs = api.require(‘fs’);
        新建一个文件:fs.createFile();
        加载二维码/条形码扫描模块:var scanner = api.require(‘FNScanner’);
        打开二维码/条形码扫描: scanner.openScanner();

        为什么要扩展 API?

        扩展API

        APICloud 聚合 API可以看到 APICloud 扩展的功能

        APICloud 平台定位:
        平台定位

      • APICloud 技术、产品、生态、案例、商业模式的总体介绍

        推荐视频入门概念篇 1-3 讲

      • APICloud 开发者相关的服务支撑体系

        如何解决开发者的问题?能为开发者提供哪些机会?是否有围绕开发者的生态模式?
        是否有一个完善的开发者相关支持服务体系来方便技术学习和社区交流?
        是否有一个完善的生态体系,来支持支撑 APICloud APP 开发,来满足各种不同的行业需求,来支撑实现需求复杂,功能强大的应用

      • 新手应该如何开始入门 APICloud 应用开发

        新手开发指南
        APICloud 新手教程集合贴
        视频教程
        线上培训

  • APICloud 平台使用流程

    • APICloud 云控制台使用

      开发控制台

      APICloud 应用开发的基本流程

      • 创建应用
      • 配置图标启动页
      • 设置证书
      • 同步代码
      • 添加模块
      • 云编译

      推荐视频入门概念篇 第 5 讲

    • 选择一款主流 H5 编码工具并安装相应的 APICloud 插件

      APPLoader 加载 Widget 的路径:
      android: sdcard/UZMap/wgt/
      ios: Document/uzfs/wgt/

      推荐视频:APICloud 视频之初级代码篇第 9-11 讲自定义 loader 使用
      推荐文档:自定义 loader 说明

    • APICloud 应用开发的基础操作流程
      APICloud 应用开发的基础操作流程

      在 APICloud 平台上有 4 种查看 APP 运行效果的手段:

      官方 AppLoader
      自定义 AppLoader
      云编译测试包
      云编译正式包

  • 应用需求分析

    • 梳理需求说明文档

      输出需求说明文档

    • 进行 UE/UI 设计

      输出 UE/UI 设计: 产品原型文件、原始 UI 设计图、UI 切图

  • 总体架构设计

  • APICloud 应用设计思想

UI 架构设计

  • APICloud 应用的 UI 组成结构

UI 组成结构

功能点分解

开放服务选择

数据接口定义


相关资料
APICloud 7 天培训课
APICloud 七天在线培训课教程
模块 store 常见模块必备使用指南
数据云服务
APICloud 优秀案例直播系列活动汇总
APICloud 社区精品源码集合贴
APICloud 视频
30天 App开发从0到1

2018 前端学习路线

基础

基础的 HTML + CSS
基础的 JavaScript
框架:Bootstrap
框架:Vue

进阶

HTML5 + CSS3
ES6
基于 Vue 的组件化 SPA 开发。

延伸

了解更多资源: iconfont、bootswatch、themeforest
小程序:原生、mpvue
APP:APICloud
Node:AdonisJs
后端云:知晓云


以上是我对下列视频及文章的归纳和总结。
2018前端开发学习路线建议

HTML5 与 CSS3 基础教程(第8版)

前言

W3C 与 WHATWG
如果你想仔细查看这些规范(推荐你这样做),可访问下面列出的这些规范最新版本的网址。

CSS 的规范
http:// www.w3.org/standards/techs/css#w3c_all。

HTML4 和 HTML5 的区别
http:// www.w3.org/TR/html5-diff

1
2
3
4
5
6
Doctype
HTML语法要求指定doctype,以确保浏览器以标准模式呈现页面。该文档类型没有其他用途。[DOCTYPE]
HTML语法的doctype声明<!DOCTYPE html>不区分大小写。HTML早期版本中的文档类型更长,因为HTML语言基于SGML,因此需要引用DTD。情况不再如此,仅需要doctype才能为使用HTML语法编写的文档启用标准模式。浏览器已经为此执行了操作 <!DOCTYPE html>。
为了支持无法生成首选的简短doctype的旧式标记生成器,<!DOCTYPE html SYSTEM "about:legacy-compat">HTML语法中允许使用doctype 。
HTML语法中也允许(但不鼓励使用)用于HTML 4.0,HTML 4.01,XHTML 1.0以及XHTML 1.1的严格doctype。
在XML语法中,可以使用任何doctype声明,也可以将其完全省略。具有XML媒体类型的文档始终以标准模式处理。

CSS3 变换、动画和过渡效果。要了解更多 信息,参见 www.htmlcssvqs.com/resources/。
CSS3 中新的布局模型,如 FlexBox、Grid 等。这些技术致力于改变我们对页面进行 布局的方法(前提是规范进一步发展, 浏览器的支持程度更高一些)。参见 Zoe Mickley Gillenwater 的演示文档(www. slideshare.net/zomigi/css3-layout)和 Peter Gasston 的文章(www.netmagazine.com/ features/pros-guide-css-layouts)。

1
2
3
4
5
6
7
8
9
10
11
<header class="masthead" role="banner">
...
<nav role="navigation">
<ul class="nav-main">
<li><a href="/" class="current- ➝ page">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact ➝ </a></li>
</ul>
</nav>
...
</header>

Bootstrap 上

1
2
3
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>

html 里面的 role 本质上是增强语义性,当现有的 HTML 标签不能充分表达语义性的时候,就可以借助 role 来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。
role 的作用是描述一个非标准的 tag 的实际作用。比如用 div 做 button,那么设置 div 的 role=“button”,辅助工具就可以认出这实际上是个 button。
(这段解释来自于https://blog.csdn.net/mxk4869/article/details/88944927)

本书主页:www.htmlcssvqs.com/
16种基本颜色

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.