個人中心
退出
uni-app修仙筆記，煉氣期入門
uni-app官方解釋是一款用vuejs開發(fā)前端應(yīng)用的跨端框架，從官方解釋的第一句話，其實就可以看出，uni-app集成了vuejs所有特性，然后具有跨端的特性，什么是跨端，通俗理解就是使用uni-app一套代碼開發(fā)h5,App,微信小程序,快應(yīng)用,支付寶小程序，QQ小程序等等。
看到上面uni-app可以開發(fā)多個平臺應(yīng)用，是不是內(nèi)心很興奮，what，android，ios程序員是不是要失業(yè)了，千萬不要讓我老板看到這種技術(shù)，我只會原生ios,android開發(fā),什么？一套代碼代碼多端運行？我只是一個切圖的，我還要做小程序？APP？快應(yīng)用？
除了吃驚，更多的是uni-app簡直是萬能鑰匙啊，但是面對復(fù)雜的多端兼容性需求，程序員掉頭發(fā)肯定少不了，特別是小程序那主包不得超過1.5M,總包不得超過2M的要求，你能想像所有的微信小程序都是2M以內(nèi)的，而我一張高清圖都有6M了，除了優(yōu)化再優(yōu)化，沒有更好的選擇。
本文是一篇uni-app入門筆記，uni-app這個系列大概會寫十來篇，主要會從uni-app到云開發(fā)，會以實際例子由淺入深認識uni-app與云開發(fā),同時也是記錄開發(fā)中遇到的一些坑。
正文開始...
在開始本文之前，本文主要以下幾個方面認識uni-app
uni-app初始化基礎(chǔ)項目有哪些關(guān)鍵目錄
pages.json與mainifest.json文件，探究對應(yīng)配置項
eazycom全局注冊組件，條件編譯多端代碼
uni-app與web開發(fā)的區(qū)別
HbuildērX
使用uni-app開發(fā)跨端項目，必不可少的一個開發(fā)工具就是使用HbuilderX[1]，官方提供了兩種方式創(chuàng)建uni-app
可視化界面，這是官方推薦的首選，使用官方插件時非常方便
命令行vue-cli，對于喜歡命令行的，可以用這個，但個人認為使用可視化界面要高效得多
開始一個基礎(chǔ)項目
打開HBuilderX，文件>新建>項目選擇一個uni-app最簡單的默認模版
新建一個02-uni-demo大概結(jié)構(gòu)就下下面這樣
我們可以看到初始化的目錄結(jié)構(gòu)與我們普通項目沒什么太大的區(qū)別，但還是有些區(qū)別，因為我們看到項目里有uniCloud
在uni-Cloud下主要有兩個目錄，一個是database，另一個是cloudfunctions，這兩個目錄是云開發(fā)的關(guān)鍵，在開始云開發(fā)前，你必須關(guān)聯(lián)一個服務(wù)空間[2]。注意在使用之前，我們必須用郵箱注冊登陸HbuilderX，然后用賬號登陸uni-Cloud創(chuàng)建一個空間，不過此空間是免費，你只能創(chuàng)建一個免費空間，且云函數(shù)讀取次數(shù)只有500次/天,這量太不夠用了，相信我你一定會花錢的，但是不得不說也非常便宜。
database這個目錄是xx.scheme.json文件，當我們在該目錄下新建db schema時，我們在前端頁面可以直接使用云函數(shù)連接對應(yīng)的表
cloudfunctions這個目錄是存放云函數(shù)與云對象
關(guān)于云函數(shù),云對象，還有db schema我會在后續(xù)的云開發(fā)中陸續(xù)揭開
當我們使用HBuilderX創(chuàng)建一個基礎(chǔ)項目后，我們是怎么運行的呢？
當我們運行到瀏覽器時，我們就可以打開頁面了
這個默認的頁面路由就是pages/index/index.vue，同時也是在pages.json中注冊的第一個頁面
pages.json
我們在普通的web開發(fā)中，我們的路由是會自己去手動注冊，然后必須掛載在根實例上。但是uni-app你創(chuàng)建的每一個頁面會注冊在pages.json的pages中
pages.json
{
"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
router跳轉(zhuǎn)
在pages中，我們主要看到有path,這個path就是我們的路由地址，但是pages的第一個就是我們程序默認啟動的首頁，關(guān)于pages[3]的配置我們會在后續(xù)中逐一講解，我們也可以去官網(wǎng)看到更多的配置信息
我們嘗試在pages中新建一個頁面，我們在pages右鍵點擊新建頁面
此時我們在新建的頁面中嘗試加點自己的寫的內(nèi)容
pages/about/about.vue
<template>
<view>
我是關(guān)于頁面
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {}
}
</script>
<style>
</style>
看到這個文件我們是不是非常的熟悉，是不是vue的味道？
是的，除了模版根標簽是view,在script上所有的鉤子函數(shù)都是與vue沒有任何區(qū)別
在開頭我們就知道uni-app就是使用了vuejs開發(fā)跨端應(yīng)用的，同時又新增了小程序API與條件編譯，所以你會看到在使用uni-app開發(fā)小程序時，你會看到小程序的API
當我們在瀏覽器輸入地址http://localhost:8080/#/pages/about/about時就可以打開剛才你新建的一個頁面了
關(guān)于uni-app中的路由跳轉(zhuǎn)主要有以下三種
uni.navigateTo({url: 'xxx?id=123'}); 保留當前頁面，前往另一個非tabBar頁面,可以攜帶參數(shù),當前頁面不會被銷毀，使用這個api跳轉(zhuǎn)另一個頁面時，使用uni.navigateBack返回上一個頁面，只能打開非tabBar頁面
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view @click="goToAbout">前往關(guān)于頁面</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
}
},
onLoad() {
},
methods: {
goToAbout() {
uni.navigateTo({
url:"/pages/about/about"
})
}
}
}
</script>
<style>
</style>
uni.redirectTo關(guān)閉當前頁面，前往另一個頁面,與navigateTo的區(qū)別是，跳轉(zhuǎn)的新頁面不會有返回操作，只能打開非tabBar頁面
uni.reLaunch關(guān)閉所有頁面，前往指定頁面，可以打開任意頁面
uni.switchTab切換tabBar，只能打開tabBar的路由頁面
關(guān)于這幾個路由跳轉(zhuǎn)的api觸發(fā)頁面鉤子也會有所不同
當我們使用uni.navigateTo跳轉(zhuǎn)about頁面時，此時about頁面的兩個鉤子會被觸發(fā)onLoad,onShow。因為navigateTo不會銷毀當前頁面，所以在about頁面返回上一個頁面時會直接從頁面棧中獲取，此時只會觸發(fā)onShow不會觸發(fā)onLoad鉤子
所以此時你會遇到一個場景，A頁面onLoad鉤子請求數(shù)據(jù)，在A頁面列表也編輯進入詳情頁保存然后返回，你會發(fā)現(xiàn)此時頁面不會更新，因為此時A頁面不會觸發(fā)onLoad鉤子，所以此時請求放在onLoad鉤子估計不太合適，所以要么你把請求放在onShow中，要么就想辦法重新觸發(fā)onLoad而重新觸發(fā)onLoad你可以使用uni.reLaunch
關(guān)于路由跳轉(zhuǎn)鉤子在不同場景都會有不同的選擇，更多細節(jié)參考官方文檔router[4]
globalStyle
我們看到基礎(chǔ)配置就有這個，主要是全局設(shè)置默認頁面窗口的基本公用樣式，比如title、導(dǎo)航、不同平臺的默認首頁樣式，一般是pages的第一項為默認頁
tabBar
這是我們切換底部tabBar的頁面切換,最關(guān)鍵的就是list項的配置,當我們配置底部tabBar后，我們的頁面底部就會出現(xiàn)三個切換項，這里的配置是同小程序是一樣的
{
...
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"list": [{
"pagePath": "pages/index/index",
"text": "Web技術(shù)",
"value": "1"
},
{
"pagePath": "pages/engineer/engineer",
"text": "工程化",
"value": "0"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"value": "2"
}
]
}
}
subPackages這個選項能減少小程序主包的大小，算是優(yōu)化小程序體積的一種有效手段，因為小程序主包限制1.5M，總體積不能超過2M，所以我們非常有必要將非tabBar頁面盡可能的分包出去，從而會減少主包的大小
easycom
在官方文檔上，HBuilderX 2.5.5支持eazycom自動引入組件模式，本質(zhì)上就是按照官方規(guī)范，組件就可以自動注冊，并全局使用,在打包后eazycom會剔除未使用的組件
關(guān)于規(guī)范引入官方一段原話
只要組件安裝在項目根目錄或uni_modules的components目錄下，并符合components/組件名稱/組件名稱.vue或uni_modules/插件ID/components/組件名稱/組件名稱.vue目錄結(jié)構(gòu),就可以不用引用、注冊，直接在頁面中使用
這段話翻譯的簡版就是在根目錄，假設(shè)我創(chuàng)建一個全局組件，在components目錄下創(chuàng)建一個custEditor的組件
components/custEditor/custEditor.vue這個組件就只要符合這種文件結(jié)構(gòu)，那么我們就可以在其他頁面上不用局部注冊，就可以使用
<template>
<view class="container">
<custEditor></custEditor>
</view>
</template>
<script>
// 這里不用import引入，也不需要在components內(nèi)注冊custEditor組件。template里就可以直接用
export default {
data() {
return {
}
}
}
</script>
另外一個就是在uni_modules中的符合這樣的文件目錄也會自動被注冊
uni_modules/uni-badge/components/uni-badge/uni-badge.vue我們注意到所有官方插件都是這種目錄結(jié)構(gòu)，如果你想安裝插件，就直接去官方插件市場搜索導(dǎo)入就可
直接導(dǎo)入你的HBuilderX即可
正常情況如果使用官方插件市場導(dǎo)入，那么會默認支持eazycom自動導(dǎo)入組件全局注冊，而且eazycom是自動開啟的，官方提供了可支持自定義配置
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目錄內(nèi)的vue文件
"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules內(nèi)的vue文件
}
}
mainifest.json
這是一個配置文件，如果是小程序，那么需要配置對應(yīng)的appid以及對應(yīng)其他跨端的相關(guān)配置，目前只配置了小程序與web配置，沒有太多復(fù)雜東西，小程序只需要將微信公眾號新注冊的小程序appid填入即可
uni-app與web
如果沒有開發(fā)過小程序，貌似這東西很高大上，但其實并沒有太多新穎，微信小程序開發(fā)是有微信自己的一套語法API,有自己的標簽，頁面生命周期鉤子，非常貼近vue語法。
掌握了vueJS與最基礎(chǔ)的web開發(fā)，完全是很容易的上手小程序，而uni-app就是用vuejs語法開發(fā)小程序與跨端應(yīng)用的。
在uni-app頁面布局就是用view標簽,在uni-app中，這是一個內(nèi)置組件，類似web中的div，是一個視圖容器，在uni-app中根組件必須使用view標簽包裹。
當然uni-app也提供了其他標簽，比如scroll-view，swiper等，這些都是uni-app內(nèi)置的組件，在web開發(fā)中，我們會使用div,span,img等標簽，但是uni-app最基礎(chǔ)的組件就是view，這個相當div，我們使用的uni-app內(nèi)置組件非常有限，一般都是view與text,而在布局樣式上基本沒有什么太大的區(qū)別
在uni-app中提供了uni這樣的api訪問內(nèi)置的一些方法，比如設(shè)置緩存，獲取設(shè)備信息以及藍牙等設(shè)備信息，與普通不同的web不同的是，uni-app在其他小程序是無法訪問window對象，當只有運行h5時，才是運行在瀏覽器環(huán)境里，此時才可以訪問window,document對象，否則在其他平臺會報錯，所以此時你可以使用條件編譯來區(qū)分不同的端。
條件編譯
在同一個工程項目里使用條件編譯有選擇的編譯需要的代碼
下面這塊代碼使用條件編譯，我們發(fā)現(xiàn)是以單行注釋的方式定義編譯條件的，這塊代碼只會在H5端有作用
// #ifdef H5
window.location.href = 'xxx';
// #endif
在模版中的條件編譯
<!-- #ifdef H5 -->
<view>只會在H5顯示的內(nèi)容</view>
<!-- #endif -->
在css中的條件編譯
/* #ifdef H5 */
.h5box {
width: 100%;
height: 100rpx;
}
/* #endif */
我們只需要// #ifdef %PLATFORM% 開始，以// #endif結(jié)尾就可以標注這塊代碼塊的條件編譯
%PLATFORM%的取值參考官方文檔PLATFORM[5]
條件編譯真的是維護多端差異的一種必要手段，因為多端差異在同一個工程中，我使用該技術(shù)就可區(qū)別化不同端。
最后，最近寫了一個個人小程序，前端就是使用uni-app開發(fā)的,后端使用uni-Cloud，有使用官方的插件uni-ui也有uView，登陸注冊使用的就是官方的uni-id-pages,小程序后臺使用的是uni-admin開發(fā)，基本實現(xiàn)了首頁所有模塊的增刪查改。
總結(jié)
主要認識一個最簡單的uni-app項目，了解項目基本結(jié)構(gòu)，以及對HBuilderX創(chuàng)建uni-app的初步認識
在uni-app關(guān)鍵的pages.json與mainifest.json相關(guān)配置項，當你新建頁面時，會在pages.json的pages注冊路由，在tabBar中配置底部切換，mainifest主要是小程序端的appid，其他也沒什么太多的配置
eazycom自動注冊全局組件，這種方式主要是遵循官方規(guī)范即可，全局組件主要有uni_moudles與components兩種方式，也可在pages.json中自定義設(shè)置eazycom規(guī)則，默認是自動啟動eazycom
認識uni-app與普通web開發(fā)的一些不同，知道條件編譯可以區(qū)分不同端，使用uni-app幾本內(nèi)置組件布局。小程序開發(fā)并沒那么高大上，門檻也沒有想象那么大，所以有小程序需求，如果是跨端項目，那么uni-app是一種比較可靠的技術(shù)方案
本文示例code example[6]
參考資料
[1]
HbuilderX： https://uniapp.dcloud.net.cn/quickstart-hx.html
[2]
服務(wù)空間： https://unicloud.dcloud.net.cn/
[3]
pages： https://uniapp.dcloud.net.cn/collocation/pages.html#pages
[4]
router： https://uniapp.dcloud.net.cn/api/router.html#
[5]
PLATFORM： https://uniapp.dcloud.net.cn/tutorial/platform.html
[6]
code example： https://github.com/maicFir/lessonNote/tree/master/uni-app/02-uni-demo
作者：Maic
歡迎關(guān)注微信公眾號 ：web技術(shù)學(xué)苑
分類導(dǎo)航