alita开发环境搭建

如果你不熟悉alita开发环境搭建, 请先阅读Alita入门教程：www.yuque.com/alita/cours…

全局安装 yarn global add alita 或者 npm install -g alita
初始化项目 alita g app

   $ cd 你的常用项目目录
   $ alita g app
   ? 是否使用typescript，默认否? Yes
   ? 是否是h5页面，默认pc? Yes
      create package.json
      create src/pages/index/index.tsx
      create src/pages/index/index.less
      create src/models/index.ts
      create mock/app.ts
      create src/services/api.ts
      create src/app.ts
      create .gitignore
      create config/config.ts
      create src/models/connect.d.ts
      create tsconfig.json
      create typings.d.ts
   ✔  success

安装依赖 yarn

安装环境（Mac）

1.安装XCode
2.安装xcode-select

$ xcode-select --install

弹出软件一直下一步就好。

3.安装ios-deploy

$ sudo yarn global add ios-deploy

全局安装Cordova

$ sudo yarn global add cordova

window系统需执行以下步骤

 1. 搭建 android 开发环境
 2. $ yarn global add cordova

接入cordova

在 config/config.js 配置中

export default {
  appType: 'cordova',
}

前期开发时，该项可配置为h5

添加cordova初始化命令

如果你全局安装了 alita ，可以使用 alita cordova --init，
添加iOS项目 alita cordova --ios,
添加anroid项目执行 alita cordova --android，

启动项目

默认使用的平台是ios，如果开发安卓，alita dev 和 alita build 的时候要设置环境变量CORDOVA=android

安装 cross-env 消除平台差异 yarn add cross-env
在 package.json/scripts 配置中

   "scripts": {
       "start": "cross-env CORDOVA=android alita dev",
       "build": "cross-env CORDOVA=android alita build"
     },

IOS 使用xcode打开项目 ./platforms/ios/Tutorial.xcworkspace 选择虚拟机或者设备，执行。
android 使用Android Studio 打开项 ./platforms/android 选择虚拟机或者设备，执行。

设备和电脑需要在同一个域下，比如电脑和手机设备连接同一个WiFi 或者手机连电脑的WiFi

热更新

在谷歌浏览器地址栏中输入 chrome://inspect/#devices 可以同步设备进行热更新开发

调用 cordova 插件

cordova plugin add xxx 安装cordova插件

因为是严格模式的，在使用时需要加window.xxx，比如window.QRScanner 或者 window.cordova.QRScanner

具体插件如何使用请参考 cordova 插件文档

调用原生功能

原生开发配合完成原生功能
可以在 src 中创建一个文件夹，如 until
js 调用原生方法, 可参考cordova官方插件调用，比如

    function scan(callBack) {
        cordova.exec(callBack, callBack, "NativePlugin", "scan", []);
    }

在组件中引入调用即可使用

    import { scan } from '@/until';

修改App图标、名称

在根目录下 config.xml 中

修改App名称

    <name>xxxx</name>

修改App图标：将 ./platforms/android/app/src/main/res 下的 mipmap-hdpi-xxx 中的图标按尺寸替换

打包注意事项

如果你使用了 config/config.ts 中的 proxy, 打包前要将 src/app.ts 中的 prefix 中的配置替换成你所代理的地址

安装测试

adroid项目打包成apk后，连接设备，执行 adb install -r apk路径

Alita+Cordova开发基础