现在位置: 首页 / 前端开发技术 / android / 正文

AndroidJs手机开发-教程

开始

要创建第一个项目，首先创建一个目录

$ mkdir myfirstapp
$ cd myfirstapp
$ npm init

将生成以下内容

 myfirstapp
    |__ package.json

创建名为 views 的目录，并在其中创建 index.html。

$ mkdir views
$ echo "Hello" > views/index.html

现在您将得到以下信息

 myfirstapp
    |__views
    |     |__index.html
    |
    |__ package.json
  • views 是存储应用程序所有视图的目录
  • index.html是第一个视图，最初由应用程序渲染（必须在视图文件夹内创建index.html）
  • 在所有视图中添加 androidjs.js 文件，以访问 Android JS 的 API

在父目录中创建 main.js 文件

$ echo "const androidjs = require('androidjs').back;" > main.js

现在会得到这样的结果

 myfirstapp
    |__views
    |     |__index.html
    |__ main.js
    |__ package.json
  • main.js 是 Android 应用程序的主进程，它将为 Node Js 提供运行环境

APP配置

注意：所有这些配置都是必须的

更改应用程序名称

要更改应用程序的名称，必须在应用程序的 package.json 文件中定义应用程序名称属性

{
  "name": "myfirstapp",
  "app-name" : "My First App",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

更改应用程序的软件包名称

要更改应用程序的软件包名称，必须在应用程序的 package.json 文件中定义 package-name 属性

{
  "name": "myfirstapp",
  "app-name" : "My First App",
  "package-name": "myapp",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

更改应用程序图标

要更改应用程序的图标，必须在应用程序的 package.json 文件中定义图标属性

{
  "name": "myfirstapp",
  "app-name" : "My First App",
  "package-name": "myapp",
  "icon":"./assets/icon/icon.png",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

更改应用程序版本

要更改应用程序的版本，必须在应用程序的 package.json 文件中定义版本属性

{
  "name": "myfirstapp",
  "app-name" : "My First App",
  "package-name": "myapp",
  "icon":"./assets/icon/icon.png",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

为 Android 应用添加权限

要添加 Android 权限，您必须在应用程序的 package.json 文件中定义一个权限属性数组

{
  "name": "myfirstapp",
  "app-name" : "My First App",
  "package-name": "myapp",
  "permission": ["android.permission.INTERNET", "android.permission.SEND_SMS"],
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

您可以在安卓官方文档中找到权限信息

添加输出目录

为了添加输出目录，您必须在应用程序的 package.json 文件中定义 dist-path 属性

{
  "name": "myfirstapp",
  "app-name" : "My First App",
  "package-name": "myapp",
  "permission": ["android.permission.INTERNET", "android.permission.SEND_SMS"],
  "dist-path": "./dist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

定义项目类型

为了定义项目，您必须在应用程序的 package.json 文件中定义项目类型属性

  • webview
    如果您正在构建基于 webview 的应用程序或基于 "HTML/CSS
  • react-native
    如果您要构建基于 react native 的应用程序

进程间通信(IPC)

在 Android JS 中，有两个进程：后进程（Back Process）和前进程（Front Process）。

  • main.js 是应用程序的后进程，提供 Node JS 运行环境。
  • 应用程序的视图称为前置进程，由 Android Webview（即 HTML 文件）或 React Native 视图（即 JS 文件）呈现。
    为了实现它们之间的异步通信，Android JS 提供了两个模块：Back 模块和 Front 模块。

在后端进程和前端进程之间发送和处理消息的示例：

// In back process (main.js)
var back = require('androidjs').back;
back.on('Hello', function(msg){
    back.send('print', 'Hello ${msg}');
});

基于 Webview 的应用程序或基于 HTML / CSS 的应用程序

// In front process (web pages)
<html>
    <head>
        // add androidjs.js to get the API's of `Android Js`.
        <script src = "./assets/ipc/androidjs.js" ></script>
    </head>
    <script>
        front.send('Hello', 'Hello Android jS');
        front.on('print', function(msg){
            console.log(msg);
        })
    </script>
</html>

基于 React Native 的应用程序

// In react native views (JS files)
import {front, app} from 'androidjs';
front.send('Hello', 'Hello Android JS');
front.on('print', function(msg){
    console.log(msg);
}.bind(this));

后端模块

在 main.js 文件中要求使用 Android JS，并获取 Back 模块的实例。

var back = require('androidjs').back;

方法

后端模块有以下方法来监听事件：
back.on(channel, listener)

  • channel String
  • listener Function
    监听channel，当有新消息到达时，监听器将被调用 listener(args...)。

back.send(channel[, arg1][, arg2][, …])

  • channel String
  • …args any[]

通过 channel 异步向前台进程发送消息，也可以发送任意参数。
前置进程会通过 front 模块监听 channel 来处理。

前端模块

在基于 Webview 或 HTML / CSS 的应用程序中添加 Android JS
在网页中添加 Android JS，获取 Front 模块实例。

<html>
    <head>
        // add androidjs.js to get the API's of `Android Js`.
        <script src = "./assets/ipc/androidjs.js" ></script>
    </head>
</html>

在基于 React Native 的应用程序中添加 Android JS
在 JS 文件中添加 Android JS，以获取 Front 模块实例。

import {front, app} from 'androidjs';

方法

前置模块有以下方法来监听事件：
front.on(channel, listener)

  • channel String
  • listener Function

监听通道，当有新消息到达时，监听器将被调用 listener(args...)。

front.send(channel[, arg1][, arg2][, …])

  • channel String
  • …args any[]

通过通道向后进程异步发送信息，也可以发送任意参数。
后进程会通过监听 back 模块的通道来处理。