??前言

本篇文章是我的 uni-app 專欄的第一篇文章，這個(gè)專欄主要是分享和介紹從零到一學(xué)習(xí)和使用的 uni-app 的筆記和個(gè)人經(jīng)驗(yàn)。通過個(gè)人的學(xué)習(xí)經(jīng)驗(yàn)和工作經(jīng)驗(yàn)來給大家分享關(guān)于 uni-app 開發(fā)的技巧，以及快速入門的訣竅等等。

?關(guān)于專欄

本篇文章是我的 uni-app 專欄的第二篇文章，這個(gè)專欄主要是分享和介紹從零到一學(xué)習(xí)和使用的 uni-app 的筆記和個(gè)人經(jīng)驗(yàn)。通過個(gè)人的學(xué)習(xí)經(jīng)驗(yàn)和工作經(jīng)驗(yàn)來給大家分享關(guān)于 uni-app 開發(fā)的技巧，以及快速入門的訣竅等等。

專欄主頁：uni-app_黛琳ghz的博客-CSDN博客

??什么是 uni-app

官方地址：uni-app 官網(wǎng)
借用官網(wǎng)的話，uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到 iOS 、 Android 、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。除此之外，uni-app 還有很多優(yōu)勢。

Uni-app 采用了基于 Vue.js 的開發(fā)模式，通過編寫統(tǒng)一的前端代碼，再通過編譯器將代碼轉(zhuǎn)化為各個(gè)平臺(tái)所需的原生 API 調(diào)用，從而實(shí)現(xiàn)了一次編寫多端運(yùn)行的效果。具體而言，Uni-app 在不同平臺(tái)上會(huì)使用不同的渲染引擎來渲染頁面，如在小程序平臺(tái)上使用小程序的渲染引擎，在 Web 平臺(tái)上使用Vue.js的虛擬 DOM 渲染。這樣開發(fā)者只需要學(xué)習(xí)一種語法和組件庫，就可以開發(fā)出同時(shí)適用于多個(gè)平臺(tái)的應(yīng)用。

Uni-app 提供了一系列的組件和 API ，使得開發(fā)者可以方便地調(diào)用各個(gè)平臺(tái)的原生功能，比如相機(jī)、地理位置、文件系統(tǒng)等。此外，Uni-app 還支持插件市場，開發(fā)者可以在市場中找到各種插件和擴(kuò)展，豐富應(yīng)用的功能。

Uni-app 對于開發(fā)者來說具有一定的學(xué)習(xí)曲線，需要了解 Vue.js 和各平臺(tái)的特點(diǎn)和限制，但相對于分別使用不同的開發(fā)框架來開發(fā)不同平臺(tái)的應(yīng)用，Uni-app 可以顯著減少開發(fā)成本和維護(hù)工作量，提高開發(fā)效率。

總而言之，Uni-app 是一種用于跨平臺(tái)開發(fā)的框架，通過一套代碼實(shí)現(xiàn)多端運(yùn)行，幫助開發(fā)者更快速、高效地構(gòu)建出適用于不同平臺(tái)的應(yīng)用程序。

從上面 uni-app 功能框架圖可看出，uni-app 在跨平臺(tái)的過程中，不犧牲平臺(tái)特色，可優(yōu)雅的調(diào)用平臺(tái)專有能力，真正做到海納百川、各取所長。一套代碼，同時(shí)運(yùn)行到多個(gè)平臺(tái)。

??創(chuàng)建第一個(gè) uni-app 項(xiàng)目

通過上面的介紹，我們可以大致了解什么是 uni-app 了，接下來我們通過實(shí)際操作來學(xué)習(xí)和快速上手 uni-app。

注意： 快速上手 uni-app 需要的一定知識(shí)儲(chǔ)備前提，包括有前端基礎(chǔ)（三件套）、Vue基礎(chǔ)、微信小程序基礎(chǔ)…

??前期工作

上面注意中也說到了，需要一定的知識(shí)儲(chǔ)備，所以這里就不贅述了相關(guān)基礎(chǔ)內(nèi)容了，比如說 node 安裝、Vue環(huán)境搭建、腳手架配置、編譯器安裝等等。這里提及一下，關(guān)于 uni-app 開發(fā)的主流編譯器——HBuilderX。

HBuilderX，H 是 HTML 的首字母，Builder 是構(gòu)造者，X 是 HBuilder 的下一代版本。我們也簡稱 HX。 HX 是輕如編輯器、強(qiáng)如 IDE 的合體版本（下面統(tǒng)一簡稱為 hb）。

官方地址：HBuilderX-高效極客技巧 。

??創(chuàng)建項(xiàng)目（熟悉默認(rèn)項(xiàng)目、結(jié)構(gòu)）

雖然如此，但是 hb 的界面，功能，主題顏色都不是很習(xí)慣，而且我還是用習(xí)慣了 vscdoe 。因此接下來我們先用 hb 來創(chuàng)建項(xiàng)目達(dá)到快速上手的階段，再去研究如何在 vscode 上面編寫開發(fā) uni-app 的項(xiàng)目。接下來，通過下面的圖片和文字描述，創(chuàng)建一個(gè) uni-app 項(xiàng)目。

首先打開 hb ，點(diǎn)擊文件 => 新建 => 項(xiàng)目，然后創(chuàng)建一個(gè) uni-app，填寫好項(xiàng)目名稱、項(xiàng)目路徑，然后選擇默認(rèn)模板，然后這里選擇 Vue2 版本，最后創(chuàng)建項(xiàng)目。


創(chuàng)建成功后，項(xiàng)目的目錄結(jié)構(gòu)如下圖。

在此之前，我們先認(rèn)識(shí)和熟悉一下默認(rèn)的目錄結(jié)構(gòu)有哪些內(nèi)容。我們根據(jù)下面這個(gè)示例來了解。

├── components             // 存放可復(fù)用的組件
│   ├── my-component.vue   // 示例組件
├── pages                  // 存放頁面文件
│   ├── index              // 示例首頁
│   │   ├── index.vue      // 示例首頁的 Vue 組件
│   │   ├── main.js        // 示例首頁的入口文件
├── static                 // 存放靜態(tài)資源文件
├── store                  // 存放 Vuex 狀態(tài)管理相關(guān)文件
│   ├── index.js           // 示例的 Vuex Store
├── App.vue                // 應(yīng)用程序的根 Vue 組件
├── main.js                // 應(yīng)用程序的主入口文件
├── manifest.json          // uni-app 的配置文件
├── pages.json             // 頁面配置文件
├── uni.promisify.adaptor.js// 頁面配置文件
└── uni.scss               // 全局樣式文件

其中比較陌生的是 uni.promisify.adaptor.js 這個(gè)文件，它是一個(gè)用于將回調(diào)函數(shù)轉(zhuǎn)換為 Promise 的適配器文件。在 uni-app 中，許多 API（如網(wǎng)絡(luò)請求、文件讀寫等）通常采用了傳統(tǒng)的回調(diào)函數(shù)方式來處理異步操作，而使用 Promise 則可以更便捷地處理異步操作和鏈?zhǔn)秸{(diào)用。

uni.addInterceptor({
  returnValue (res) {
    if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
      return res;
    }
    return new Promise((resolve, reject) => {
      res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
    });
  },
});

上述代碼是默認(rèn)生成的代碼，這段代碼是在 uni-app 中使用 uni.addInterceptor 方法注冊一個(gè)攔截器，用于統(tǒng)一處理異步接口返回值。

攔截器函數(shù)中的 returnValue 方法會(huì)在每個(gè)異步接口的返回結(jié)果被處理之前調(diào)用。該方法接收一個(gè)參數(shù) res，表示異步接口的返回值。

??運(yùn)行項(xiàng)目

根據(jù)上面的操作，創(chuàng)建完項(xiàng)目以后，我們開始運(yùn)行項(xiàng)目。在頭部導(dǎo)航欄找到運(yùn)行，點(diǎn)擊運(yùn)行到瀏覽器 => Chrome（運(yùn)行到谷歌瀏覽器）。

正在編譯中。

運(yùn)行成功。

查看運(yùn)行效果。

同時(shí)也可以運(yùn)行到微信開發(fā)者工具中。在此之前，需要提前配置好相關(guān)的設(shè)置，打開微信開發(fā)者工具，然后點(diǎn)擊設(shè)置按鈕（齒輪）。

然后點(diǎn)擊安全選項(xiàng)，點(diǎn)擊打開服務(wù)端口。

在頭部導(dǎo)航欄找到運(yùn)行，點(diǎn)擊運(yùn)行到小程序模擬器 => 微信開發(fā)者工具。

正在編譯中。

查看運(yùn)行效果。

??最后

到此就是本篇文章的全部內(nèi)容了，通過這篇文章我們可以快速了解學(xué)習(xí) uni-app ，包括了介紹、項(xiàng)目創(chuàng)建、項(xiàng)目運(yùn)行以及目錄結(jié)構(gòu)的介紹等等。這篇文章同時(shí)也是博主 uni-app 專欄的開篇文章，后續(xù)會(huì)不斷的更新更多關(guān)于 uni-app 的干貨、實(shí)戰(zhàn)經(jīng)驗(yàn)、學(xué)習(xí)經(jīng)驗(yàn)，期待你的關(guān)注和留言。

??文末送書

四步菜鳥到高手，Python編程很簡單
作為一種極其流行的編程語言，Python 已經(jīng)成為了當(dāng)今最為重要的生產(chǎn)力工具之一。無論小學(xué)生還是各行各業(yè)的從業(yè)人員，都開始學(xué)習(xí) Python 編程。這種編程語言在許多領(lǐng)域中都有廣泛的應(yīng)用，因此 Python 編程已經(jīng)成為了許多職業(yè)的必備能力或者加分項(xiàng)。

然而，在市面上的 Python 入門書籍中，存在著許多通?。喝缰R(shí)點(diǎn)堆砌、雜亂無章、學(xué)習(xí)曲線陡峭、案例過于炫技等問題，這讓許多新入門的朋友感到無從下手，不知道該如何選擇一本好的入門書籍。

針對這個(gè)問題，我向大家推薦 《Python之光》 這本書，它以通俗易懂的方式，幫助讀者快速掌握Python語言的最新特性、最新編程方法和最佳實(shí)踐。

通過學(xué)習(xí)這本書，讀者將具備項(xiàng)目實(shí)戰(zhàn)能力，能夠運(yùn)用 Python 解決實(shí)際的工作問題。與其他的入門書籍不同的是，《Python之光》 不僅僅是簡單的知識(shí)堆積，而是從總到分，從原理到細(xì)節(jié)，從理論到實(shí)踐，按照讀者的學(xué)習(xí)心理層層遞進(jìn)。

同時(shí)，該書的應(yīng)用案例也非常有代表性，包括數(shù)據(jù)科學(xué)（數(shù)據(jù)處理、數(shù)據(jù)分析、數(shù)據(jù)可視化）、辦公自動(dòng)化（Word、Excel的操作）、圖形及界面、Web 開發(fā)等領(lǐng)域，并且附有詳細(xì)的代碼講解。

《Python之光》 將重新定義Python的學(xué)習(xí)方式，幫助讀者更好地應(yīng)用 Python 進(jìn)入實(shí)際工作中。適配版本：本書基于Python 3.11（本書代碼最低適配版本Python3.10）

本書亮點(diǎn):

• 零基礎(chǔ)，盡量不使用專業(yè)詞匯，不需要任何背景知識(shí)；
• 語言通俗易懂，講解深入淺出，內(nèi)容詳略得當(dāng)；
• 代碼簡潔，變量命名盡量使用簡單單詞；
• 知識(shí)全面，講解精練，涵蓋最新的語言特性；
• 知識(shí)結(jié)構(gòu)設(shè)計(jì)合理，學(xué)習(xí)曲線平滑；
• 面向應(yīng)用，講解必備的第三方庫，配有經(jīng)典、實(shí)用的案例。

??參與方式

《Python之光：Python編程入門與實(shí)戰(zhàn)》免費(fèi)包郵送出 2 本！

抽獎(jiǎng)方式：評(píng)論區(qū)隨機(jī)抽取 2 位小伙伴免費(fèi)送出！
參與方式：關(guān)注博主、點(diǎn)贊、收藏、評(píng)論區(qū)評(píng)論 “人生苦短，我用python！” （切記要點(diǎn)贊+收藏，否則抽獎(jiǎng)無效，每個(gè)人最多評(píng)論三次?。?br>活動(dòng)截止時(shí)間：2023-08-1 20:00:00
京東自營店購買鏈接：https://item.jd.com/14065766.html#none

名單公布時(shí)間：2023-08-1 22:00:00

文章來源地址http://www.zghlxwxcb.cn/news/detail-611940.html

到了這里，關(guān)于uni-app 經(jīng)驗(yàn)分享，從入門到離職（一）——初始 uni-app，快速上手（文末送書福利1.0）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！