【Ionic】-環境設置與手機偵錯

依據

Building a Native Mobile App with Cordova and Ionic

的步驟逐步安裝並建立專案

<table border="0" cellpadding="0" cellspacing="0" style="box-sizing: content-box !important; border-collapse: collapse; border-spacing: 0px; width: 908px; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal; font-style: normal; font-size: 19px; direction: ltr !important; box-shadow: none !important; table-layout: auto !important; color: rgb(48, 48, 48); font-variant: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background: none !important;"> <tbody style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <tr style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <td class="code" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: 908px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <div class="container" style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <div class="line number1 index0 alt2 highlighted" style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 15px !important; direction: ltr !important; box-shadow: none !important; white-space: pre !important; background: none rgb(42, 49, 51) !important;"> <code class="bash plain" style="box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; position: static !important; top: auto !important; border: 0px !important; padding: 0px !important; border-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; right: auto !important; text-align: left !important; vertical-align: baseline !important; width: auto !important; font-weight: normal !important; font-style: normal !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: rgb(211, 211, 211) !important; background: none !important;">ionic build android

在cmd測試Ionic

若遇到 錯誤:

<pre class="default prettyprint prettyprinted" style="margin: 0px 0px 1em; padding: 5px; border: 0px; font-size: 13px; overflow: auto; width: auto; max-height: 600px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; display: block; color: rgb(57, 51, 24); word-wrap: normal; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238);"> emulator : ERROR : This AVD 's configuration is missing a kernel file!! emulator: ERROR: ANDROID_SDK_ROOT is undefined

就代表SDK沒安裝好,我以API23為例,我是全裝

(只是這張圖還沒全裝,範例而已)

再檢查AVD的設定,裡面是空的就creat一個

我隨便設

不過我不用模擬器跑,我用 手機偵錯 所以我不是輸入

<table border="0" cellpadding="0" cellspacing="0" style="box-sizing: content-box !important; border-collapse: collapse; border-spacing: 0px; width: 908px; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal; font-style: normal; font-size: 19px; direction: ltr !important; box-shadow: none !important; table-layout: auto !important; color: rgb(48, 48, 48); font-variant: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background: none !important;"> <tbody style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <tr style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <td class="code" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: 908px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <div class="container" style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <div class="line number1 index0 alt2 highlighted" style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 15px !important; direction: ltr !important; box-shadow: none !important; white-space: pre !important; background: none rgb(42, 49, 51) !important;"> <code class="bash plain" style="box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; position: static !important; top: auto !important; border: 0px !important; padding: 0px !important; border-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; right: auto !important; text-align: left !important; vertical-align: baseline !important; width: auto !important; font-weight: normal !important; font-style: normal !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: rgb(211, 211, 211) !important; background: none !important;">ionic emulate android

而是輸入

<table border="0" cellpadding="0" cellspacing="0" style="box-sizing: content-box !important; border-collapse: collapse; border-spacing: 0px; width: 908px; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal; font-style: normal; font-size: 19px; direction: ltr !important; box-shadow: none !important; table-layout: auto !important; color: rgb(48, 48, 48); font-variant: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background: none !important;"> <tbody style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <tr style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <td class="code" style="box-sizing: content-box !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: 908px; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <div class="container" style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; box-shadow: none !important; background: none !important;"> <div class="line number1 index0 alt2 highlighted" style="box-sizing: content-box !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em 0px 0em !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 15px !important; direction: ltr !important; box-shadow: none !important; white-space: pre !important; background: none rgb(42, 49, 51) !important;"> <code class="bash plain" style="box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; position: static !important; top: auto !important; border: 0px !important; padding: 0px !important; border-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; right: auto !important; text-align: left !important; vertical-align: baseline !important; width: auto !important; font-weight: normal !important; font-style: normal !important; direction: ltr !important; box-shadow: none !important; display: inline !important; color: rgb(211, 211, 211) !important; background: none !important;">ionic run android

成功畫面

程式小試身手

歡迎光臨!這裡紀錄著程式相關資料有幫助或沒幫助請留言希望可以找出各位盲點