uni-app

運行到微信開發(fā)者工具需要注意

1. 小程序路徑需要配置，
2. 小程序端口需要開啟

目錄結(jié)構(gòu)

pages // 存放頁面

static // 靜態(tài)資源

uni_modules // 文件夾：用于存放 uniapp 項目的各種依賴文件。

unpackage // 打包文件目錄

App.vue  // 根組件

main.js // 入口文件

manifest.js // 應用配置文件

pages.json // 頁面配置文件

uni.scss  // 內(nèi)置樣式文件

開發(fā)規(guī)范

遵循vue和小程序混合

全局配置樣式

全局 pages.json

"globalStyle": {

}

局部的樣式會覆蓋全局的樣式

https://uniapp.dcloud.net.cn/collocation/pages#style

          {
              "path": "pages/message/message",
			"style": {
				"navigationBarTitleText": "message",
				"navigationBarBackgroundColor": "#00ff00",
				"h5": {
					"titleNView": {
						"backgroundColor": "#aa0000"
					}
				}
			}
              
          } 

可以單獨設(shè)置h5的樣式

tabBar

• tabBar 中的 list 是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。

condition啟動模式

啟動模式配置，僅開發(fā)期間生效，用于模擬直達頁面的場景，如：小程序轉(zhuǎn)發(fā)后，用戶點擊所打開的頁面。

	"condition": { //模式配置，僅開發(fā)期間生效
		"current": 0, //當前激活的模式（list 的索引項）
		"list": [{
			"name": "detail", //模式名稱
			"path": "pages/detail/detail", //啟動頁面，必選
			"query": "interval=400" //啟動參數(shù)，在頁面的onLoad函數(shù)里面得到。
		}]
	},

text組件

是否可選selectable

space 連續(xù)空格

view

hover-class 按下去激活的樣式

button

常用

size

type

pain

disabled

hover-class

屬性說明

image

有默認的寬高 320px 240px

mode的屬于

scaleToFill

不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素

aspectFit

保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。

aspectFill

保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。

樣式問題

注意在 uni-app 中不能使用 * 選擇器。

目前支持的選擇器有：

選擇器

uni-app 提供內(nèi)置 CSS 變量

字體圖標

阿里矢量圖標庫

字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑

@font-face {
	font-family: test1-icon;
	src: url('~@/static/iconfont.ttf');
}

<style>
	@import url("~@/static/fonts/iconfont.css");
	/*每個頁面公共css */

	.c-rpx {
		background: #aa0000;
	}
</style>

scss

要使用先安裝插件scss

uni.scss里面是變量可以全局使用

引用示例

.text {
			color: $uni-color-primary;
		}

事件

可以的傳遞事件 和 自定義參數(shù)

@click($event,params)文章來源地址http://www.zghlxwxcb.cn/news/detail-820694.html

到了這里，關(guān)于#Uniapp：引入fonts&目錄結(jié)構(gòu)&全局樣式&啟動模式&全局變量的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！