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

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

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

最后，一般來說我們還需要手動建立一個components目錄，用于存放vue的components組件。

二、開發(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>
//這里可以書寫css、sass、less等樣式及樣式預處理器
</style>

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

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

組件及接口規(guī)范

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

<view>標簽在uniapp中的含義與標準html中的<div>標簽能力相當如果你希望定義圖片，不能直接使用html中的img，你應該使用uniapp的組件標簽image

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

三、css樣式規(guī)范

全局樣式與局部樣式

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

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

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

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

尺寸響應式

uniapp框架為了更好的適配不同的移動端屏幕，設置了750rpx為屏幕的基準寬度。如果屏幕寬度小，rpx顯示效果會等比縮小；如果屏幕寬度大，rpx顯示效果會等比例放大。舉例說明： 如果設計稿的元素寬度是600px，某元素X的寬度是100px，那么該元素X在uniapp里面設置的寬度應該是：750 * 100 /600 = 125rpx。

如果大家覺得自己手動計算比較麻煩，可以在文件manifest.json中設置transformPx的值為true，項目會自動將px轉(zhuǎn)換為rpx。

字體的使用

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

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

如果字體文件大于等于 40kb， 需開發(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即可。

請使用flex布局方式

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

總結(jié)

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