基于Ionic的Clipclit开发总结

HTML和CSS相关问题

定位

  定位这个问题经常令我头疼。在经过一定学习和实践之后我对后面三块内容获得了更多了解，块级元素，盒子模型和position。块级元素能自动填满容器，我常将display:block和margin:auto或者text-align:center搭配使用以达到居中效果。display:inline-block常用来将多个按钮放在同一行（提一下，两个元素的margin不叠加）。position有absoluta，relative，flexd这三个。在上个迁移任务中我用absolute解决了一些当时我自以为的难题，因为它能让元素脱离文档流浮起来——没有东西能遮住它。flxed相对你的窗口定位。

css选择器

  我们可以通过id=".."或者class=".."来给元素匹配css，id的优先级高于class，在scss文件中id是#id，class是.class。除此之外我们还可以直接使用元素的标签来修改某一位置的同一元素样式。

定位修改对象

  当我们想要达到什么效果的时候我们可以直接通过搜索获得答案。但如果在一种很尴尬的处境下—我不能很好地用文字描述我想要的效果。你可以尝试以下个方法：在开发者模式下选中要修改的元素，观察当改变里面的style时元素的变化，这样你也许能知道你要修改哪个选择器的哪条属性来达到目的，然后再去搜索器里搜索相关内容，了解更多用法。举个例子：.toast-container，ionic中toast的一个css选择器，我无法在官方文档中找到他。值得注意的是，ionic中toast和alert这种需要在js调用，没有标签的ui的css应该定义在全局的css中，定义在page 的css中是无效的。




JS相关问题

then和subscribe

  这次开发我留意到了then和subscribe，then与promise配套来自Es6,subscribe与observable配套来自Rxjs。promise和observable有以下特点：

promiseobservable
执行时只会发送一次请求执行时会发送多次请求
发送的请求不能（或十分麻烦）取消发送的请求可以取消
很少方法提供了很多跟数组有关的方法，如map

其实我们很容易看出observable更加灵活，angular8中HttpClient就采用了observable。但是在这个项目中我只需要简单的发送两个请求，更青睐于简单直白的promise，所以我采用了toPromise将observable封装成了promise对象。不过在我了解更多之后发觉上诉理由并不充分。其实关于两者更深层的却区别看了很多文章我还是很迷惑，等我以后开窍了再写篇博客来精细比较两者咕。

get/post拉取回的对象处理

  在项目的开发中我尝试从服务器返回的对象中获取我想要的属性，但是当我通过.msg获得我的目标属性时编译器告诉我.msg这个用法有问题，尽管这么操作的确能获得我的目标属性。编译器的提示是Object没有msg这个属性。问题出在了哪？传参的默认类型是Object，但是Object这个大类并没有msg这个属性，所以我们只需要将参数的类型定义为any即可去掉报错。




其他

Android8以上的http无法使用问题

  这是个令人头疼且常见的问题。背景：ionic5.4.4.


这里贴上一个两年前关于这个问题的答案（可能被墙了）。随着ionic的版本升级或是其他原因，里面的操作并不能解决我的问题。感兴趣的可以了解一下这些曾经可行的办法


写在可行方法前面，下面的解决方法可能也会过时，永不过时且保证安全的办法便是使用Https，如果有条件请使用Https


  先放原文网址,接下来我将转述操作步骤并添加一些我个人见解。

  1. 修改config.xml

    2. 添加以下代码到config.xml文件的前面

    <access origin="https://juejin.im/post/5ef4784ce51d4534854537da/*" />//这个可能存在,跟ionic版本有关。若存在就在这句原本的位置下加入下一句
    <allow-navigation href="https://juejin.im/post/5ef4784ce51d4534854537da/*" />//允许访问子网站

    在<application />内加入android:networkSecurityConfig="@xml/network_security_config"//可能存在，调用这个配置文件

  2. 添加/修改"resources/android/xml/network_security_config.xml"

    3. <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
    <base-config cleartextTrafficPermitted="true">
    <trust-anchors>
    <certificates src="https://juejin.im/post/5ef4784ce51d4534854537da/system" />
    </trust-anchors>
    </base-config>
    <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">localhost</domain>
    <domain includeSubdomains="true">YOUR DOMAIN HERE/IP</domain>//你要访问的网址
    </domain-config>
    </network-security-config>

常见错误

  大概不是初犯。我在打包app时打错了cmd命令，由于无法完全解读报错信息，我耗费一个上午的时间来找出原因。世上从不缺我这种粗心蛋，当我看到另一个粗心蛋提出的问题的时候我才意识到问题所在。如果你遇到了上述情况可以尝试检查命令

感想

其实我一点也不擅长写东西，无论从哪个方面来看我的文字都十分僵硬。好吧不只是文字，很多地方都很僵硬。这是我第一篇博客，一个小项目的总结。我希望我能尽量把我在这过程学到的，我所想记录下的东西比较好的记录下来。如果它能帮助到别人那自然是最好的了（定位这么尴尬大概只能留给我自己看了）

这篇博客还没活够一天就被我进行了大改造，被友人指出后我才意识到原先的语法对一篇技术性博客来说有多糟糕。更糟糕的是当我开始动刀修改的时候它已经有了14的阅读量。好吧最起码以后不会有人看到最初的它了。其实上面那一块是原版的前言,给这篇博客多保留一点原来的样子

以上是 基于Ionic的Clipclit开发总结 的全部内容， 来源链接： utcz.com/a/27620.html

回到顶部