WebStorm 之 Cordova 環境搭建


一、環境搭建

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

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

  1、查看 Node.js 是否已安裝成功,命令為:node -v

  2、查看 npm 是否已安裝,命令為:npm -v

  3、Cordova 安裝,命令為:npm install -g cordova,C:\Users\Administrator\AppData\Roaming\npm會生成對應的.cmd文件

  

  如果慢,可以修改鏡像,再進行安裝。

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

  npm install -g cordova

  

  安裝成功后做版本查看測試,命令為:cordova -version

  

  4、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

  

 

 

   5、查看 Java 版本信息,命令為:java -version

  

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

  6、查看 ant 版本信息,定位至 Apache Ant 解壓目錄,ant -version(可跳過)

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

  

  7、配置 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 變量中添加其目錄。

  8、查看 adb 版本信息,命令為:adb version

    

  9、重啟電腦....

 

二、環境測試

  1、創建工程

  

  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>
index

  2、編譯,運行

  

  注意:android模擬器首次運行需要下載安裝配置模擬器,故運行緩慢,再次編譯運行可直接啟動模擬器。

  3、安裝包所在目錄:platforms\android\build\outputs\apk

  4、運行模擬器測試,如下圖:

  

 

三、注意問題

  1、WebStorm編譯依賴於gradle,WebStorm編譯過程中自動下載,時間較長

  

  2、Android版本不對,WebStorm創建工程生成的Android版本高,需要在Android SDK Manager中下載

  

  3、Android SDK版本統一,platform/android/ 和 platform/android/CordovaLib 各自目錄中的 AndroidManifest.xml 和 project.properties 文件中統一一致。

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM