Angular 整合 Cordova 的姿势

思路

总的来说，就是需要：

1. 创建一个Angular项目，然后打包/编译到www目录
2. 使用Cordova生成对应平台的安装包

知道了这个大概，如果有必要，请来看我的入坑姿势：

1. 前置条件

安装必要的脚手架工具

npm i -g @angular/cli cordova

安装自己需要的工具

我的ios项目需要这个依赖，如有必要，也请你装上。

npm i -g ios-deploy

2. 创建一个Angular项目

方法有很多，比如用vs Code、命令行、WebStorm等，关键是
将生成的目录修改成www。

这里我通过修改package.json，来自定义一些运行项目，你也可以选择你喜欢的方式

"scripts": {
    "start": "ng serve --disable-host-check --open --port=4203 --host=0",
    "build": "ng build --prod --delete-output-path --output-path=www --base-href=./ --build-optimizer=true",
    "ios": "cordova emulate ios"
},

编写完毕，然后编译你的代码。

3. 制作一个config.xml

可以选择下面或者其他你喜欢的方式。

• 一个新的目录，然后使用cordova生成一个项目，从中选择config.xml进行复制
• 使用我下面的文件，然后新建、复制、粘贴三连操作

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

4. 添加平台支持

cordova platform add android
cordova platform add ios

参考资料

• Angular 手册：https://angular.cn/guide/setup-local