往期熱門文章：
1、神級 IDEA 插件，能讓你的代碼飛起來！
2、ULID - 一種比UUID更好的方案
3、真心被Spring框架折服！不愧是Java開發(fā)之王！
4、Spring Boot 實現(xiàn)萬能文件在線預覽，已開源，真香??！
5、“分庫分表" ？選型要慎重，否則會失控！

一、uni-app到底是什么

1. 開發(fā)者數(shù)量與案例數(shù)量更多

2. 跨平臺能力與擴展靈活性更強

• 開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android及各種小程序、快應用等多個平臺。
• 在跨平臺的同時，通過條件編譯和平臺特有API調用，可以“優(yōu)雅”地為某平臺編寫個性化代碼，調用專有能力而不影響其他平臺。
• 支持原生代碼混寫和原生SDK集成。

3. 性能體驗優(yōu)秀

• 體驗更好的Hybrid框架，加載新頁面時速度更快。
• App端支持Weex原生渲染，可支撐更流暢的用戶體驗。
• 小程序端的性能優(yōu)于市場其他框架。

4. 周邊生態(tài)豐富

• 插件市場擁有數(shù)千款插件。
• 支持NPM（Node Package Manager，Node.js包管理和分發(fā)工具），支持小程序組件和SDK，兼容mpvue組件和項目，兼容Weex組件。
• 微信生態(tài)的各種SDK可直接用于跨平臺App。

5. 學習成本低 基于通用的前端技術棧，采用Vue語法和微信小程序API，無額外學習成本。

6. 開發(fā)成本低

• 招聘、管理、測試各方面的成本都大幅下降。
• HBuilderX是高效開發(fā)神器，熟練掌握后研發(fā)效率至少翻倍。

二、 uni-app 環(huán)境搭建

2.1　下載與使用 HBuilder X 開發(fā)者工具

2.2　創(chuàng)建項目

2.2.1 通過 HBuilder X 可視化界面創(chuàng)建項目

2.2.2 通過 vue-cli 命令行創(chuàng)建項目

npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue 項目名稱

vue create -p dcloudio/uni-preset-vue#alpha 項目名稱

npm run dev:%PLATFORM% //運行項目
npm run build:%PLATFORM% //發(fā)布項目

npm run dev:mp-weixin //運行微信小程序
npm run build:mp-weixin //發(fā)布微信小程序

2.3 　App 真機運行

2.3.1　真機運行

2.3.2　打包發(fā)行

2.4 　uni-app 微信小程序調試

2.4.1　下載微信小程序開發(fā)者工具

2.4.2  運行項目

2.4.3　發(fā)行小程序

2.5　H5 運行與發(fā)行

2.5.1　運行項目

2.5.2　發(fā)行項目

三、 尺寸單位、Flex布局與背景圖片

3.1　Flex 布局

3.1.1 Flex 布局概述

.box{
 display: flex;
}

.box{
 display: inline-flex;
}

3.1.2　容器的屬性

3.1.3　項目的屬性

3.2 背景圖片

3.2.1　使用本地背景圖片的問題

.test2 {
 background-image: url('~@/static/logo.png');
}

3.2.2　代碼演示及把圖片轉換為 base64 格式

<template>
<view>
 <view class="bg"></view>
</view>
</template>
<script>
</script>
<style>
 .bg{
 width:200rpx;
 height:200rpx;
 background-image: url("~@/static/images/1.jpg");
 background-size:100%
 }
</style>

往期熱門文章：
1、JDK 19 / Java 19 正式發(fā)布，虛擬線程來了！
2、手擼一個讀寫分離中間件
3、Spring Boot官宣：正式棄用 Java 8 啦
4、MySQL 上億大表如何優(yōu)化？
5、我找到了一個快速定位Spring Boot接口超時問題的神器！
6、很不起眼的6個bug，90%的程序員就算寫了10年代碼也肯定都踩過！
7、一個程序員的水平能差到什么程度？
8、MyBatis批量插入幾千條數(shù)據(jù)慎用foreach
9、Spring Boot加一個注解，輕松實現(xiàn) Redis 分布式鎖
10、面試官問：select......for update會鎖表還是鎖行？