uniapp開發小程序的開發規范總結

Posted on by

一、項目結構

在完成uniapp項目的創建之後，其項目目錄結構如下所示。我們下面對項目結構進行簡單的介紹，如果你看完介紹的內容，仍然無法理解，建議您先去學習一下vue。因為uniapp是基於vue核心語法進行開發，所以學習vue是必要的。

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

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

二、開發規范

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

<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的頁面開發遵循 Vue 單文件組件 (SFC) 規范。另外，uniapp不能使用js進行html文檔的DOM操作，請嚴格遵循vue的MVVM的數據綁定開發方式。

組件及接口規范

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

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

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

三、css樣式規范

全局樣式與局部樣式

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

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

uniapp的局部樣式實現是以vue文件為單位的，在某個vue文件內定義的樣式，隻在該vue的渲染范圍內生效。

尺寸響應式

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

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

字體的使用

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

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

如果字體文件大於等於 40kb， 需開發者自己轉換將字體文件轉換成Base64字符串，否則使用將不生效；將轉換之後的Base64字符串粘貼到下文的位置，完成字體的定義。

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

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

請使用flex佈局方式

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

總結

到此這篇關於uniapp開發小程序的開發規范的文章就介紹到這瞭,更多相關uniapp小程序開發規范內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：