markdown 建立离子3
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 建立离子3相关的知识，希望对你有一定的参考价值。
# Ionic 3
## Dev Env
### NPM
Install all dependencies
`npm i`
Test it
`ionic serve`
### OneSignal
Install OneSignal Dependencies
```
sudo gem install cocoapods
pod repo update
pod setup
```
Add to cordova project
`ionic cordova plugin add onesignal-cordova-plugin --save`
Test it
`ionic cordova build ios`
https://documentation.onesignal.com/docs/ionic-sdk-setup
> Looks like your specs repo was edited at some point, and now git can't update it.
>
> I'd recommend deleting and re-creating your Specs repo: `pod repo remove master` and running `pod setup` - then ideally also following this tweet's advice
> Ref
List gems
`gem list --local | grep cocoapods`
[Cocoapods](https://superuser.com/questions/686317/how-to-fully-uninstall-the-cocoapods-from-the-mac-machine?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
## Build iOS
### Install Icon Plugin
https://github.com/AlexDisler/cordova-icon
https://github.com/AlexDisler/cordova-splash
Install Imagemagik for the plugin to work
`brew install imagemagick`
Install the plugins
Cordova Icon
`sudo npm install cordova-icon -g`
Cordova Splash
`sudo npm install cordova-splash -g`
### Create your Images
To create your images you can download them from [placeholder.com](http://placeholder.com)
Or get from the links bellow
Icon
https://via.placeholder.com/1240x1240
Splash
https://via.placeholder.com/2732x2732
Move your Icon (1240x1240) and your splash screen (2732x2732)to the root
### Config your project
Remove the icon lines from `config.xml` file
Android
```
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
```
iOS
```
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
<icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
<icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
```
### Create a script to run everytime it compiles
Create the File
`mkdir hooks/`
`mkdir hooks/after_prepare`
Navigate to the directory created
`cd hooks/after_prepare/`
Create the script file
`touch cordova-icon.sh`
Open the file `hooks/after_prepare/cordova-icon.sh` on your editor and paste the following code
`atom .`
```
#!/bin/bash
cordova-icon
cordova-splash
```
Go back to your `root` and
`cd ../..`
Give it's necessary permissions for it to run
`chmod +x hooks/after_prepare/cordova-icon.sh`
Test it by running
`ionic cordova build`
### Generate with ionic
Put your files at
> resources
Then run the snippet below to overwrite some images with the cordova default CLI
`ionic cordova resources --force`
## Ionic default Icon generator
Use this after to adjust some splash screen sizes
`ionic cordova resources `
## Sign your app
Create a key file
https://calvium.com/how-to-make-a-p12-file
Create a Provision Profile
https://calvium.com/how-to-make-a-mobileprovision-file/
# ios config.xml file
```
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference default="This app needs camera access" name="CAMERA_USAGE_DESCRIPTION" />
<config-file parent="NSCameraUsageDescription" target="*-Info.plist">
<string>need camera access to take pictures</string>
</config-file>
<preference default="This app needs microphone access" name="MICROPHONE_USAGE_DESCRIPTION" />
<config-file parent="NSMicrophoneUsageDescription" target="*-Info.plist">
<string>need microphone access to record sounds</string>
</config-file>
<preference default="This app needs write-access to photo library" name="PHOTOLIBRARY_ADD_USAGE_DESCRIPTION" />
<config-file parent="NSPhotoLibraryAddUsageDescription" target="*-Info.plist">
<string>need to photo library access to get pictures from there</string>
</config-file>
<preference default="This app needs read/write-access photo library access" name="PHOTOLIBRARY_USAGE_DESCRIPTION" />
<config-file parent="NSPhotoLibraryUsageDescription" target="*-Info.plist">
<string>need camera access to take pictures</string>
</config-file>
<edit-config file="*-Info.plist" mode="merge" target="NSContactsUsageDescription">
<string>need contacts access to search friends</string>
</edit-config>
<config-file parent="ITSAppUsesNonExemptEncryption" target="*-Info.plist">
<false />
</config-file>
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
<icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
<icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
```
以上是关于markdown 建立离子3的主要内容，如果未能解决你的问题，请参考以下文章
使用`--prod`建立离子滚动头包问题（请添加@NgModule注释。）