uni-app修仙筆記，煉氣期入門

uni-app官方解釋是一款用vuejs開發(fā)前端應(yīng)用的跨端框架，從官方解釋的第一句話，其實(shí)就可以看出，uni-app集成了vuejs所有特性，然后具有跨端的特性，什么是跨端，通俗理解就是使用uni-app一套代碼開發(fā)h5,App,微信小程序,快應(yīng)用,支付寶小程序，QQ小程序等等。

看到上面uni-app可以開發(fā)多個(gè)平臺(tái)應(yīng)用，是不是內(nèi)心很興奮，what，android，ios程序員是不是要失業(yè)了，千萬不要讓我老板看到這種技術(shù)，我只會(huì)原生ios,android開發(fā),什么？一套代碼代碼多端運(yùn)行？我只是一個(gè)切圖的，我還要做小程序？APP？快應(yīng)用？

除了吃驚，更多的是uni-app簡(jiǎn)直是萬能鑰匙啊，但是面對(duì)復(fù)雜的多端兼容性需求，程序員掉頭發(fā)肯定少不了，特別是小程序那主包不得超過1.5M,總包不得超過2M的要求，你能想像所有的微信小程序都是2M以內(nèi)的，而我一張高清圖都有6M了，除了優(yōu)化再優(yōu)化，沒有更好的選擇。

本文是一篇uni-app入門筆記，uni-app這個(gè)系列大概會(huì)寫十來篇，主要會(huì)從uni-app到云開發(fā)，會(huì)以實(shí)際例子由淺入深認(rèn)識(shí)uni-app與云開發(fā),同時(shí)也是記錄開發(fā)中遇到的一些坑。

正文開始...

在開始本文之前，本文主要以下幾個(gè)方面認(rèn)識(shí)uni-app

uni-app初始化基礎(chǔ)項(xiàng)目有哪些關(guān)鍵目錄

pages.json與mainifest.json文件，探究對(duì)應(yīng)配置項(xiàng)

eazycom全局注冊(cè)組件，條件編譯多端代碼

uni-app與web開發(fā)的區(qū)別

HbuildērX
使用uni-app開發(fā)跨端項(xiàng)目，必不可少的一個(gè)開發(fā)工具就是使用HbuilderX[1]，官方提供了兩種方式創(chuàng)建uni-app

可視化界面，這是官方推薦的首選，使用官方插件時(shí)非常方便

命令行vue-cli，對(duì)于喜歡命令行的，可以用這個(gè)，但個(gè)人認(rèn)為使用可視化界面要高效得多

開始一個(gè)基礎(chǔ)項(xiàng)目
打開HBuilderX，文件>新建>項(xiàng)目選擇一個(gè)uni-app最簡(jiǎn)單的默認(rèn)模版

新建一個(gè)02-uni-demo大概結(jié)構(gòu)就下下面這樣



我們可以看到初始化的目錄結(jié)構(gòu)與我們普通項(xiàng)目沒什么太大的區(qū)別，但還是有些區(qū)別，因?yàn)槲覀兛吹巾?xiàng)目里有uniCloud

在uni-Cloud下主要有兩個(gè)目錄，一個(gè)是database，另一個(gè)是cloudfunctions，這兩個(gè)目錄是云開發(fā)的關(guān)鍵，在開始云開發(fā)前，你必須關(guān)聯(lián)一個(gè)服務(wù)空間[2]。注意在使用之前，我們必須用郵箱注冊(cè)登陸HbuilderX，然后用賬號(hào)登陸uni-Cloud創(chuàng)建一個(gè)空間，不過此空間是免費(fèi)，你只能創(chuàng)建一個(gè)免費(fèi)空間，且云函數(shù)讀取次數(shù)只有500次/天,這量太不夠用了，相信我你一定會(huì)花錢的，但是不得不說也非常便宜。

database這個(gè)目錄是xx.scheme.json文件，當(dāng)我們?cè)谠撃夸浵滦陆╠b schema時(shí)，我們?cè)谇岸隧撁婵梢灾苯邮褂迷坪瘮?shù)連接對(duì)應(yīng)的表

cloudfunctions這個(gè)目錄是存放云函數(shù)與云對(duì)象

關(guān)于云函數(shù),云對(duì)象，還有db schema我會(huì)在后續(xù)的云開發(fā)中陸續(xù)揭開

當(dāng)我們使用HBuilderX創(chuàng)建一個(gè)基礎(chǔ)項(xiàng)目后，我們是怎么運(yùn)行的呢？



當(dāng)我們運(yùn)行到瀏覽器時(shí)，我們就可以打開頁面了



這個(gè)默認(rèn)的頁面路由就是pages/index/index.vue，同時(shí)也是在pages.json中注冊(cè)的第一個(gè)頁面

pages.json
我們?cè)谄胀ǖ膚eb開發(fā)中，我們的路由是會(huì)自己去手動(dòng)注冊(cè)，然后必須掛載在根實(shí)例上。但是uni-app你創(chuàng)建的每一個(gè)頁面會(huì)注冊(cè)在pages.json的pages中

pages.json

{
    "pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dò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,這個(gè)path就是我們的路由地址，但是pages的第一個(gè)就是我們程序默認(rèn)啟動(dòng)的首頁，關(guān)于pages[3]的配置我們會(huì)在后續(xù)中逐一講解，我們也可以去官網(wǎng)看到更多的配置信息

我們嘗試在pages中新建一個(gè)頁面，我們?cè)趐ages右鍵點(diǎn)擊新建頁面



此時(shí)我們?cè)谛陆ǖ捻撁嬷袊L試加點(diǎn)自己的寫的內(nèi)容

pages/about/about.vue

<template>
    <view>
        我是關(guān)于頁面
    </view>
</template>
<script>
    export default {
        data() {
            return {
               
            }
        },
        methods: {}
    }
</script>
<style>
</style>

看到這個(gè)文件我們是不是非常的熟悉，是不是vue的味道？

是的，除了模版根標(biāo)簽是view,在script上所有的鉤子函數(shù)都是與vue沒有任何區(qū)別

在開頭我們就知道uni-app就是使用了vuejs開發(fā)跨端應(yīng)用的，同時(shí)又新增了小程序API與條件編譯，所以你會(huì)看到在使用uni-app開發(fā)小程序時(shí)，你會(huì)看到小程序的API

當(dāng)我們?cè)跒g覽器輸入地址http://localhost:8080/#/pages/about/about時(shí)就可以打開剛才你新建的一個(gè)頁面了






關(guān)于uni-app中的路由跳轉(zhuǎn)主要有以下三種

uni.navigateTo({url: 'xxx?id=123'}); 保留當(dāng)前頁面，前往另一個(gè)非tabBar頁面,可以攜帶參數(shù),當(dāng)前頁面不會(huì)被銷毀，使用這個(gè)api跳轉(zhuǎn)另一個(gè)頁面時(shí)，使用uni.navigateBack返回上一個(gè)頁面，只能打開非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)閉當(dāng)前頁面，前往另一個(gè)頁面,與navigateTo的區(qū)別是，跳轉(zhuǎn)的新頁面不會(huì)有返回操作，只能打開非tabBar頁面

uni.reLaunch關(guān)閉所有頁面，前往指定頁面，可以打開任意頁面

uni.switchTab切換tabBar，只能打開tabBar的路由頁面

關(guān)于這幾個(gè)路由跳轉(zhuǎn)的api觸發(fā)頁面鉤子也會(huì)有所不同

當(dāng)我們使用uni.navigateTo跳轉(zhuǎn)about頁面時(shí)，此時(shí)about頁面的兩個(gè)鉤子會(huì)被觸發(fā)onLoad,onShow。因?yàn)閚avigateTo不會(huì)銷毀當(dāng)前頁面，所以在about頁面返回上一個(gè)頁面時(shí)會(huì)直接從頁面棧中獲取，此時(shí)只會(huì)觸發(fā)onShow不會(huì)觸發(fā)onLoad鉤子

所以此時(shí)你會(huì)遇到一個(gè)場(chǎng)景，A頁面onLoad鉤子請(qǐng)求數(shù)據(jù)，在A頁面列表也編輯進(jìn)入詳情頁保存然后返回，你會(huì)發(fā)現(xiàn)此時(shí)頁面不會(huì)更新，因?yàn)榇藭r(shí)A頁面不會(huì)觸發(fā)onLoad鉤子，所以此時(shí)請(qǐng)求放在onLoad鉤子估計(jì)不太合適，所以要么你把請(qǐng)求放在onShow中，要么就想辦法重新觸發(fā)onLoad而重新觸發(fā)onLoad你可以使用uni.reLaunch

關(guān)于路由跳轉(zhuǎn)鉤子在不同場(chǎng)景都會(huì)有不同的選擇，更多細(xì)節(jié)參考官方文檔router[4]

globalStyle

我們看到基礎(chǔ)配置就有這個(gè)，主要是全局設(shè)置默認(rèn)頁面窗口的基本公用樣式，比如title、導(dǎo)航、不同平臺(tái)的默認(rèn)首頁樣式，一般是pages的第一項(xiàng)為默認(rèn)頁

tabBar

這是我們切換底部tabBar的頁面切換,最關(guān)鍵的就是list項(xiàng)的配置,當(dāng)我們配置底部tabBar后，我們的頁面底部就會(huì)出現(xiàn)三個(gè)切換項(xiàng)，這里的配置是同小程序是一樣的

    {
   ...
      "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這個(gè)選項(xiàng)能減少小程序主包的大小，算是優(yōu)化小程序體積的一種有效手段，因?yàn)樾〕绦蛑靼拗?.5M，總體積不能超過2M，所以我們非常有必要將非tabBar頁面盡可能的分包出去，從而會(huì)減少主包的大小

easycom

在官方文檔上，HBuilderX 2.5.5支持eazycom自動(dòng)引入組件模式，本質(zhì)上就是按照官方規(guī)范，組件就可以自動(dòng)注冊(cè)，并全局使用,在打包后eazycom會(huì)剔除未使用的組件

關(guān)于規(guī)范引入官方一段原話

只要組件安裝在項(xiàng)目根目錄或uni_modules的components目錄下，并符合components/組件名稱/組件名稱.vue或uni_modules/插件ID/components/組件名稱/組件名稱.vue目錄結(jié)構(gòu),就可以不用引用、注冊(cè)，直接在頁面中使用

這段話翻譯的簡(jiǎn)版就是在根目錄，假設(shè)我創(chuàng)建一個(gè)全局組件，在components目錄下創(chuàng)建一個(gè)custEditor的組件

components/custEditor/custEditor.vue這個(gè)組件就只要符合這種文件結(jié)構(gòu)，那么我們就可以在其他頁面上不用局部注冊(cè)，就可以使用

<template>
    <view class="container">
          <custEditor></custEditor>
    </view>
</template>
<script>
    // 這里不用import引入，也不需要在components內(nèi)注冊(cè)custEditor組件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>
另外一個(gè)就是在uni_modules中的符合這樣的文件目錄也會(huì)自動(dòng)被注冊(cè)

uni_modules/uni-badge/components/uni-badge/uni-badge.vue我們注意到所有官方插件都是這種目錄結(jié)構(gòu)，如果你想安裝插件，就直接去官方插件市場(chǎng)搜索導(dǎo)入就可



直接導(dǎo)入你的HBuilderX即可

正常情況如果使用官方插件市場(chǎng)導(dǎo)入，那么會(huì)默認(rèn)支持eazycom自動(dòng)導(dǎo)入組件全局注冊(cè)，而且eazycom是自動(dòng)開啟的，官方提供了可支持自定義配置

"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
這是一個(gè)配置文件，如果是小程序，那么需要配置對(duì)應(yīng)的appid以及對(duì)應(yīng)其他跨端的相關(guān)配置，目前只配置了小程序與web配置，沒有太多復(fù)雜東西，小程序只需要將微信公眾號(hào)新注冊(cè)的小程序appid填入即可

uni-app與web
如果沒有開發(fā)過小程序，貌似這東西很高大上，但其實(shí)并沒有太多新穎，微信小程序開發(fā)是有微信自己的一套語法API,有自己的標(biāo)簽，頁面生命周期鉤子，非常貼近vue語法。

掌握了vueJS與最基礎(chǔ)的web開發(fā)，完全是很容易的上手小程序，而uni-app就是用vuejs語法開發(fā)小程序與跨端應(yīng)用的。

在uni-app頁面布局就是用view標(biāo)簽,在uni-app中，這是一個(gè)內(nèi)置組件，類似web中的div，是一個(gè)視圖容器，在uni-app中根組件必須使用view標(biāo)簽包裹。

當(dāng)然uni-app也提供了其他標(biāo)簽，比如scroll-view，swiper等，這些都是uni-app內(nèi)置的組件，在web開發(fā)中，我們會(huì)使用div,span,img等標(biāo)簽，但是uni-app最基礎(chǔ)的組件就是view，這個(gè)相當(dāng)div，我們使用的uni-app內(nèi)置組件非常有限，一般都是view與text,而在布局樣式上基本沒有什么太大的區(qū)別

在uni-app中提供了uni這樣的api訪問內(nèi)置的一些方法，比如設(shè)置緩存，獲取設(shè)備信息以及藍(lán)牙等設(shè)備信息，與普通不同的web不同的是，uni-app在其他小程序是無法訪問window對(duì)象，當(dāng)只有運(yùn)行h5時(shí)，才是運(yùn)行在瀏覽器環(huán)境里，此時(shí)才可以訪問window,document對(duì)象，否則在其他平臺(tái)會(huì)報(bào)錯(cuò)，所以此時(shí)你可以使用條件編譯來區(qū)分不同的端。

條件編譯
在同一個(gè)工程項(xiàng)目里使用條件編譯有選擇的編譯需要的代碼

下面這塊代碼使用條件編譯，我們發(fā)現(xiàn)是以單行注釋的方式定義編譯條件的，這塊代碼只會(huì)在H5端有作用

// #ifdef H5
window.location.href = 'xxx';
// #endif
在模版中的條件編譯

<!--  #ifdef  H5 -->
  <view>只會(huì)在H5顯示的內(nèi)容</view>
<!--  #endif -->
在css中的條件編譯

/* #ifdef  H5 */
.h5box {
  width: 100%;
  height: 100rpx;
}
/* #endif */
我們只需要// #ifdef %PLATFORM% 開始，以// #endif結(jié)尾就可以標(biāo)注這塊代碼塊的條件編譯

%PLATFORM%的取值參考官方文檔PLATFORM[5]

條件編譯真的是維護(hù)多端差異的一種必要手段，因?yàn)槎喽瞬町愒谕粋€(gè)工程中，我使用該技術(shù)就可區(qū)別化不同端。

最后，最近寫了一個(gè)個(gè)人小程序，前端就是使用uni-app開發(fā)的,后端使用uni-Cloud，有使用官方的插件uni-ui也有uView，登陸注冊(cè)使用的就是官方的uni-id-pages,小程序后臺(tái)使用的是uni-admin開發(fā)，基本實(shí)現(xiàn)了首頁所有模塊的增刪查改。

總結(jié)
主要認(rèn)識(shí)一個(gè)最簡(jiǎn)單的uni-app項(xiàng)目，了解項(xiàng)目基本結(jié)構(gòu)，以及對(duì)HBuilderX創(chuàng)建uni-app的初步認(rèn)識(shí)

在uni-app關(guān)鍵的pages.json與mainifest.json相關(guān)配置項(xiàng)，當(dāng)你新建頁面時(shí)，會(huì)在pages.json的pages注冊(cè)路由，在tabBar中配置底部切換，mainifest主要是小程序端的appid，其他也沒什么太多的配置

eazycom自動(dòng)注冊(cè)全局組件，這種方式主要是遵循官方規(guī)范即可，全局組件主要有uni_moudles與components兩種方式，也可在pages.json中自定義設(shè)置eazycom規(guī)則，默認(rèn)是自動(dòng)啟動(dòng)eazycom

認(rèn)識(shí)uni-app與普通web開發(fā)的一些不同，知道條件編譯可以區(qū)分不同端，使用uni-app幾本內(nèi)置組件布局。小程序開發(fā)并沒那么高大上，門檻也沒有想象那么大，所以有小程序需求，如果是跨端項(xiàng)目，那么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)注微信公眾號(hào) ：web技術(shù)學(xué)苑