uni-app introduces global style introduction and bottom navigation bar development

Recommended (free): uni-app development tutorial

Preface

This article first introduces the types of global styles introduced in the uni-app project, that is, in App.vue Introducing the official CSS style library, custom icon library and CSS animation library; then introducing the definition of globalStyle in pages.json; and finally realizing the development of the project's navigation bar.

1. App.vue introduces global styles

The directory structure of a standard uni-app project is as follows:

┌─cloudfunctions        云函数目录
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

Among them, App.vue is the main component of uni-app. All pages are switched under App.vue, which is the page entry file. App.vue itself is not a page and cannot write view elements.
The functions of this file include: calling application life cycle functions, configuring global styles, and configuring global storage globalData.
Calling the life cycle function can implement many actions that need to be performed in a specific life cycle, such as detecting updates, network monitoring, initializing data, etc. during onLaunch, onHide is available Pause the playback of music and videos when the application runs in the background.
Styles, icons, animations, etc. can be introduced in this file.

1. Introduce the official CSS style library

Create a new uni-app project, select Hello uni-app as the template, there is a common directory under the project directory, and there is ## The #uni.css file is the official CSS style library. Create a new common directory in the Community_Dating directory and copy uni.css to the common directory. At the same time, you need to copy the
uni.ttf font file in the static directory of the Hello uni-app project to the static directory of the Community_Dating project.

If you need to directly use files such as styles, fonts and materials, you can directly click to add QQ group

963624318, download it in the group folder uni-app actual community dating APP.

At this point, just import uni.css into the App.vue file of Community_Dating, as follows:

<script>
	export default {
		onLaunch: function() {
			console.log(&#39;App Launch&#39;)
		},
		onShow: function() {
			console.log(&#39;App Show&#39;)
		},
		onHide: function() {
			console.log(&#39;App Hide&#39;)
		}
	}</script><style>
	/*每个页面公共css */
	@import url("./common/uni.css");</style>

2. Introduce the custom icon library

The icons introduced are mainly the icons provided by iconfont (https://www.iconfont.cn/).

You need to first search for the icons you need based on keywords, select the icons you like and add them to the shopping cart, then add the icons to the current project in the shopping cart (if there is no project yet, you can directly create the icon and then add it), and then add it to the shopping cart. Icons and styles are downloaded locally.
The demonstration is as follows:

Unzip the downloaded compressed package, copy

iconfont.css to the common directory, and rename it to icon.css, and Modify the content, delete the compatibility with other platforms, and only keep the base64 images, similar to the following:

@font-face {font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAABpQAAAKNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBIIEfATYCJAMICwYABCAFhG0HMBvFBcguMRUZ6a5kMRUuoHi5tW+/rgBAGIKnb7/fnd15Nh8Ti6JZtCQaoXySeLSuiUMjUZJYxUt4/7umuZYP3fR/viyrBkw/6fU4l5IbCsdGbXbCt27AitTkEqCAqwECzMynzSFqL2aS/uqBP8B/f9w7/b8BFMh8512Oa2+a1AUYTw5wL1xLuEBCb5hevsCB2A0BjDoZ0uzg+DxJoehBAsi6yXZIquBAURaOEcKGmYocE7HbcW0IR9H35Z9SKXAEHp21sIF90v1DE8VBGgcITghofgB4oAdBQVYaA3OiCCNEscUxmhAUReDr8LEKOaocYX+dTs0BoAYynonpWI9K6wBQSIUBhEmE17d6yWlm+uPnwtPv0uPP4v2Xc5bJZG+Rpc0y+Qx2cSOS7V6cnZcvXVK6cG4qsdcGePEtChB7yc7w2SlnNe20rD29ytTbkVuVrU63u641tfd8sU/ua+6gZmttpz9DwO7mbRmj/ylFAfjI8IGoT5pV4rMgPodR4F8xB5apYGu104vlC+AYEL2HHMOAFGQp8jlVUnpjESGm9PZMEbUZeGJaUMX3QECGEQiJmQCj29D8DMW4KKIJ0OUUgFDgBhx5PICnQAdV/AcElPmDkIKiYKxVvGKGtkx5huOOwH3YbYG557nUqoUcp88iq9k7PM+OiIvIQ9MNxVyhHB5CF/kSY8I6KwlBgXLPgUGwH9q2Bz73qrgnchUh/HI+T5tulNvzHCIzg0M7BLQP7GoBpj0eFw2qC3Ll87MQU2PbwTtKcvpFiAuZ7YOinMIAdEjgDip5lENCdUyJIFCA4jwOMAi6IZvNA/zmblVoj5BTmeDzleVNJTpUkNte5PzdGsDQUiemkyfcqHi1FhICAAAA') format('woff2');}.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}.icon-shouye:before {
  content: "\e681";}

Then import font.css in App.vue, as follows:

<script>
	export default {
		onLaunch: function() {
			console.log(&#39;App Launch&#39;)
		},
		onShow: function() {
			console.log(&#39;App Show&#39;)
		},
		onHide: function() {
			console.log(&#39;App Hide&#39;)
		}
	}</script><style>
	/*每个页面公共css */
	/* 官方CSS库 */
	@import url("./common/uni.css");
	/* 自定义图标库 */
	@import url("./common/icon.css");</style>

Then use the imported icon in pages/index/index.vue, as follows:

<template>
	<view>
		<text>Hello</text>
	</view></template><script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}</script><style>
	</style>

Display:

You can see that the icon is displayed and can be customized style.

3. Introducing the CSS animation library

The animation library can choose to use

animate.css (https://animate.style/). Directly access the CDN to download the CSS file, the address is https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css, right-click and select Save As and save, copy it Go to the common directory and import it in App.vue, as follows:

<script>
	export default {
		onLaunch: function() {
			console.log(&#39;App Launch&#39;)
		},
		onShow: function() {
			console.log(&#39;App Show&#39;)
		},
		onHide: function() {
			console.log(&#39;App Hide&#39;)
		}
	}</script><style>
	/*每个页面公共css */
	/* 官方CSS库 */
	@import url("./common/uni.css");
	/* 自定义图标库 */
	@import url("./common/icon.css");
	/* 动画库 */
	@import url("./common/animate.css");</style>

When using it, you need to add a class to the element. Currently, you are using version 4.1.1 of animate.css, and you need to add a basic class

animate__animated, and you also need to add the class animate__animation name according to the selected animation effect, such as animate__rubberBand, the animation name can be in https://animate. Select style/ on the right side of the page and click copy, as follows:

What you get at this time is the animation class name with the prefix

animate__. The demonstration in index.vue is as follows:

<template>
	<view>
		<text>Hello</text>
		<view>
			<view>橡胶带点击效果</view>
		</view>
		<view>
			<view>摆动点击效果</view>
		</view>
		<view>
			<view>向左下角旋转点击效果</view>
		</view>
	</view></template><script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}</script><style></style>

Among them, the hover-class attribute is used to specify the style class when pressed. When

hover-class="none", there is no click. status effect.

The demonstration is as follows:

As you can see, the animation effect is achieved.

说明：
微信小程序对动画效果的支持不高，可以选择Android或者iOS端进行真机测试。

还可以使用v-if条件渲染实现动画效果，或者进行列表渲染时加入动画效果。

二、设置全局属性globalStyle

pages.json文件用来对 uni-app 进行全局配置，定义页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

pages.json如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}}

可以看到，是以对象的形式存储的：
第一个属性是pages，用来定义所有页面，包括路径、样式等；
第二个属性是globalStyle，用于配置全局样式，其属性和含义可参考https://uniapp.dcloud.net.cn/collocation/pages?id=globalstyle。
常见属性及其含义如下：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String	无	导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px
backgroundColorTop	HexColor	#ffffff	顶部窗口的背景色（bounce回弹区域）
backgroundColorBottom	HexColor	#ffffff	底部窗口的背景色（bounce回弹区域）
titleImage	String	无	导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址

pages.json配置如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "Community Dating",
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#FFFFFF"
	}}

页面效果如下：

显然，显示了自定义的全局样式。

三、底部导航栏开发

底部导航栏主要包括社区、动态、消息和我的4个模块，需要准备图标（未选中和选中两种状态），可以在iconfont上选择并下载即可，以我的为例，演示如下：

下载好4组图标并重命名之后，需要在static目录下新建tabbar目录，将这些图标拷贝到该目录下。

配置tabbar时可参考文档https://uniapp.dcloud.net.cn/collocation/pages?id=tabbar，具体配置如下：
（1）在pages目录下新建其他3个页面：
直接右键pages选择新建页面，以news页面为例如下：

并编辑pages/news/news.vue如下：

<template>
	<view>
		动态页	</view></template><script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}</script><style></style>

再配置pages.json如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/news/news",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/msg/msg",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "Community Dating",
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#FFFFFF"
	},
	"tabBar": {
		"color":"#323232",
		"selectedColor":"#ED6384",
		"backgroundColor":"#FFFFFF",
		"borderStyle": "black",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/tabbar/index.png",
				"selectedIconPath": "static/tabbar/indexed.png"
			},
			{
				"pagePath": "pages/news/news",
				"text": "动态",
				"iconPath": "static/tabbar/news.png",
				"selectedIconPath": "static/tabbar/newsed.png"
			},
			{
				"pagePath": "pages/msg/msg",
				"text": "消息",
				"iconPath": "static/tabbar/paper.png",
				"selectedIconPath": "static/tabbar/papered.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tabbar/home.png",
				"selectedIconPath": "static/tabbar/homed.png"
			}
		]
	}}

显示：

显然，已经完成底部导航栏配置。

总结

uni-app项目中App.vue是程序的入口文件，可以导入CSS样式、第三方的图标和动画库，从而加速开发；pages.json文件用于配置页面文件的路径、窗口样式和底部原生tabbar等，全局样式globalStyle也在该文件中配置；实现了项目的社区、动态、消息和我的4个模块的导航栏设置。

The above is the detailed content of uni-app introduces global style introduction and bottom navigation bar development. For more information, please follow other related articles on the PHP Chinese website!