<p><code></p> <h1 id="articleHeader0">摘要</h1> <p>ionic是可以让我们使用web开发即使来移动应用的框架。ionic4之前,ionic只能和angular搭配使用,ionic4后把ionic抽离成四个版本,@ionic/core,@ionic/angular,@ionic/react,@ionic/vue来满足更多开发者的需求,但是@ionic/vue和@ionic/react还处于内部测试阶段。如果你熟悉angular可以直接使用@ionic/angular开发,但如果你熟悉使用react或vue并且也想使用ionic,可以使用@ionic/core版本,本文就以@ionic/core + vue 来说明这两者如何结合使用。除此之外ionic还引入cordova和capacitor来对把我们代码打包成安卓或<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>应用。。<a href="https://ionicframework.com" rel="nofollow noreferrer" target="_blank">https://ionicframework.com</a></p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/4/16/16a26c39bc9536f9?w=778&amp;h=472&amp;f=png&amp;s=190760" src="https://user-gold-cdn.xitu.io/2019/4/16/16a26c39bc9536f9?w=778&amp;h=472&amp;f=png&amp;s=190760" alt="" title="" style="cursor: pointer; display: inline;"></span></p> <h1 id="articleHeader1">使用ionic来搭建我们环境</h1> <h2 id="articleHeader2">安装ionic脚手架</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g ionic" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> -g ionic</code></pre> <h2 id="articleHeader3">安装androd stuiod来编译<a href="http://www.js-code.com/tag/android" title="android" target="_blank">android</a>代码</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="https://ionicframework.com/docs/installation/android" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">https:</span><span class="hljs-comment">//ionicframework.com/docs/installation/<a href="http://www.js-code.com/tag/android" title="浏览关于“android”的文章" target="_blank" class="tag_link">android</a></span></code></pre> <h2 id="articleHeader4">安装xcode来编译<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>代码</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="https://ionicframework.com/docs/installation/ios" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">https:</span><span class="hljs-comment">//ionicframework.com/docs/installation/ios</span></code></pre> <h2 id="articleHeader5">初始化项目 用提供的模版为来测试环境是否已经安装成功</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="ionic start myApp blank" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">ionic <span class="hljs-keyword">start</span> myApp blank</code></pre> <h3 id="articleHeader6">在android studio上启动</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="https://ionicframework.com/docs/building/android 1, ionic cordova prepare android 2, ionic cordova run android -l" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">https:</span><span class="hljs-comment">//ionicframework.com/docs/building/android</span> <span class="hljs-number">1</span>, ionic cordova prepare android <span class="hljs-number">2</span>, ionic cordova run android -l</code></pre> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/4/17/16a26f061eda0dce?w=974&amp;h=1380&amp;f=png&amp;s=148247" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h3 id="articleHeader7">在xcode上启动</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1,ionic cordova prepare ios 2, ionic cordova run ios -l" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>1,ionic cordova <span class="hljs-keyword">prepare</span> ios <span class="hljs-number">2</span>, ionic cordova run ios -l</code></pre> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/4/17/16a26edebfb82f8c?w=842&amp;h=1668&amp;f=png&amp;s=123076" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h1 id="articleHeader8">自己来搭建环境</h1> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="代码可见 https://github.com/gdutjiweijin/webapp" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">代码可见 <span class="hljs-string">https:</span><span class="hljs-comment">//github.com/gdutjiweijin/webapp</span></code></pre> <h2 id="articleHeader9">适应vue-cli脚手架来搭建vue基础基础代码</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1, npm install --global vue-cli 2, vue init webpack webapp 3, cd webapp 4, yarn install 5, yarn run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>1, npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--global vue-cli</span> <span class="hljs-number">2</span>, vue init webpack webapp <span class="hljs-number">3</span>, cd webapp <span class="hljs-number">4</span>, yarn <span class="hljs-keyword">install</span> <span class="hljs-number">5</span>, yarn run dev</code></pre> <h2 id="articleHeader10">引入ionic@core</h2> <p>在index.html上加入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<link href=&quot;https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css&quot; rel=&quot;stylesheet&quot;> <script src=&quot;https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code>&lt;<span class="hljs-keyword">link</span> href=<span class="hljs-string">"https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css"</span> rel=<span class="hljs-string">"stylesheet"</span>&gt; &lt;script src=<span class="hljs-string">"https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"</span>&gt;&lt;<span class="hljs-regexp">/script&gt;</span></code></pre> <p>在main.js加入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.config.ignoredElements = [/^ion-/];" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.config.ignoredElements = [<span class="hljs-regexp">/^ion-/</span>];</code></pre> <h2 id="articleHeader11">初始化cordova项目</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1,cordova create cordovawebapp 2,cordova platform add android 3,cordova platform add ios" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>1,cordova <span class="hljs-keyword">create</span> cordovawebapp <span class="hljs-number">2</span>,cordova platform <span class="hljs-keyword">add</span> android <span class="hljs-number">3</span>,cordova platform <span class="hljs-keyword">add</span> ios</code></pre> <h2 id="articleHeader12">把我们代码放入到cordova目录</h2> <h3 id="articleHeader13">1)打包我们项目代码 npm run build</h3> <h3 id="articleHeader14">2) 把dist目录代码拷贝到安卓对应目录上</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cp -r dist/ ./cordovawebapp/platforms/android/app/src/main/assets/www/" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">cp -r dist<span class="hljs-regexp">/ ./</span>cordovawebapp<span class="hljs-regexp">/platforms/</span>android<span class="hljs-regexp">/app/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/www/</span></code></pre> <h3 id="articleHeader15">3)把dist目录代码拷贝到ios对应目录上</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cp -r dist/ ./cordovawebapp/platforms/ios/www/" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">cp -r dist<span class="hljs-regexp">/ ./</span>cordovawebapp<span class="hljs-regexp">/platforms/</span>ios<span class="hljs-regexp">/www/</span></code></pre> <h2 id="articleHeader16">具体代码可参考<a href="https://github.com/gdutjiweijin/webapp" rel="nofollow noreferrer" target="_blank">https://github.com/gdutjiweij...</a>,效果如下</h2> <h3 id="articleHeader17">web</h3> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/4/17/16a26f9038d903ff?w=1114&amp;h=1496&amp;f=png&amp;s=190707" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h3 id="articleHeader18">android</h3> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/4/17/16a29c364ad6d2fc?w=822&amp;h=1254&amp;f=png&amp;s=194131" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <h3 id="articleHeader19">ios</h3> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/4/17/16a29c4aa51810df?w=854&amp;h=1640&amp;f=png&amp;s=294910" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接:

ionic4+vue+cordova 开发混合应用

http://www.js-code.com/angularjs/angularjs_29040.html

80%的人都看过