uniapp開發小程序總結

1. 新建UI項目

首先，咱們的UI是基於ColorUI，當ColorUI沒有的樣式，就基於Uniapp自帶的UI。因此項目的開始要引入這兩個UI框架。

以下，新建一個uni-ui項目。

再創建一個ColorUI項目。

若是須要觀看ColorUI的效果以便直到本身須要用哪些組件，能夠將其運行起來，以下。

uni-ui同理。這樣只要咱們須要的樣式均可以在這兩個UI取材了。

2. 搭建本身的項目

新建一個本身的uniapp項目，創建完成後。項目結構以下。

接着先引入ColorUI樣式:

• 將ColorUI項目下的colorui目錄，拷貝到本身項目的根目錄下。
• 在本身項目根目錄的App.vue文件下引入兩個css文件，以下

<style>
	/*每一個頁面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";

</style>
複製代碼

• 須要哪一個樣式，能夠到ColorUI項目下審查元素，拷貝對應的class便可。

若是本身想要的樣式ColorUI沒有，則須要引入uni-ui的樣式：

• 將uni-ui項目根目錄下的common複製到本身項目的根目錄
• 在App.vue目錄中引入css文件 最後App.vue相似：

<style>
	/*每一個頁面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import url("common/uni.css");
</style>

複製代碼

自此，UI項目導入完成

3. 一些基礎工做

• 使用tabbar：能夠到uniapp官網找到tabbar部分拷貝過來使用。

• 頁面跳轉、發起請求：到uniapp官網看看，使用uniapp的組件便可
• 若是一個頁面太複雜，建議分紅多個組件。在該頁面目錄下新建一個compoment目錄，在compoment目錄下新建多個組件（vue文件），以下圖所示：

• 引入組件：以下圖所示在須要用到的地方引入組件，甚至還能夠傳值。

4. 頁面佈局

這裏講一些頁面佈局的實用建議。

• 元素是從上到下，獨佔一行的，使用標準流div佈局便可
• 若是元素是須要在一行中排列，則須要浮動float佈局。但浮動佈局不能精確將元素佈局在容器中指定位置，因此須要定位position佈局。可是這種方式須要脫離了文檔流，須要各類clear清除浮動，這種方式落後了。建議使用flex佈局
• 綜上，從上到下佈局使用div，從左到右佈局使用float和position。或者使用flex
• 使用flex的好處不少，能夠在左右佈局中justify-content將元素佈局到指定的位置。所以流行使用該佈局。

推薦教程

有VUE基礎的推薦看下面的教程入門： www.bilibili.com/video/BV1Zt…