一、項(xiàng)目結(jié)構(gòu)

在完成uniapp項(xiàng)目的創(chuàng)建之后，其項(xiàng)目目錄結(jié)構(gòu)如下所示。我們下面對(duì)項(xiàng)目結(jié)構(gòu)進(jìn)行簡(jiǎn)單的介紹，如果你看完介紹的內(nèi)容，仍然無(wú)法理解，建議您先去學(xué)習(xí)一下vue。因?yàn)閡niapp是基于vue核心語(yǔ)法進(jìn)行開(kāi)發(fā)，所以學(xué)習(xí)vue是必要的。

• .hbuilderx是開(kāi)發(fā)該項(xiàng)目使用的工具HBuilderX的開(kāi)發(fā)配置目錄，一般不需要手工修改其內(nèi)容。有了該目錄別人在導(dǎo)入項(xiàng)目的時(shí)候，會(huì)默認(rèn)使用你的開(kāi)發(fā)工具配置信息。因?yàn)槊總€(gè)人使用開(kāi)發(fā)工具的習(xí)慣不同，所以該目錄一般不上傳到版本管理倉(cāng)庫(kù)。
• pages是所有vue頁(yè)面的存放目錄，可以根據(jù)自己的規(guī)劃在pages目錄下面創(chuàng)建子目錄
• static目錄通常存放項(xiàng)目引用的靜態(tài)資源，比如：圖片、圖標(biāo)、字體等
• unpackage各個(gè)平臺(tái)的打包文件存放目錄，項(xiàng)目打包之后的結(jié)果文件就存放在這個(gè)目錄下。
• App.vue是項(xiàng)目的根組件，即Vue單頁(yè)面入口文件，在該頁(yè)面可以監(jiān)聽(tīng)?wèi)?yīng)用級(jí)別的生命周期函數(shù)。
• main.js是項(xiàng)目的js入口文件，將vue頁(yè)面實(shí)例化，并整合vue頁(yè)面所需要的組件插件等內(nèi)容。
• index.html是項(xiàng)目的首頁(yè)，項(xiàng)目的入口頁(yè)面。main.js實(shí)例化之后的vue頁(yè)面結(jié)果，最終將渲染到首頁(yè)中。
• manifest.json是應(yīng)用的配置文件，用于指定應(yīng)用程序的名稱(chēng)、圖標(biāo)、權(quán)限、啟動(dòng)頁(yè)面設(shè)置、插件等信息。
• pages.json是對(duì)應(yīng)用的顯示頁(yè)面進(jìn)行配置，比如文件路徑、窗口樣式、原生導(dǎo)航欄配置等內(nèi)容。
• uni.scss文件主要是用于控制應(yīng)用頁(yè)面的整體顯示風(fēng)格，預(yù)置了一些SCSS的變量，比如文字顏色、背景顏色、邊框顏色、圖片尺寸等等

最后，一般來(lái)說(shuō)我們還需要手動(dòng)建立一個(gè)components目錄，用于存放vue的components組件。

二、開(kāi)發(fā)規(guī)范

遵循Vue 單文件組件 (SFC) 規(guī)范

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
//這里可以書(shū)寫(xiě)css、sass、less等樣式及樣式預(yù)處理器
</style>

• 一個(gè)vue的文件中只能包含一個(gè)頂級(jí)的<template></template>模板
• 一個(gè)vue文件只能包含一個(gè)<script></script>腳本定義
• 一個(gè)vue文件可以包含一個(gè)或多個(gè)<style></style>樣式定義

uniapp的頁(yè)面開(kāi)發(fā)遵循 Vue 單文件組件 (SFC) 規(guī)范。另外，uniapp不能使用js進(jìn)行html文檔的DOM操作，請(qǐng)嚴(yán)格遵循vue的MVVM的數(shù)據(jù)綁定開(kāi)發(fā)方式。

組件及接口規(guī)范

需要注意的是，在uniapp中不能使用標(biāo)準(zhǔn)的html標(biāo)簽，uniapp組件名稱(chēng)及使用方式的定義更貼近微信小程序，優(yōu)先參考：uni-app 組件文檔，可以輔助參考微信小程序組件文檔。比如：

<view>標(biāo)簽在uniapp中的含義與標(biāo)準(zhǔn)html中的<div>標(biāo)簽?zāi)芰ο喈?dāng)如果你希望定義圖片，不能直接使用html中的img，你應(yīng)該使用uniapp的組件標(biāo)簽image

uniapp的接口能力（JS API）非常接近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見(jiàn)uni-app接口規(guī)范

三、css樣式規(guī)范

全局樣式與局部樣式

uni.scss文件中預(yù)置了一些全局樣式scss變量，這些變量用于定義應(yīng)用的整體樣式風(fēng)格，比如：文字顏色、背景顏色、邊框顏色等等。 需要注意的是這個(gè)文件不要隨意修改，如果要更改的話(huà)只能修改變量的值，不要修改變量的名。那么如果我們希望增加一些自定義的全局樣式，應(yīng)該怎么去做呢？參考下面的方法：

• 首先，自己寫(xiě)一個(gè)樣式文件，比如:app.scss ，該文件中自定義樣式書(shū)寫(xiě)。將該文件放置于/static/style目錄下
• 其次在app.scss文件的開(kāi)頭，引入uni.scss文件，引入語(yǔ)句為：@import '~@/uni.scss';
• 最后在App,vue的樣式中，引入這個(gè)自定義全局樣式文件

 <style>
    @import '~@/static/style/app.scss';
 </style>

uniapp的局部樣式實(shí)現(xiàn)是以vue文件為單位的，在某個(gè)vue文件內(nèi)定義的樣式，只在該vue的渲染范圍內(nèi)生效。

尺寸響應(yīng)式

uniapp框架為了更好的適配不同的移動(dòng)端屏幕，設(shè)置了750rpx為屏幕的基準(zhǔn)寬度。如果屏幕寬度小，rpx顯示效果會(huì)等比縮??；如果屏幕寬度大，rpx顯示效果會(huì)等比例放大。舉例說(shuō)明： 如果設(shè)計(jì)稿的元素寬度是600px，某元素X的寬度是100px，那么該元素X在uniapp里面設(shè)置的寬度應(yīng)該是：750 * 100 /600 = 125rpx。

如果大家覺(jué)得自己手動(dòng)計(jì)算比較麻煩，可以在文件manifest.json中設(shè)置transformPx的值為true，項(xiàng)目會(huì)自動(dòng)將px轉(zhuǎn)換為rpx。

字體的使用

uniapp支持字體的引用方式分為2種情況，如果字體文件小于 40kb，uniapp會(huì)自動(dòng)將其轉(zhuǎn)化為 base64 格式；將字體文件放置到static目錄下，然后通過(guò)font-face定義字體。

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

如果字體文件大于等于 40kb， 需開(kāi)發(fā)者自己轉(zhuǎn)換將字體文件轉(zhuǎn)換成Base64字符串，否則使用將不生效；將轉(zhuǎn)換之后的Base64字符串粘貼到下文的位置，完成字體的定義。

@font-face {
    font-family:  'test-icon';
    font-weight: normal;
    font-style: normal;
    src: url(data:font/truetype;charset=utf-8;base64,轉(zhuǎn)換的base64內(nèi)容) format('truetype');  
}

字體的使用方式是通用的css樣式，使用font-family即可。

請(qǐng)使用flex布局方式

為更好的支持跨平臺(tái)，uniapp框架建議使用css的Flex方式布局。

總結(jié)

到此這篇關(guān)于uniapp開(kāi)發(fā)小程序的開(kāi)發(fā)規(guī)范的文章就介紹到這了,更多相關(guān)uniapp小程序開(kāi)發(fā)規(guī)范內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論