1- uni-app 簡介

---

1.1 介紹

uni-app 是一個使用 Vue.js 開發所有前端應用的框架。 開發者編寫一套代碼，可發布到 iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。

詳細的 uni-app 官方文檔，請翻閱 https://uniapp.dcloud.net.cn/

1.2 總結

由dcloud公司開發的 多端融合框架，1次開發，多端運行;

競品：apiCloud ,appCan,Codova

技術架構：Vue語法+小程序的api

多端混合開發Hybrid

• App端
  • nvue(原生view)
  • native.js(js原生溝通的橋梁)
  • weex
  • 內置ios/安卓的模塊使用
• H5端（h5專用api）
• 各種小程序（微信為主）

2- 工具

---

2.1 前言

準備工具：

• HbuilderX(開發與編譯工具)
• 微信開發工具（微信小程序預覽測試）
• 安卓模擬器/真機（運行app）

2.2 HbuilderX

uni-app 官方推薦使用 HBuilderX 來開發 uni-app 類型的項目。

可以根據自己的喜好，選擇喜歡的編輯器！

2.2.1 下載安裝 HbuilderX

訪問 HBuilderX 的官網首頁 https://www.dcloud.io/hbuilderx.html

點擊首頁的DOWNLOAD按鈕

選擇下載正式版-> App 開發版

將下載的zip包進行解壓縮

將解壓之后的文件夾，存放到純英文的目錄中（且不能包含括號等特殊字符）

雙擊HBuilderX.exe即可啟動 HBuilderX

2.3 微信開發工具

這個我們學微信小程序的時候，已經安裝過了，此處不再贅述…

不太明白的小伙伴，可以看這篇博客 【微信小程序】小程序使用詳細教程（建議收藏）

2.4 安卓模擬器/真機

針對這個，小媛下載了 木木模擬器，小伙伴可以安裝自己喜歡的模擬器。

木木模擬器網址https://mumu.163.com/

安裝步驟此處不再贅述…

3- 新建uni-app項目

---

3.1 新建項目

文件 -> 新建 -> 項目

填寫項目基本信息

項目創建成功

3.2 界面介紹

3.2.1 目錄結構

一個 uni-app 項目，默認包含如下目錄及文件：

┌─components uni-app組件目錄 │ └─comp-a.vue 可復用的a組件 ├─pages 業務頁面文件存放的目錄 │ ├─index │ │ └─index.vue index頁面 │ └─list │ └─list.vue list頁面 ├─static 存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放于此 ├─main.js Vue初始化入口文件 ├─App.vue 應用配置，用來配置小程序的全局樣式、生命周期函數等 ├─manifest.json 配置應用名稱、appid、logo、版本等打包信息 └─pages.json 配置頁面路徑、頁面窗口樣式、tabBar、navigationBar 等頁面類信息

3.2.2 頁面介紹

4- 運行uni-app項目

---

4.1 運行到微信開發者

把項目運行到微信開發者工具：

填寫自己的微信小程序的 AppID：

在 HBuilderX 中，配置“微信開發者工具”的安裝路徑：

在微信開發者工具中，通過設置 -> 安全設置面板，開啟“微信開發者工具”的服務端口：

在 HBuilderX 中，點擊菜單欄中的 運行 -> 運行到小程序模擬器 -> 微信開發者工具，將當前 uni-app 項目編譯之后，自動運行到微信開發者工具中，從而方便查看項目效果與調試：

初次運行成功之后的項目效果：

4.2 運行H5

在 HBuilderX 中，點擊菜單欄中的 運行 -> 運行到內置瀏覽器，將當前 uni-app 項目編譯之后，自動運行到內置中，從而方便查看項目效果與調試：

初次運行成功之后的項目效果：

4.3 運行到木木模擬器

不同的模擬器對應的端口號，我們需要配置：

• 夜神模擬器端口號：62001
• 海馬模擬器端口號：26944
• 逍遙模擬器端口號：21503
• MuMu模擬器端口號：7555
• 天天模擬器端口號：6555

打開模擬器或者手機

打開配置模擬器的端口，需要點擊 運行-->運行到手機或模擬器--> Android模擬器端口設置

配置模擬器的端口，此處填寫木木模擬器的端口號 7555；

運行到模擬器

點擊運行

注意：

先打開木木模擬器

hHuilder可能需要下載對應的插件，運行到安卓模擬器，有視圖差別，運行需要時間

成功運行項目

5- uni-app 生命周期

---

5.0 生命周期

詳細內容可取uni-app 官網查看

5.1 vue的生命周期

具體內容可看博客：【Vue】Vue2生命周期詳解

5.2 小程序的生命周期

5.2.1 簡介

小程序中，生命周期主要分成了三部分：

• 應用的生命周期

小程序的生命周期函數是在app.js里面調用的，通過App(Object)函數用來注冊一個小程序，指定其小程序的生命周期回調

• 頁面的生命周期

頁面生命周期函數就是當你每進入/切換到一個新的頁面的時候，就會調用的生命周期函數，同樣通過App(Object)函數用來注冊一個頁面

• 組件的生命周期

組件的生命周期，指的是組件自身的一些函數，這些函數在特殊的時間點或遇到一些特殊的框架事件時被自動觸發，通過Component(Object)進行注冊組件

5.2.2 生命周期

• 應用的生命周期

生命周期說明

onLaunch	小程序初始化完成時觸發，全局只觸發一次
onShow	小程序啟動，或從后臺進入前臺顯示時觸發
onHide	小程序從前臺進入后臺時觸發
onError	小程序發生腳本錯誤或 API 調用報錯時觸發
onPageNotFound	小程序要打開的頁面不存在時觸發
onUnhandledRejection()	小程序有未處理的 Promise 拒絕時觸發
onThemeChange	系統切換主題時觸發

• 頁面的生命周期

生命周期說明作用

onLoad	生命周期回調—監聽頁面加載	發送請求獲取數據
onShow	生命周期回調—監聽頁面顯示	請求數據
onReady	生命周期回調—監聽頁面初次渲染完成	獲取頁面元素（少用）
onHide	生命周期回調—監聽頁面隱藏	終止任務，如定時器或者播放音樂
onUnload	生命周期回調—監聽頁面卸載	終止任務

• 組件的生命周期

生命周期說明

created	生命周期回調—監聽頁面加載
attached	生命周期回調—監聽頁面加載
ready	生命周期回調—監聽頁面初次渲染完成
moved	生命周期回調—監聽頁面隱藏
detached	生命周期回調—監聽頁面卸載
error	生命周期回調—監聽頁面卸載

5.3 小程序的全局方法

具體內容可看博客：【小程序】微信小程序常用api的使用，附案例（建議收藏）

6- 頁面和路由

---

6.1 路由組件

navigator 導航

• url 跳轉頁面的地址
• open-type 打開類型
  • navigate 跳轉、
  • redirect重定向（當前頁面不留歷史記錄)
  • navigateBack 返回、
  • relaunch 重啟、
  • switchTab 跳轉底部欄

6.1.1 案例

• index.vue

<!-- 導航的跳轉 --><navigator url="/pages/life/life"><button type="default">生命周期</button></navigator><navigator url="/pages/joke/joke" open-type="reLaunch"><button>笑話大全</button></navigator><navigator url="/pages/options/options" open-type="switchTab"><button type="warn">options(要用switchTab)</button></navigator>

6.2 路由傳參

傳遞參數

• url 里拼接 count=5&title=來自index

接收參數

6.2.1 案例

• life.vue

<!-- 頁面傳參 --><navigator url="/pages/options/options?count=5&title=來自index"><button type="primary">life（頁面傳參）</button></navigator>

• options.vue

onLoad(option) {//console.log("ccc", option);this.count = option.count;uni.setNavigationBarTitle({title: option.title})},

6.3 路由API

可以在官方網址查看API：https://uniapp.dcloud.net.cn/api/router.html#

uni.navigateTo({url}) 跳轉
uni.redirectTo({url}) 重定向
uni.navigateBack() 返回
uni.switchTab() 底部欄切換
uni.reLaunch() 重啟

6.3.1 案例

• life.vue

<!-- 頁面跳轉 --><button type="warn" size="mini" @click="goOptions">go選項</button><button type="primary" size="mini" @click="goIndex">Index選項</button> methods: {goOptions() {uni.navigateTo({// 跳轉并傳參url: "/pages/options/options?count=1000&title=來自js跳轉"})},goIndex() {// 重定向uni.redirectTo({url: '/pages/index/index'})},}

6.4 獲取當前頁面getApp()

6.4.1介紹

getApp() 函數用于獲取當前應用實例，一般用于獲取globalData 。

實例

const app = getApp() console.log(app.globalData)

注意：

• 不要在定義于App()內的函數中，或調用App前調用 getApp() ，可以通過this.$scope獲取對應的app實例
• 通過getApp()獲取實例之后，不要私自調用生命周期函數。
• 當在首頁nvue中使用getApp()不一定可以獲取真正的App對象。對此提供了const app = getApp({allowDefault: true})用來獲取原始的App對象，可以用來在首頁對globalData等初始化

6.4.2 案例

在 App.vue 定義

globalData:{num:100}

要使用的頁面獲取app

var app = getApp() <!-- 獲取當前頁面 --> <button type="warn" @click="addNum">{{num}}</button>

獲取globalData的值

onShow(){this.num = app.globalData.num ?}

更新globalData 值

addNum(){ app.globalData.num++; this.num = app.globalData.num ?}

6.5 獲得頁面棧getCurrentPages

6.5.1介紹

getCurrentPages() 函數用于獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。

注意： getCurrentPages()僅用于展示頁面棧的情況，請勿修改頁面棧，以免造成頁面狀態錯誤。

每個頁面實例的方法屬性列表：

方法描述平臺說明

page.$getAppWebview()	獲取當前頁面的webview對象實例	App
page.route	獲取當前頁面的路由

注意：

- navigateTo, redirectTo 只能打開非 tabBar 頁面。

• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面
• 頁面底部的tabBar由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。
• 不能在 App.vue 里面進行頁面跳轉。

6.5.2 案例

• 獲取當前的頁面棧，是一個數組（1-5）

var page = getCurrentPages uni.navigateBack({delta:page.length}) //page[page.length-1]獲取當前頁面的信息不要去修改

• code
  

6.6 路由配置 tabBar

• 在 pages.json 配置底部欄

"tabBar": {"color": "#777777","selectedColor": "#ff3300","list": [{"pagePath": "pages/index/index","iconPath": "static/home.png","selectedIconPath": "static/home-active.png","text": "首頁"},{"pagePath": "pages/options/options","iconPath": "static/sort.png","selectedIconPath": "static/sort-acitve.png","text": "選項"}]},

• code

7- 條件編譯

---

7.1 簡介

條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。

寫法：以#ifdef或#ifndef加%PLATFORM%開頭，以 #endif 結尾。

解釋：

• #ifdef：if defined 僅在某平臺存在
• #ifndef：if not defined 除了某平臺均存在
• %PLATFORM%：平臺名稱

具體內容可查看uni-app 官網https://uniapp.dcloud.net.cn/tutorial/platform.html

7.2 模板條件編譯

在 hHuilder 寫以下代碼：

<view><view class="title">條件</view><!-- #ifdef H5 --><view>H5:下載App 獲取優惠券</view><!-- #endif --><!-- #ifdef APP --><view>App 優惠券0.5元</view><!-- #endif --><!-- #ifdef MP-WEIXIN --><view>微信小程序福利專享</view><!-- #endif --></view>

在不同的端，我們可以看到不同的內容

7.3 CSS條件編譯

在 hHuilder 寫以下代碼：

<!-- condition.vue --> <view class="active">我要變成不同的顏色</view> <style>/* #ifdef APP-PLUS/*.active {color: #ffcc00;}/* #endif *//* #ifdef H5 */.active {color: lawngreen;}/* #endif *//* #ifdef MP-WEIXIN */.active {color: cornflowerblue;}/* #endif */ </style>

在不同的端，我們可以看到不同的內容

7.4 js條件編譯

在 hHuilder 寫以下代碼：

<!-- condition.vue --><view><button @click="say()" type="primary">js的條件編譯</button></view> <script>export default {methods: {say() {// #ifdef APP-PLUSuni.showModal({title: "你好App用戶"})// #endif// #ifdef H5uni.showModal({title: "你好手機用戶"})// #endif// #ifdef MP-WEIXINuni.showModal({title: "你好微信用戶"})// #endif}},data() {return {}},} </script>

在不同的端，我們可以看到不同的內容

7.5 跨平臺條件配置

7.5.1 頁面配置

新建一個頁面在 condition文件夾 里，命名為 weixin.vue ,在pages.json 寫以下代碼：

<!-- pages.json -->// #ifdef MP-WEIXIN || APP{"path": "pages/condition/weixin","style": {"navigationBarTitleText": "小程序專有頁面"}},// #endif

在 condition.vue 里，寫以下代碼：

<!-- #ifdef APP || MP-WEIXIN --><navigator url="/pages/condition/weixin"><button type="warn">微信專有</button></navigator><!-- #endif -->

在不同的端，我們可以看到不同的內容

7.5.2 導航欄配置

不同端的導航欄配置不同的內容

在 pages.json 寫以下代碼：

{"path" : "pages/condition/condition","style" : {"navigationBarTitleText": "條件編譯","enablePullDownRefresh": false,"app-plus": {"titleNView": false //隱藏導航欄},"h5": {"titleNView": {"titleText": "H5:條件編譯"}}}}

8- 總結

---

今天先分享到這里了~~~

往期傳送門

---

【小程序】微信小程序常用api的使用，附案例（建議收藏）

【微信小程序】小程序使用詳細教程（建議收藏）

總結

以上是生活随笔為你收集整理的【uni-app】详细总结uni-app基础知识和如何配置项目，运行到模拟器和小程序端，附案例和图（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。