So entfernen Sie den Webseitenstil in Uniapp

Jetzt haben immer mehr Websites ihre eigenen Anwendungen auf dem mobilen Endgerät, und einige neue Frameworks für die Entwicklung mobiler Anwendungen geraten langsam in den Fokus der Öffentlichkeit. UniApp ist eines dieser beliebten Frameworks für die Entwicklung mobiler Anwendungen. Es basiert vollständig auf Vue.js und der WeChat-Applet-Komponentenbibliothek und kann auf mehreren Plattformen gleichzeitig ausgeführt werden. In der tatsächlichen Entwicklung kann der Standard-Webseitenstil von UniApp jedoch dazu führen, dass Entwickler unzufrieden sind. In diesem Artikel wird erläutert, wie der Standard-Webseitenstil von UniApp entfernt wird.

Schritt 1: Standard-CSS-Stile von UniApp löschen

Die Standard-CSS-Stile von UniApp befinden sich in der Basis-Stylesheet-Datei. Wir können einige der Stile überschreiben, indem wir eine benutzerdefinierte CSS-Datei einführen. Die spezifischen Vorgänge sind wie folgt:

1. Erstellen Sie eine neue Datei mit dem Namen reset.css im statischen Verzeichnis des Projekts. reset.css的文件。
2. 在该文件中写下以下内容：

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/*自定义的其他样式*/

该段代码是通过重写HTML所有元素的默认值来清空UniApp的默认CSS样式（其中包括margin，padding，border等属性），相当于从底层开始搭建自己的样式。我们还可以在该段代码的下方加入其他自定义的CSS样式来进一步美化网页。

3. 在App.vue组件中引用该CSS文件。在template标签内加入以下代码：

<style lang="scss" rel="stylesheet">
  @import "../static/reset.css";
</style>

这就是通过在App.vue组件中引用外部CSS文件的方式来清除UniApp默认CSS样式。在这里我们采用了import的方式，以免在HTML文件中重复加入样式文件。

第二步：reset全局CSS样式

在清空了UniApp默认CSS样式后，我们需要再加入一些reset全局CSS样式，这样才可以免除后期开发中的一些麻烦。

1. 在项目的static目录下新建一个名为common.scss
Schreiben Sie den folgenden Inhalt in diese Datei:

2. html, body {
       height: 100%;
       min-height: 100%;
   }
   
   body {
       color: #333;
       font-size: 15px;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       background-color: #fff;
   }
   
   input[type="text"], input[type="number"], input[type="password"] {
       -webkit-appearance: none;
       -webkit-border-radius: 0;
   }
   input[type="submit"], input[type="button"], button {
       border: none;
       outline: none;
       background-color: tranparent;
       cursor: pointer;
       -webkit-appearance: none;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
   /*自定义的其他样式*/

Dieser Code löscht den Standard-CSS-Stil von UniApp (einschließlich Rand, Abstand, Rahmen und anderen Attributen), indem er die Standardwerte aller HTML-Elemente neu schreibt, was gleichwertig ist ab Die unterste Ebene beginnt, ihren eigenen Stil zu entwickeln. Wir können unter diesem Code auch andere benutzerdefinierte CSS-Stile hinzufügen, um die Webseite weiter zu verschönern.

Referenzieren Sie diese CSS-Datei in der App.vue-Komponente. Fügen Sie den folgenden Code innerhalb des Vorlagen-Tags hinzu:

3. <style lang="scss" rel="stylesheet">
     @import "../static/common.scss";
   </style>

Damit wird der Standard-CSS-Stil von UniApp gelöscht, indem auf die externe CSS-Datei in der App.vue-Komponente verwiesen wird. Hier verwenden wir die Importmethode, um zu vermeiden, dass der HTML-Datei wiederholt Stildateien hinzugefügt werden.

Schritt 2: Globale CSS-Stile zurücksetzen

Nachdem wir die UniApp-Standard-CSS-Stile gelöscht haben, müssen wir einige zurückgesetzte globale CSS-Stile hinzufügen, um einige Probleme in der späteren Entwicklung zu vermeiden. 🎜🎜🎜Erstellen Sie eine neue Datei mit dem Namen common.scss im statischen Verzeichnis des Projekts. 🎜🎜Schreiben Sie den folgenden Inhalt in die Datei: 🎜🎜rrreee🎜Dieser CSS-Stil kann einige Stilinkonsistenzen zwischen verschiedenen Plattformen beheben. Auf iOS- und Android-Plattformen sind beispielsweise die abgerundeten Ecken der Eingabefelder unterschiedlich. Durch die Verwendung dieses Codes kann die Konsistenz der Eingabefelder auf verschiedenen Plattformen gewahrt bleiben. Gleichzeitig zielt dieser Code auch auf einige häufig verwendete UI-Komponenten ab, beispielsweise Schaltflächen. Es kann einige Inkonsistenzen in den Stilen auf verschiedenen Plattformen beheben. 🎜🎜🎜Referenzieren Sie diese CSS-Datei in der App.vue-Komponente. Fügen Sie wie zuvor den folgenden Code zum Vorlagen-Tag hinzu: 🎜🎜rrreee🎜Summary🎜🎜Durch die oben genannten Schritte können wir den Standard-Webseitenstil in der UniApp-Entwicklung entfernen und ein personalisiertes Design der Webseite erreichen. Unter anderem haben wir die Standardstile aller Elemente gelöscht und die Stile von Grund auf angepasst. Außerdem haben wir die globalen CSS-Stile zurückgesetzt, um einige Stilinkompatibilitätsprobleme zwischen verschiedenen Plattformen zu beheben. Am Ende haben wir eine verfeinerte und schönere UniApp-Anwendung erhalten. 🎜

Das obige ist der detaillierte Inhalt vonSo entfernen Sie den Webseitenstil in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!