uniapp怎么去除网页样式

百变鹏仔 2个月前 (11-20) #uniapp

文章标签样式

现在越来越多的网站在移动端上也有了自己的应用，而一些新型的移动应用开发框架也慢慢的走进大众的视野。uniapp就是这样一个受欢迎的移动应用开发框架之一，它完全基于vue.js和微信小程序组件库开发，可以同时在多个平台上运行。但是在实际开发中，uniapp的默认网页样式可能会让开发者不满意，本文就来讲解一下如何去除uniapp的默认网页样式。

第一步：清除UniApp默认CSS样式

UniApp的默认CSS样式都在它的基础样式表文件中，我们可以通过引入一个自定义的CSS文件来重写其中的部分样式。具体操作如下：

在项目的static目录下新建一个名为reset.css的文件。
在该文件中写下以下内容：

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样式来进一步美化网页。

在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样式，这样才可以免除后期开发中的一些麻烦。

在项目的static目录下新建一个名为common.scss的文件。
在该文件中写下以下内容：

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);}/*自定义的其他样式*/

这段CSS样式可以解决一些不同平台之间的样式不一致问题。比如说iOS和Android平台中，输入框的圆角不尽相同，使用该段代码可以保持输入框在不同平台上的一致性。同时，该段代码也针对了一些常用的UI组件，比如按钮。可以解决一些在各个平台样式不一致的情况。

在App.vue组件中引用该CSS文件。跟之前一样，在template标签内加入以下代码：

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

总结

通过上述的步骤，我们可以在UniApp开发中去除默认的网页样式，实现网页的个性化设计。其中，我们通过清除全部元素的默认样式，从底部开始自定义样式；并通过reset全局CSS样式，解决了一些不同平台之间样式不兼容的问题。最终，我们获得了一个更加精致、美观的UniApp应用。

文章推荐

uniapp怎么去除网页样式

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项