the FED init for amos team
npm install amos-initjavascript
npm install amos-init -g
`
初始化项目(amos-init 初始化 React 项目)
执行如下命令:
`javascript
amos-init -i [projectName]
`
系统会在当前目录下新建如下结构的文件目录(dist为编译或者发布后打包目录):
demo目录提供了一个简易react项目,可直接运行 npm start进行启动。
`
.
├── build
├── demo // 默认提供一个可直接运行的示例
├── dist
│ ├── app
│ ├── static
├ └...
└── src
├── assets // 静态资源入口
├── consts // 常量
├── entry // 项目程序入口
│ ├── entyr1
│ └── entyr2
├── model // 数据驱动,redux和action
│ ├── actions
│ ├── reducers
│ └── [other] // 可选,手动建立
│── routes // 路由入口
│── store // 系统store
│── styles // 系统核心样式
│── utils // 工具类
└── view // 页面元素,该目录下存放所有的系统react组件
├── module1
│ └── submodule
├── module2
├── module3
└── ...
├── .editconfig
├── .eslintignore
├── .eslint
├── .jsbeautifyrc
├── .stylelintrc.json
└...
`
> 注意:工程父级目录文件夹名称不要包含字符串 node_modules ,否则则无法使用babel进行转译!
构建[advance]
可以通过amos-init -b 进行构建项目,amos-init会扫描目录下的所有 *.entry.js 文件,自动制作编译配置文件(.amos-init/entry.js),
`bash
amos-init -b
`
如果想编译指定的项目 可以使用 amos-init -b Name 这样amos-init只会编译 Name文件夹下的 *.entry.js 以及 Name.entry.js
如下配置会编译 test和abc
`bash
amos-init -b test,abc
`
执行 amos-init -b online 会进行上线的前的编译(压缩、合并、hash)等,并将产出的文件放置到released目录中
`bash
amos-init -b online
`
创建[advance]
amos-init -c [component name]
可以通过amos-init -c [component name]进行创建组件,默认无法自动创建带路径的文档,此时如果需要创建带路径的组件,则需要手动创建doc目录。
示例:
`bash
amos-init -c MyComponent
`
此时会生成如下文件:
`
docsite
│──components
│ └──docs
│ └──MyComponent.adoc
src
└──MyComponent
├──index.js
└──index.scss
`
amos-init -p [page name or page path]
可以通过amos-init -p [page name or page path]进行创建组件
示例:
`bash
$ amos-init -p home
$ amos-init -p home/notice
$ amos-init -p home/alarm
$ amos-init -p home/shortcut
`
此时会生成如下文件:
`
src
└──home
├──index.js
├──index.scss
└──notice
├──index.js
└──index.scss
└──alarm
├──index.js
└──index.scss
└──shortcut
├──index.js
└──index.scss
...
`
[TODO] some advance api:
新增一个项目页面,同时会建立项目的index.html , pagename.js , pagename.scss 文件
`javascript
amos-init -a [pagename]
`
支持其他类库的编译(vue等)
`javascript
amos-init -ls
`
[Scripts]
系统初始化之后,会默认创建多种 scripts 脚本,用于快速使用 npm 脚本。
其中 startnNdemon 会自动监听 webpack.config.js 文件,用于频繁更改 webpack 配置时使用,此时需要手动安装 nodemon(已安装可忽略该步).
`bash
全局
$ npm install -g nodemon
本地
$ npm install --save-dev nodemon
`
初始化 RN 项目
安装&执行命令
`bash
$ react-native init [ProjectName]
$ cd [ProjectName]
$ amos-init-rn
`
输出
生成目录结构如下:
`js
.
├── __tests__
├── android // 安卓 Native 目录
├── ios // IOS Native 目录
└── src // RN代码目录
├── assets // 静态资源入口
├── consts // 常量
├── model // 数据驱动,redux和action
│ ├── actions
│ ├── reducers
│ └── [other] // 可选,手动建立
│── store // 系统store
│── stylesheet // 抽离RN系统样式
│── utils // 工具类
└── view // 页面元素,该目录下存放所有的系统RN组件
├── module1
│ └── submodule
├── module2
├── module3
└── ...
├── .editconfig
├── .eslintignore
├── .eslint
├── .jsbeautifyrc
├── index.android.js // android入口
├── index.ios.js // ios入口
└...
`
启动
* android
`bash
$ npm run android
`
* ios
`bash
$ npm run ios
`
* 启动package server(上述命令没有自动启动package server时,则手动启动)
`bash
$ npm start
`
> 注意: 需要启动模拟器,或者已经连接真机。
打包bundle
* android
`bash
$ npm run pub-android
`
* ios
`bash
$ npm run pub-ios
`
打包apk
$3
1. 生成一个签名密钥
你可以用keytool命令生成一个私有密钥。在Windows上keytool命令放在JDK的bin目录中(比如C:\Program Files\Java\jdkx.x.x_x\bin),你可能需要在命令行中先进入那个目录才能执行此命令。
`bash
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
`
这条命令会要求你输入密钥库(keystore)和对应密钥的密码,然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件。
在运行上面这条语句之后,密钥库里应该已经生成了一个单独的密钥,有效期为10000天。--alias参数后面的别名是你将来为应用签名时所需要用到的,所以记得记录这个别名。
> 注意:请记得妥善地保管好你的密钥库文件,不要上传到版本库或者其它的地方。
2. 设置gradle变量
* 把my-release-key.keystore文件放到你工程中的android/app文件夹下。
编辑~/.gradle/gradle.properties(没有这个文件你就创建一个),添加如下的代码(注意把其中的*替换为相应密码)
注意:~表示用户目录,比如windows上可能是C:\Users\用户名,而mac上可能是/Users/用户名。
`properties
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*
MYAPP_RELEASE_KEY_PASSWORD=*
`
上面的这些会作为全局的gradle变量,我们在后面的步骤中可以用来给应用签名。
> 关于密钥库的注意事项:
一旦你在Play Store发布了你的应用,如果想修改签名,就必须用一个不同的包名来重新发布你的应用(这样也会丢失所有的下载数和评分)。所以请务必备份好你的密钥库和密码。
提示:如果你不想以明文方式保存密码,同时你使用的是macOS系统,那么你也可以把密码保存到钥匙串(Keychain)中。这样一来你就可以省略掉上面配置中的后两行(即MYAPP_RELEASE_STORE_PASSWORD和MYAPP_RELEASE_KEY_PASSWORD)。
3. 添加签名到项目的gradle配置文件
`gradle
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
`
###打包apk
测试应用的发行版本
`bash
$ npm run install-apk
`
生成发行APK包
`bash
$ npm run prod-apk
`
> 注: 生成的APK文件位于android/app/build/outputs/apk/app-release.apk,它已经可以用来发布了。同时,以上命令建议直接在vscode终端执行。
内网用户
内网用户还可采用 amos-tpl 进行业务代码生成。
全局安装:
`bash
$ npm install -g amos-tpl
`
本地安装:
`bash
$ npm install --save-dev amos-tpl
`
其中 web 项目采用 amos-tpl -w 生成 web 基础工程
Mobile 项目采用 amos-tpl -m 生成 mobile 基础工程
由于模板工程依赖了其他模块,请确保amos-rn-core-ui、ray-validate、react-native-tab-navigator、react-native-router-flux已经成功能安装。
命令如下:
`bash
如果未执行 amos-init-rn,请优先执行amos-init-rn,然后再执行如下命令
$ npm install --save amos-rn-core-ui ray-validate react-native-tab-navigator@0.3.4 react-native-router-flux@3.34.0
``