由于工作需要最近研究了一下使用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)。
在这个过程里有开心也有泪水,好在我们都坚持过来了,希望大家可以继续加油哦
断断续续的写了两周,终于可以发表了,真是一把辛酸泪吖
网友评论