{"id":719,"date":"2018-02-25T20:33:04","date_gmt":"2018-02-25T12:33:04","guid":{"rendered":"http:\/\/60.205.208.74\/2018\/02\/25\/ionic-%e5%ae%89%e8%a3%85\/"},"modified":"2018-02-25T20:33:04","modified_gmt":"2018-02-25T12:33:04","slug":"ionic-%e5%ae%89%e8%a3%85","status":"publish","type":"post","link":"https:\/\/www.puzi7.net\/?p=719","title":{"rendered":"ionic \u5b89\u88c5"},"content":{"rendered":"
\n
\n

ionic \u5b89\u88c5<\/h1>\n

\u672c\u7ad9\u5b9e\u4f8b\u91c7\u7528\u4e86ionic v1.3.2 \u7248\u672c\uff0c\u4f7f\u7528\u7684 CDN \u5e93\u5730\u5740\uff1a<\/p>\n

\n<link href=\"https:\/\/cdn.bootcss.com\/ionic\/1.3.2\/css\/ionic.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.bootcss.com\/ionic\/1.3.2\/js\/ionic.bundle.min.js\"><\/script>\n<\/pre>\n
ionic \u6700\u65b0\u7248\u672c\u4e0b\u8f7d\u5730\u5740\uff1ahttp:\/\/ionicframework.com\/docs\/overview\/#download<\/a>\u3002<\/p>\n
\u4e0b\u8f7d\u540e\u89e3\u538b\u538b\u7f29\u5305\uff0c\u5305\u542b\u4ee5\u4e0b\u76ee\u5f55\uff1a<\/p>\n
\ncss\/               =>     \u6837\u5f0f\u6587\u4ef6\nfonts\/             =>     \u5b57\u4f53\u6587\u4ef6\njs\/                =>     Javascript\u6587\u4ef6\nversion.json       =>     \u7248\u672c\u66f4\u65b0\u8bf4\u660e\n<\/pre>\n
\u4f60\u4e5f\u53ef\u4ee5\u5728 Github \u4e0a\u4e0b\u8f7d\u4ee5\u4e0b\u8d44\u6e90\u6587\u4ef6\uff1ahttps:\/\/github.com\/driftyco\/ionic<\/a>\uff08\u5728release \u76ee\u5f55\u4e2d\uff09\u3002<\/p>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u53ea\u9700\u8981\u5728\u9879\u76ee\u4e2d\u5f15\u5165\u4ee5\u4e0a\u76ee\u5f55\u4e2d\u7684 css\/ionic.min.css \u548c js\/ionic.bundle.min.js \u6587\u4ef6\u5373\u53ef\u521b\u5efa ionic \u5e94\u7528\u3002<\/p>\n
\n
\u5b9e\u4f8b<\/h2>\n
\n
<<\/span>ion-header-bar<\/span> <\/span>class<\/span>=<\/span>“<\/span>bar-positive<\/span>“<\/span>><\/span>
\n    <\/span><<\/span>h1<\/span> <\/span>class<\/span>=<\/span>“<\/span>title<\/span>“<\/span>><\/span>Hello World!<\/span><\/<\/span>h1<\/span>><\/span>
\n<\/span><\/<\/span>ion-header-bar<\/span>><\/span><\/p>\n
<\/span><<\/span>ion-content<\/span>><\/span>
\n    <\/span><<\/span>p<\/span>><\/span>\u6211\u7684\u7b2c\u4e00\u4e2a ionic \u5e94\u7528\u3002<\/span><\/<\/span>p<\/span>><\/span>
\n<\/span><\/<\/span>ion-content<\/span>><\/span><\/div>\n<\/div>\n
<\/p>\n
\u70b9\u51fb “\u5c1d\u8bd5\u4e00\u4e0b” \u6309\u94ae\u67e5\u770b\u5728\u7ebf\u5b9e\u4f8b\u3002<\/p>\n<\/div>\n
\u672c\u6559\u7a0b\u7740\u91cd\u8bb2\u89e3 ionic \u6846\u67b6\u7684\u5e94\u7528\uff0c\u5927\u90e8\u5206\u5b9e\u4f8b\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c \uff0c\u79fb\u52a8\u8bbe\u5907\u4e0a\u8fd0\u884c\u53ef\u4ee5\u5728\u63a5\u4e0b\u6765\u7684\u547d\u4ee4\u884c\u5b89\u88c5\u6559\u7a0b\u4e2d\u8be6\u7ec6\u4e86\u89e3\u3002<\/p>\n
\u6ce8\u610f\uff1a<\/b>\u5728\u79fb\u52a8\u5e94\u7528\u5982 phonegap \u4e2d\u6211\u4eec\u53ea\u9700\u5c06\u5bf9\u5e94\u7684 js \u548c css \u6587\u4ef6\u52a0\u5165\u5230\u8d44\u6e90\u5e93\u4e2d\u5373\u53ef\u3002<\/p>\n
\n
\u547d\u4ee4\u884c\u5b89\u88c5<\/h2>\n
\n\u9996\u5148\u60a8\u9700\u8981\u5b89\u88c5 Node.js<\/a>\uff0c\u6211\u4eec\u5728\u63a5\u4e0b\u6765\u7684\u5b89\u88c5\u4e2d\u9700\u8981\u4f7f\u7528\u5230\u5176 NPM \u5de5\u5177\uff0c\u66f4\u591a NPM \u4ecb\u7ecd\u53ef\u4ee5\u67e5\u770b\u6211\u4eec\u7684NPM \u4f7f\u7528\u4ecb\u7ecd<\/a>\u3002<\/p>\n
\u7136\u540e\u901a\u8fc7\u547d\u4ee4\u884c\u5de5\u5177<\/a>\u5b89\u88c5\u6700\u65b0\u7248\u672c\u7684 cordova \u548c ionic \u3002\u901a\u8fc7\u53c2\u8003Android<\/a> \u548c iOS<\/a> \u5b98\u65b9\u6587\u6863\u6765\u5b89\u88c5\u3002\n<\/p>\n
Window \u548c Linux \u4e0a\u6253\u5f00\u547d\u4ee4\u884c\u5de5\u5177\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n
\n$ npm install -g cordova ionic\n<\/pre>\n
Mac \u7cfb\u7edf\u4e0a\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n
\nsudo npm install -g cordova ionic\n<\/pre>\n
\n
\n  \u63d0\u793a: IOS\u9700\u8981\u5728Mac Os X. \u548cXcode\u73af\u5883\u4e0b\u9762\u5b89\u88c5\u4f7f\u7528\u3002
\n<\/i>\n<\/p>\n
\u5982\u679c\u4f60\u5df2\u7ecf\u5b89\u88c5\u4e86\u4ee5\u4e0a\u73af\u5883\uff0c\u53ef\u4ee5\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u6765\u66f4\u65b0\u7248\u672c:<\/p>\n
\nnpm update -g cordova ionic\n<\/pre>\n
\n\u6216<\/p>\n
\nsudo npm update -g cordova ionic\n<\/pre>\n
\u521b\u5efa\u5e94\u7528<\/h3>\n
\u4f7f\u7528ionic\u5b98\u65b9\u63d0\u4f9b\u7684\u73b0\u6210\u7684\u5e94\u7528\u7a0b\u5e8f\u6a21\u677f\uff0c\u6216\u4e00\u4e2a\u7a7a\u767d\u7684\u9879\u76ee\u521b\u5efa\u4e00\u4e2aionic\u5e94\u7528\uff1a<\/p>\n
\n$ ionic start myApp tabs\n<\/pre>\n
\u8fd0\u884c\u6211\u4eec\u521a\u624d\u521b\u5efa\u7684ionic\u9879\u76ee<\/h3>\n
\n\u4f7f\u7528 ionic tool \u521b\u5efa\uff0c\u6d4b\u8bd5\uff0c\u8fd0\u884c\u4f60\u7684apps(\u6216\u8005\u901a\u8fc7Cordova\u76f4\u63a5\u521b\u5efa)\u3002<\/p>\n
\u521b\u5efaAndroid\u5e94\u7528<\/h3>\n
\n$ cd myApp\n$ ionic platform add android\n$ ionic build android\n$ ionic emulate android\n<\/pre>\n
\u5982\u679c\u4e00\u5207\u6b63\u5e38\u4f1a\u5f39\u51fa\u6a21\u62df\u5668\uff0c\u754c\u9762\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
<\/p>\n
\u521b\u5efaiOS\u5e94\u7528<\/h3>\n
\n$ cd myApp\n$ ionic platform add ios\n$ ionic build ios\n$ ionic emulate ios\n<\/pre>\n
\n
\u5982\u679c\u51fa\u73b0”ios-sim was not found.”\u9519\u8bef\uff0c\u53ef\u4ee5\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n
npm install -g ios-sim<\/pre>\n<\/blockquote>\n
\u5982\u679c\u4e00\u5207\u6b63\u5e38\u4f1a\u5f39\u51fa\u6a21\u62df\u5668\uff0c\u754c\u9762\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
\n<\/p>\n
\n
Ionic Lab<\/h2>\n
Ionic Lab \u662f\u684c\u9762\u7248\u7684\u5f00\u53d1\u73af\u5883\uff0c\u5982\u679c\u4f60\u4e0d\u559c\u6b22\u4f7f\u7528\u547d\u4ee4\u884c\u64cd\u4f5c\uff0cIonic Lab \u5c06\u4f1a\u6ee1\u8db3\u4f60\u7684\u9700\u6c42\u3002<\/p>\n
Ionic Lab \u4e3a\u5f00\u53d1\u8005\u63d0\u4f9b\u4e86\u4e00\u4e2a\u66f4\u7b80\u5355\u7684\u65b9\u6cd5\u6765\u5f00\u59cb\uff0c\u7f16\u8bd1\uff0c\u8fd0\u884c\uff0c\u548c\u6a21\u62df\u8fd0\u884cIonic\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
Ionic Lab \u652f\u6301\u7684\u5e73\u53f0\u6709\uff1aWindow\u3001Mac OS X\u3001Linux\uff0c\u4e0b\u8f7d\u5730\u5740\u4e3a\uff1ahttp:\/\/lab.ionic.io\/<\/a>\uff0c\u4e0b\u8f7d\u540e\u76f4\u63a5\u5b89\u88c5\u5373\u53ef\u3002\u6574\u4e2a\u64cd\u4f5c\u754c\u9762\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
\n<\/p>\n
\u901a\u8fc7\u4ee5\u4e0a\u754c\u9762\u4f60\u53ef\u4ee5\u5b8c\u6210\u4ee5\u4e0b\u64cd\u4f5c\uff1a<\/p>\n