ionic 3 vscode 在win10下 开发环境搭建

 最近学习ionic3开发,按照官网介绍的方法做开发环境搭建,发现并不正确(还是2.0的),网上找到的一些信息也不对,因为Ionic版本从1.0到3.0变化很大。 现把安装过程记录下来,给各位探索的朋友们节省时间。具体的安装环节不做详细介绍,不会的同学可以百度搜索(找不到答案时可以尝试bing,尤其是看到英文错误信息时,在baidu里几乎无解,bing国际里信息更多)

ionic其实是调用了cordova,它的命令行就是封装了cordova的命令行,所以格式一样,只是前面加了一个ionic

下面的操作需要用管理员方式进入命令行(右键以管理员身份运行)

1.安装 node.js 

     安装好node.js后,也可以安装淘宝镜像版的node.js,这样更快

      npm install -g cnpm --registry=https://registry.npm.taobao.org 

  设置全局的npm从国内源加载

       npm config set registry https://registry.npm.taobao.org

    这样后面所有的命令行操作要使用cnpm而不是npm

2.安装cordova ionic 

    运行  npm install -g cordova ionic

系统会自动安装cordova ionic命令行工具

3. 创建项目

ionic cordova start myApp tabs 此处tabs是项目模板,表示创建出的项目是典型的带三个tab页面的

4. 浏览器运行

cd myApp

ionic cordova serve

5.在安卓运行

在命令行进入项目文件夹

a.创建安卓项目

ionic cordova platform add android 会生成安卓项目,可以用android studio打开,编译调试。

b. 编译、运行apk

ionic cordova build android 编译apk

ionic cordova run android 编译并运行apk

为了能build,还需要安装

(1).jdk 最新版

(2).android sdk(可选择国内镜像下载速度更快,不用下载全部,下载倒数第二新的,还有你自己手机安卓对应的sdk版本(有利于调试)即可)

需要设置必须的环境变量(百度搜)

(3). gradle,可以安装android studio(建议安装as,可能会需要做一些native开发,比如启动画面,用户无感知的热更新等),会自动安装gradle.

安装好后,就可以用android studio打开platform目录下的安卓项目,编译运行了。

但是此时运行ionic cordova build android 报错“不能连接到目标....econnreset 错误" 根据这个提示在网上搜索信息,找不到任何线索。

在提示的详细信息里有这样一句 Gradle error “Could not reserve enough space for object heap”  

在bing里搜索到了一个帖子,应该是jdk预设内存不够用。好像是默认需要2G的内存,调成512就好了。需要增加一个环境变量
_JAVA_OPTIONS=-Xmx512M

然后重开命令窗口,build时下载一堆文件,最后成功。

6. 用vscode开发调试

     vscode是个轻量级的ide,但是功能很强大,因为它可以通过丰富的插件资源扩充自己的功能,用react native的可以找到相关插件,cordova的可以找到相关的调试插件。我们需要安装cordova tools插件,就可以在安卓,ios真机调试cordova程序了。

还可以搜索一些关于ionic代码行提示的插件

    另外vscode和visual studio不同的是

  a.它没有项目文件的概念,vs里有proj文件,这里没有。只需要打开一个文件夹即可。打开后,就成了一个工作区。在我们这里我们只要打开刚才命令行创建的cordova项目的文件夹即可。然后点查看-》调试菜单即可选择在设备上调试。

b.在vs里开发cordova,非常简单,只需要安装ionic2(还没有ionic3)的一个插件,新建项目时就可以直接创建ionic项目。但是正是因为集成度过高,内置的cordova和ionic版本不高,不能创建ionic3的项目。而在vscode里,不能创建项目,只能手动用命令行创建项目,但是这样的好处就是灵活,开发者可以更明白工作原理。实际上vscode只是一个集成工具,在安装了cordova插件后,它会调用我们之前安装好的cordova命令程序实现build,debug等操作。



mac下调试问题

1.需要安装 ios-deploy

sudo npm install -g ios-deploy --unsafe-perm=true

如果不加--unsafe-perm=true会报错

cordova run ios报错:xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

运行 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

我的电脑是在users\xiangwei\downloads\xcode.app\contents\developer

3.ionic cordova build ios   platforms/ios/build/device/libCordova.a: Permission denied

删除掉这个文件就可以继续了

4.cordova build ios 报错

UnhandledPromiseRejectionWarning: Error code 65 for command: xcodebuild w......

=== BUILD TARGET yuChenApp OF PROJECT yuChenApp WITH CONFIGURATION Debug ===


Check dependencies
No profiles for 'io.yuchen.app' were found:  Xcode couldn't find a provisioning profile matching 'io.yuchen.app'.
Code signing is required for product type 'Application' in SDK 'iOS 10.0'


安装 brew后执行报错说brew危险,系统不支持了

执行此命令后 sudo chown -R $(whoami) /usr/local 即可使用


chrome可以远程调试ios设备上的webview中运行的js

要先启动调试代理 ios_webkit_debug_proxy -f chrome-devtools://vtools/bundled/inspector.html

执行后报错
not connect to lockdownd. Exiting.

解决办法:执行 sudo chmod -R 777 /var/db/lockdown/

如果还不行

brew uninstall ideviceinstaller
brew uninstall libimobiledevice
brew install --HEAD libimobiledevice
brew link --overwrite libimobiledevice
brew install ideviceinstaller
brew link --overwrite ideviceinstaller

** ARCHIVE FAILED **

http://satvasolutions.com/microsoft-visual-studio-tools-for-apache-cordova-build-failed-error-code-65-for-command-when-using-xcode-8-and-ios-10/

学习时参考了 

LEAUQEAAN 的

https://blog.csdn.net/qq_17759721/article/details/78650481 

安装介绍,他写的更详细一些,可以参考。




引入 cordova hot push plugin 之后,安卓编译不通过,提示 jackson-databind2.4.4找不到,并给了一个链接,但那个连接能正常打开,改成

start-chcp.gradle 里 

dependencies {
    compile 'com.fasterxml.jackson.core:jackson-core:2.4.3'
    compile 'com.fasterxml.jackson.core:jackson-databind:2.4.3'
    compile 'org.greenrobot:eventbus:3.0.0'
}

jackson-databind改成2.4.3之后编译成功了

热更新的文章

https://www.jianshu.com/p/55fd5e9f96ea

http://www.egtch.com/archives/605


引入 cordova hot push plugin 之后,安卓编译不通过,提示 jackson-databind2.4.4找不到,并给了一个链接,但那个连接能正常打开,改成

start-chcp.gradle 里 

dependencies {
    compile 'com.fasterxml.jackson.core:jackson-core:2.4.4'
    compile 'com.fasterxml.jackson.core:jackson-databind:2.4.0'
    compile 'org.greenrobot:eventbus:3.0.0'
}
jackson-databind改成2.4.0之后编译成功了

你可能感兴趣的:(ionic 3 vscode 在win10下 开发环境搭建)