父控件
- 聲明使用flexbox布局
display: -webkit-flex;
display: flex;
- 方向、換行
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: row wrap;
- 水平方向對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;
- 豎直方向對齊方式
align-items: flex-start | flex-end | center | baseline | stretch;
- 豎直方向多余空間調整（換行情況下）
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
子控件
- 豎直方向對齊方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
ionic 最佳實踐
- css 度量計算
calc函數
可用不同度量單位計算
calc(100%-20px)
- 開發
創建component/page/service
// 需要到app.module.ts中注冊
// 創建component
$ ionic g component QicklyComponent --componentsDir src/pages/home
// 創建page
$ ionic g page NewsDetailPage --pagesDir src/pages/news
// 創建service
$ ionic g provider HttpClient --providersDir src/providers
添加第三方js library
配置
index.html
copy.config.js
使用
// 聲明百度地圖的變量
declare let BMap:any;
declare let BMAP_STATUS_SUCCESS:any;
// 使用百度地圖 Api
let convertor = new BMap.Convertor();
網絡請求http-client.ts
能夠跨域的接口
- native
- h5
不能跨域的接口
- native
- 瀏覽器開發調試
Promise 與 Observable
- json <–> class
ClassUtil.ts
ClassUtil.jsonToClass(jsonObj, UserInfoModel)
- 遞歸解析
export class UserInfoModel
{
ID: number = 0;
isValid():boolean
{
return this.ID != 0;
}
update(newUserInfo:UserInfoModel)
{
}
}
export class LoginResponseGroupModel extends ISSHttpResponse
{
results:UserInfoModel;
status:string;
nestedPropertyMap()
{
return
{
results:UserInfoModel
}
}
}
平臺判斷
// android 平臺
if(this.platform.is("android")){}
// ios 平臺
if(this.platform.is("ios")){}
<button showWhen="android">我是Android平臺</button>
<button showWhen="ios">我是iOS平臺</button>
Android、iOS統一顯示iOS的樣式
// app.modules.ts
IonicModule.forRoot(MyApp, {
tabsHideOnSubPages:"true", // nav在push的時候隱藏
tabs backButtonText: '', // 不顯示back按鈕上的文字
iconMode: 'ios',
mode: 'ios'
})
.gitignore
- 不建議提交到服務器的文件
$ cat .gitignore
node_modules/
platforms/
plugins/
www/
性能調優
- js library 加載優化
// 異步加載js
<script async defer type="text/javascript" src="build/bmap.js"></script>
// 代碼異步追加 js library （在app.component.ts中異步加載）
appendDependencyJavascript()
{
let jsList = ["build/tripledes.js", "build/mode-ecb.js"];
for(let i = 0; i< jsList.length; i++)
{
let js = jsList[i];
let s = document.createElement("script");
s.type = "text/javascript";
s.src = js;
window.setTimeout(()=>{
document.body.appendChild(s);
}, 1000 * (i + 1));
}
}
編譯/壓縮
$ ionic build ios --prod --release
$ ionic build android --prod --release
H5 call Native
- plugin管理
// 添加plugin
$ ionic plugin add http://iss110301000305/r/cordova-plugin-travel.git#0.0.1
$ ionic plugin add cordova-plugin-http
$ ionic plugin add https://github.com/charleyw/cordova-plugin-alipay.git --variable PARTNER_ID=22222222 --variable SELLER_ACCOUNT=123@qq.com --variable PRIVATE_KEY=MIICdwIBADANBgkqhkiG9w0
// 刪除plugin
$ ionic plugin remove cordova-plugin-travel
// 拷貝plugin的js資源文件到platforms下、修改iOS/Android工程配置信息
$ cordova prepare
// 保存狀態
// 保存狀態（將插件信息、node_modules寫到package.json中）
$ ionic state save
// 保存狀態（將插件信息寫到config.xml中，刪除platform后重新添加platform時會去下載相應的plugins）
$ cordova plugin save
// 資源文件拷貝（www/*.js等）
$ cordova prepare
Native打包
platform管理
// 添加android平臺
$ ionic platform add android@6.1.0
// 添加iOS平臺
$ ionic platform add ios@4.3.0
// 刪除平臺
$ ionic platform remove android
plugin管理（如上）
缺少某個modules
$ npm install @modules名@latest --save-dev
Android、iOS項目配置
配置app名稱、splash page、app version、權限、橫豎屏等
config.xml
cordova-plugin-travel/plugin.xml
