uni-app

223 阅读1分钟

1.官网 uniapp.dcloud.net.cn/

创建项目 自带 scss 
pages 
插件市场安装的插件都在 components 下面   ( 如果没这个目录 自己创建同名即可 )
**pages.json 常用配置 (包含隐藏某些页面导航栏)**
{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/home/home"
			// "style": {
			// 	// 可以单独隐藏某一页的导航栏
			// 	"navigationStyle": "custom",
			// 	"app-plus": {
			// 		"titleNView": false
			// 	}
			// }
		}, {
			"path": "pages/hengping/hengping"
		}, {
			"path": "pages/shipin/shipin",
			"style": {
				"navigationBarTitleText": "视频"
			}
		}, {
			"path": "pages/sousuo/sousuo",
			"style": {
				"navigationBarTitleText": "搜索"
			}
		}, {
			"path": "pages/wode/wode",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "懂你找图",
		"navigationBarBackgroundColor": "#000",
		"backgroundColor": "#F8F8F8"
		// 可以在这里设置全局隐藏导航栏 (也可以单个页面设置)
		// "navigationStyle":"custom",
		// "app-plus":{
		// 	"titleView":false
		// }
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
		"list": [{
			"pagePath": "pages/home/home",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "首页"
		}, {
			"pagePath": "pages/hengping/hengping",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "横屏"
		}, {
			"pagePath": "pages/shipin/shipin",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "视频"
		}, {
			"pagePath": "pages/sousuo/sousuo",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "搜索"
		}, {
			"pagePath": "pages/wode/wode",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "我的"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	}
}

2.项目中使用字体图标 (本地下载的方式)

在阿里图表库 下载到本地 

  • 新建一个文件夹存放
  • 在main.js中引入 css 和 js
import './styles/iconfont/iconfont.css'
import './styles/iconfont/iconfont.js'

  • 代码中的使用
<i class="iconfont iconbianzu2"></i>
<text class="iconfont iconyanzhengma icon1"></text>
添加样式
.icon1{
	color: red;
	font-size: 50rpx;
}