WebStorm 之 Cordova 環境搭建

時間 2019-12-10

標籤 webstorm cordova 環境搭建欄目 Storm 简体版

原文原文鏈接

1、環境搭建javascript

　　Cordova 環境配置以前，應先下載安裝 Node.js ，中文官網：http://nodejs.cn/。css

　　以管理員身份運行 cmd 命令行工具：html

　　一、查看 Node.js 是否已安裝成功，命令爲：node -vjava

　　二、查看 npm 是否已安裝，命令爲：npm -vnode

　　三、Cordova 安裝，命令爲：npm install -g cordova，C:\Users\Administrator\AppData\Roaming\npm會生成對應的.cmd文件android

　　若是慢，能夠修改鏡像，再進行安裝。ios

　　npm config set registry http://registry.cnpmjs.org npm info underscoregit

　　npm install -g cordovagithub

　　安裝成功後作版本查看測試，命令爲：cordova -versionexpress

　　四、ionic 安裝，命令爲：npm install -g ionic，C:\Users\Administrator\AppData\Roaming\npm會生成對應的.cmd文件

　　安裝成功後作版本查看測試，命令爲：ionic -version

　　ios-sim 安裝，命令爲：npm install -g ios-sim，C:\Users\Administrator\AppData\Roaming\npm會生成對應的.cmd文件

　　安裝成功後作版本查看測試，命令爲：ios-sim -version

　　五、查看 Java 版本信息，命令爲：java -version

　　配置 JAVA_HOME 系統環境變量（已配置直接跳過）：JAVA_HOME=C:\Program Files\Java\jdk1.8.0_101

　　六、查看 ant 版本信息，定位至 Apache Ant 解壓目錄，ant -version（可跳過）

　　官網地址：http://ant.apache.org/

　　七、配置 Andorid 環境變量

　　path環境變量添加：D:\Program Files\Android\Android\Sdk\android-sdk\platform-tools;D:\Program Files\Android\Android\Sdk\android-sdk\tools;

　　添加系統變量：ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk

　　注：明確知道 adb.exe 的位置（android 2.3 及以上是在 android-sdk\platform-tools 目錄下面的，而 2.2 及如下是放在 android-sdk\tools 目錄下面），可只在 path 變量中添加其目錄。

　　八、查看 adb 版本信息，命令爲：adb version

　　九、重啓電腦....

2、環境測試

　　一、建立工程

　　index.html內容代碼以下：

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>