http://localhost:1313/tags/cordova/ Recent content in Cordova on Homura's Blog Hugo -- gohugo.io zh-tw Homura Lin Mon, 08 May 2017 20:14:58 +0000 http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/ Mon, 08 May 2017 20:14:58 +0000 http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/ <h1 id="前言">前言 </h1><p>繼上篇<a class="link" href="https://homura0731.github.io/2017/04/Cordova-Set_up/" target="_blank" rel="noopener" >Cordova安裝</a>之後，接下來要說一下怎麼編譯成apk和使用android模擬器運行，其實我在學會使用Apache Cordova的編譯器之前，都是用Adobe Phonegap的線上編譯器，其實用久真的不是很好用，還是能在自己的PC編譯比較好，那就廢話不多說進入實作吧。</p> <h1 id="實作">實作 </h1><h2 id="幫專案添加android-platform">幫專案添加android platform </h2><p>使用以下指令</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ cordova platform add android </span></span></code></pre></td></tr></table> </div> </div><p><img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/1.png" width="967" height="272" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/1_hu3641861286168543295.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/1_hu545239598635358917.png 1024w" loading="lazy" alt="添加android platform" class="gallery-image" data-flex-grow="355" data-flex-basis="853px" > 成功的話專案下的platforms資料夾底下會多出一個android資料夾 <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/2.png" width="195" height="96" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/2_hu16245095986404154370.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/2_hu889845444310217917.png 1024w" loading="lazy" alt="添加android platform 成功" class="gallery-image" data-flex-grow="203" data-flex-basis="487px" ></p> <h2 id="使用android-模擬器模擬">使用android 模擬器模擬 </h2><p>使用以下指令</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ cordova run android </span></span></code></pre></td></tr></table> </div> </div><p>然後應該會看到以下錯誤訊息，因為還沒設置android sdk的path <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/3.png" width="923" height="89" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/3_hu7648006772727838424.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/3_hu14873208032570301579.png 1024w" loading="lazy" alt="執行android模擬器失敗" class="gallery-image" data-flex-grow="1037" data-flex-basis="2488px" ></p> <h2 id="設置android_home和android的path">設置Android_Home和Android的path </h2><p>對我的電腦右鍵內容-&gt;進階系統設定-&gt;進階-&gt;環境變數 環境變數在windows上分2種一種是指對使用者(上面)，一種是對全部使用者(下面)，這邊編輯使用者就好了! <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/4.png" width="618" height="585" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/4_hu5712083229178308919.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/4_hu2484667523970968835.png 1024w" loading="lazy" alt="path設定1" class="gallery-image" data-flex-grow="105" data-flex-basis="253px" > 然後找出自己sdk的安裝位置，然後新增的2個值，指向platform-tools和tools這2個位置，如果是win7的話記得都要在後面加上;，我這邊是win10比較高級有UI可以用.. <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/5.png" width="527" height="501" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/5_hu17848923967496653365.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/5_hu4545094048520686589.png 1024w" loading="lazy" alt="path設定2" class="gallery-image" data-flex-grow="105" data-flex-basis="252px" > 再新增一個ANDROID_HOME變數指向android-sdk根目錄 <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/6.png" width="653" height="165" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/6_hu8668272470896984697.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/6_hu7670870401591663368.png 1024w" loading="lazy" alt="path設定2" class="gallery-image" data-flex-grow="395" data-flex-basis="949px" ></p> <p>設置完成後記得關掉命令提示字元(終端機)，因為他不會自己重讀path一定要重開，我第一次就笨笨的設好了為啥還抓不到&hellip; 然後在執行一次剛剛的指令</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ cordova run android </span></span></code></pre></td></tr></table> </div> </div><p>應該會有抓不完jdk，然後又丟新錯誤給我 <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/7.png" width="978" height="553" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/7_hu3110791082358607462.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/7_hu5555439377143621815.png 1024w" loading="lazy" alt="path設定3" class="gallery-image" data-flex-grow="176" data-flex-basis="424px" ></p> <h2 id="添加licenses">添加licenses </h2><p>這步我記得在win7是沒這問題，不知道是不是新版sdk有什麼問題，google了一下用這2行指令解決</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ mkdir <span class="s2">&#34;%ANDROID_HOME%\licenses&#34;</span> </span></span><span class="line"><span class="cl">$ <span class="nb">echo</span> <span class="p">|</span><span class="nb">set</span> /p<span class="o">=</span><span class="s2">&#34;8933bad161af4178b1185d1a37fbf41ea5269c55&#34;</span> &gt; <span class="s2">&#34;%ANDROID_HOME%\licenses\android-sdk-license&#34;</span> </span></span></code></pre></td></tr></table> </div> </div><p>然後正常來說應該就行了，但是win10很討厭把資料夾的權限鎖住了，造成以下錯誤訊息 <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/8.png" width="978" height="553" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/8_hu13506681710992789186.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/8_hu10191560801025789966.png 1024w" loading="lazy" alt="系統權限" class="gallery-image" data-flex-grow="176" data-flex-basis="424px" ></p> <h2 id="打開sdk資料夾權限">打開sdk資料夾權限 </h2><p>修改Windows資料夾權限給Cordova使用</p> <h2 id="執行及編譯成apk">執行及編譯成apk </h2><p>到這步我是沒問題了，如果還有問題可能是sdk的platform設定有問題，個人公司的win7碰到的，有問題去目錄底下的AVD Manager.exe設定一下目標平台 然後再執行一次</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ cordova run android </span></span></code></pre></td></tr></table> </div> </div><p>成功後如下圖結果 <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/9.png" width="533" height="866" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/9_hu11601841756588485255.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/9_hu18444211861939626827.png 1024w" loading="lazy" alt="模擬成功" class="gallery-image" data-flex-grow="61" data-flex-basis="147px" > 然後編譯apk指令</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ cordova build android </span></span></code></pre></td></tr></table> </div> </div><p>編譯後可以再專案目錄底下找到apk <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/10.png" width="293" height="228" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/10_hu4083828881730459899.png 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D2-android%E7%AF%87/post/2017/05/cordova-set_up-android/10_hu9879165108016208489.png 1024w" loading="lazy" alt="apk編譯" class="gallery-image" data-flex-grow="128" data-flex-basis="308px" ></p> <h1 id="後記">後記 </h1><p>其實工作時我並沒有成功過使用模擬器，只有編譯成apk，工作的電腦好像沒有Hype-V的功能連模擬器都不能用，在家用win10果然可以用，搞了好久終於設定完成!(累癱)</p> <h1 id="參考文獻">參考文獻 </h1><ul> <li><a class="link" href="https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html" target="_blank" rel="noopener" >Apach Cordova官網文件</a></li> <li><a class="link" href="http://stackoverflow.com/questions/40383323/cant-accept-license-agreement-android-sdk-platform-24" target="_blank" rel="noopener" >stackoverflow</a></li> </ul> http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D/ Sun, 23 Apr 2017 19:19:59 +0000 http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D/ <h1 id="前言">前言 </h1><h2 id="什麼是cordova">什麼是Cordova? </h2><p>Cordova是一種讓網頁工程師不需要學會手機程式原生語言(例如Java和objecive-C)，也能寫出手機App的一種網頁前端框架，不管是iOS或是Android平台，只要你會HTML、CSS、Javasript就OK了。</p> <h2 id="cordova的演變">Cordova的演變 </h2><p>來簡單說說Cordova的演變Cordova的前身叫PhoneGap，原本是Nitobi開發的，後來被Adobe收購後改名叫做Adobe PhoneGap，Adobe又把代碼捐給Apache基金會，但保留商標所有權，Apache這邊則是改叫另一個名稱叫Apache Cordova。 基本上Adobe PhoneGap和Apache Cordova的基底都是Cordova，所以兩邊的寫的程式碼可以共通是沒問題，不過platform建議是用同一邊寫的，然後兩邊環境有什麼不同也大概說一下Adobe PhoneGap這邊是要付費的而且編譯器是在雲端上編輯，沒付費的話還是能用，只是線上的專案只能創建一個，可以拿到的軟體部分只有模擬器的部分，Apache Cordova這邊則是編譯和模擬器全都有，這邊以Apache Cordova為主。</p> <h1 id="實作">實作 </h1><h2 id="事前準備工具">事前準備工具 </h2><ul> <li><a class="link" href="https://nodejs.org/en/" target="_blank" rel="noopener" >Node.js</a></li> <li><a class="link" href="https://developer.android.com/studio/index.html" target="_blank" rel="noopener" >Android SDK</a></li> </ul> <h2 id="安裝cordova">安裝Cordova </h2><p>首先開啟自己的cmd安裝，Mac OS可能會有權限問題 npm前面記得加sudo</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ npm install -g cordova </span></span></code></pre></td></tr></table> </div> </div><p>裝好之後就能使用以下指令創建專案了</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ cordova create 專案名稱 </span></span></code></pre></td></tr></table> </div> </div><p>再來我們要幫專案加入使用平台，我們一般會先用瀏覽器看，所以我們先裝browser這個platform，還有不要忘記指向自己的專案資料夾底下</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ cordova platform add browser </span></span></code></pre></td></tr></table> </div> </div><p>然後就能用我們的瀏覽器來跑了</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">$ cordova run browser </span></span></code></pre></td></tr></table> </div> </div><p>執行成功會自動開啟瀏覽器，然後按F12開啟開發人員模式，切成手機模式瀏覽，如下圖 <img src="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D/post/2017/04/cordova-set_up/1.jpg" width="1920" height="1040" srcset="http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D/post/2017/04/cordova-set_up/1_hu8336575639378490298.jpg 480w, http://localhost:1313/p/cordova-%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D/post/2017/04/cordova-set_up/1_hu9746129240729210255.jpg 1024w" loading="lazy" alt="執行browser" class="gallery-image" data-flex-grow="184" data-flex-basis="443px" ></p> <h1 id="後記">後記 </h1><p>其實Cordova這框架是老闆想寫App但是沒人會，所以找來老師上了幾堂簡單的App課程，當時教得是Adobe PhoneGap，其實不知道為什麼不是教Apache Cordva，這個能做的事情明明比較多，後來想想好像是因為Adobe PhoneGap有圖形介面，大概是考慮了這問題，反正就因為這樣就莫名其妙開始使用了這框架，編譯成Android之前會在另外寫一篇，就先這樣啦!</p> <h1 id="參考文獻">參考文獻 </h1><ul> <li><a class="link" href="https://zh.wikipedia.org/wiki/Adobe_PhoneGap" target="_blank" rel="noopener" >維基百科</a></li> <li><a class="link" href="http://phonegap.com/" target="_blank" rel="noopener" >Adobe PhoneGap官網</a></li> <li><a class="link" href="http://cordova.apache.org/" target="_blank" rel="noopener" >Apach Cordova官網</a></li> </ul>