JSBridge 的原理及使用

JSBridge的原理及使用

主要是给 JavaScript 提供调用 Native 功能的接口,让混合开发中的前端部分可以方便地使用 Native 的功能(例如:地址位置、摄像头)。

而且 JSBridge 的功能不止调用 Native 功能这么简单宽泛。实际上,JSBridge 就像其名称中的Bridge的意义一样,是 Native 和非 Native 之间的桥梁,它的核心是构建 Native 和非 Native 间消息通信的通道,而且这个通信的通道是双向的。

双向通信的通道:
JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。
Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

H5与Native交互如下图:
H5与Native交互

阅读更多

Cordova 从入门到实践开发

简单认知 Cordova

什么是 Cordova

  • 一个移动应用开发框架
  • 本质是 HTML、CSS、JavaScript 外面包装个原生的壳
  • 出自于 Adobe 11 年收购的 PhoneGap,是驱动 PhoneGap 的核心引擎
  • 是 Apache 的顶级开源项目

Cordova 提供了一系列设备相关的 API,通过这组 API,移动应用能够以 JavaScript 访问原生的设备功能,如摄像头、麦克风。

阅读更多

2019 安卓混合开发视频精讲

原生语言

苹果手机:iOS 系统,由 Swift 和 C++ / Objective-C 语言编写,后缀名为 ipa (iOS 开发的安装包的后缀名)
Swift 语言是一种开源的语言(半开半闭)

安卓手机:Android 系统,由 Java (Android)语言编写,后缀名为 apk 开源的。

wp手机: Windows Phone 系统,由 C# 语言编写,后缀名分为两类 (wp7 wp8的是 xap wp8.1以后用 8.1 的 SDK 开发的是 appx)一般说到混合开发不考虑这个版本

序号 系统 语言 后缀名
1 iOS OC/C++/Swift ipa
2 Android Java apk
3 wp C# appx
阅读更多

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

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