美文网首页
APP开发之Ionic+ZorroMobile踩坑之旅

APP开发之Ionic+ZorroMobile踩坑之旅

作者: 蒋小花_4b6c | 来源:发表于2019-08-29 17:48 被阅读0次

由于工作需要最近研究了一下使用Ionic框架、ZorroMobile组件库组合开发App……

毕竟是第一次写app遇到困难总是难免的嘛,遇到了困难解决就好了呗

开始吧!

1.新建项目

ionic start projectName

a.在需要新建项目的文件夹地址栏输入cmd

b.就打开了命令窗口

2.运行项目

c.在命令窗口输入,ionic start projectName

d.然后需要使↑↓键来选择需要新建的模板

我选择的是‘my-first-app’,

请稍等片刻,

创建成功后,请首先使用IDEA打开新建的项目,

e.创建成功,

一共耗时173.215s

接下来执行cd projectName 指向当前项目

(这里可以偷个小懒,输入cd my+Tab键,他会自动补全文件名,嘻嘻)

然后执行ionic serve 运行项目

访问 localhost:8100

浏览器使用移动端模式,就会是下面的这个样子啦,是不是很有成就感,就像真的在手机上使用的APP样

f.接下来很重要的一步,使用IDEA打开项目文件

宝宝使用的是Visual Studio Code,因为觉得他功能比较强大,嘻嘻

当然并不是然你们打开文件就结束了,而是有一个很重要的步骤:

***

看看你们的app.component.html长什莫样,最好是可以用一个单独的记事本把内容粘贴下来

g.接下来停止运行项目

在命令窗口停止项目:输入 Ctrl+C  选择y

或者直接关掉命令窗口,在VSCode中打开他的自带的命令窗口

快捷键是 Ctrl+~ ;或者 查看>集成终端

3.添加库

观察项目中的代码,都是使用的是Ionic的组件,ion-header、ion-content、ion-card、ion-img

想要查看更多Ionic的组件可以访问

Ionic的官网:https://ionicframework.com/docs/components

Ionic中文:http://www.ionic.wang/components_doc-index.html

h.为项目添加ZorroMobile组件库

 ng add ng-zorro-antd-mobile

也需要稍等一会儿,去喝点儿水呗

速度蛮快的6.7s

ZorroMobile的地址:http://ng.mobile.ant.design/#/docs/introduce/zh

i.接下来,运行项目,ionic serve

依旧访问localhost:8100

咦~ 怎末和之前的不一样了呢,

那你在看看app.component.html的代码呢

在安装ZorroMobile的时候,他把我们的app.component.html修改了,

所以我们需要把刚才粘贴到记事本的内容替换现在的。

虽然现在看起来就是一个复制粘贴,当时也没有发现这个问题,就是后面用zorro的控件跳转路径的时候一直搞不起,好气哦,不过最后找出了原因,其实这个解决问题的过程还是蛮有趣的呢,解决了问题之后还是多有成就感的呢,我做程序员的一个原因就是喜欢这种解决了问题之后的成就感,上学的时候我特别喜欢数学,也是和这个过程一样。就是喜欢解决特别难的问题,遇到困难总会激起我的挑战欲望我要把你解决掉,前面会一直挫折,然后一直坚持,直到有一天老天看到了我的努力和决心,就把答案告诉了我。哈哈这种战胜困难的感觉可真好,毕业之后1年了,在工作上我从来没有过这种感觉。好啦,以上只是我的有感而发,哈哈,忽略忽略

4.开发

.接下来开始使用zorro的控件来开发吧

j.先确认一下你的app.module.ts,引用了NgZorroAntdMobileModule

angular.json添加了css文件

k.按照官方文档的指导:

以使用button为例:

运行起来:ionic serve

咦,这就怪了呢,安装了库,引用了文件,还有哪里不对呢?咋就不认识你自己的button呢

翻阅了很多资料,查看了其他同行的心得体会和踩坑经历, Oh my god ! ! ! 原来是这样

***

你需要这样操作

在引用更改的文件的module中添加这个引用 import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';

最后结果就是这样:

到这里就解决了入门问题,以后的路还要靠你自己走,加油💪

5.总结

本文主要讲解了新建项目+运行项目的全部过程,以及两处大坑(一是首页路由被替换,二是需要多次引用Mobilemodule)。

在这个过程里有开心也有泪水,好在我们都坚持过来了,希望大家可以继续加油哦

断断续续的写了两周,终于可以发表了,真是一把辛酸泪吖

相关文章

网友评论

      本文标题:APP开发之Ionic+ZorroMobile踩坑之旅

      本文链接:https://www.haomeiwen.com/subject/jvmgjctx.html