前言：
這篇文章主要寫的是uniapp的基礎(chǔ)知識(shí)，可以讓大家快速上手uniapp，同時(shí)避掉一些可能踩到的坑。

一. 什么是uniapp

1. uniapp是由dcloud 公司開發(fā)的多端融合框架。uniapp的出現(xiàn)讓我們的開發(fā)更為方便，一次開發(fā)，多端運(yùn)行。更重要的是學(xué)習(xí)成本不會(huì)很大，因?yàn)閡niapp主要是Vue語法加上小程序的api，學(xué)過vue和小程序，再學(xué)uniapp會(huì)更加得心應(yīng)手。
2. 介紹一下端
   端分為App端（HTML+ nvue（原生view）native.js(js原生溝通的橋梁) weex內(nèi)置ios/安卓的模塊使用），H5端(h5專用api),各種小程序（微信為主）

二. uniapp應(yīng)用

1.準(zhǔn)備工具

我們在開發(fā)uniapp項(xiàng)目之前需要做如下準(zhǔn)備，首先就是開發(fā)與編譯工具Hbuilderx ，最好是用它，畢竟官方推薦，使用起來更加方便。還有用來微信小程序預(yù)覽測試工具，微信小程序開發(fā)工具。第三個(gè)就是安卓模擬器/真機(jī)，用來運(yùn)行app。這里大家可以使用mumu模擬器，或者雷電模擬器。

2. 創(chuàng)建我們的第一個(gè)uniapp項(xiàng)目

3. uniapp項(xiàng)目組成

我們創(chuàng)建一個(gè)項(xiàng)目之后，發(fā)現(xiàn)里面主要由以下幾部分組成

4. 如何運(yùn)行到多端

1. H5
   點(diǎn)擊運(yùn)行到內(nèi)資瀏覽器即可
2. APP
   01 打開模擬器或者手機(jī)
   02 配置模擬器端口
   03 運(yùn)行到模擬器

這里給大家寫一下常見模擬器的端口號(hào)
夜神模擬器端口號(hào)：62001
海馬模擬器端口號(hào)：26944
逍遙模擬器端口號(hào)：21503
MuMu模擬器端口號(hào)：7555
天天模擬器端口號(hào)：6555
雷電模擬器：5554

3. 微信小程序
   01 打開開發(fā)工具的服務(wù)端口
   02 HBuilder X配置 微信開發(fā)工具地址
   03 配置微信小程序id
   04 運(yùn)行到微信小程序

Tips:
hbuilder可能需要下載對應(yīng)的插件
運(yùn)行到安卓模擬器，有視圖差別
運(yùn)行可能需要一定的時(shí)間,大家要耐心等待哦

三. uniapp語法

1. uni-app頁面

我們新建一個(gè)頁面，然后進(jìn)行頁面配置。頁面配置在==pages.json==。我們可以配置全局樣式==globalStyle==。默認(rèn)頁面的樣式會(huì)應(yīng)用全局樣式，頁面寫了style 配置，那么用的配置覆蓋全局的配置

pages頁面有path頁面路徑和style 頁面樣式。

2. Vue語法

文本渲染

{{表達(dá)式}}
v-text=“表達(dá)式”
表達(dá)式 （簡單的js運(yùn)算 ，js方法調(diào)用 ，3元運(yùn)算符）
v-html 富文本

條件渲染

v-if
v-else-if
v-else
v-show
通過三元運(yùn)算符

列表選項(xiàng)

字符串，數(shù)字，列表，對象都可以遍歷
<view v-for="(item,index) in list" :key="index">{{index+1}} {{item}}</view>
一定要保證兄弟元素間的key值是唯一

屬性綁定(v-bind ,也可以簡寫為:)
<button v-bind:disabled=“true”>
<button :disabled="true">

表單綁定

默認(rèn) :value=“單向綁定”
input v-model=“雙向綁定”
@change=“$event.detail.value”事件

事件的值$event.detail.value

事件

事件綁定： < view v-on:click=“響應(yīng)” >
簡寫綁定：<view @click=“事件響應(yīng)” >
事件行內(nèi)處理 <view @click=“num++” >
事件響應(yīng)函數(shù) (函數(shù)在methods定義)
<view @click=“say”>

---

事件傳參
不寫參數(shù)
@click="say" 等同于 @click=“say()” 等同于 @click=“say($event)”
$event 是一個(gè)固定寫法 代表事件對象

---

事件對象 $event/e
function say(e){ }
其中 target目標(biāo)對象
dataSet 組件傳參
<view :data-title="title" @click="say"> function say(e){ e.target.dataset.title }

3. vue選項(xiàng)

data 數(shù)據(jù) methods 方法 computed 計(jì)算
watch監(jiān)聽 directive指令 filter過濾

4 .uni-app的生命周期

Vue的生命周期

創(chuàng)建 beforeCreate created
掛載 beforeMount mounted
更新 beforeUpdate updated
卸載 beforeDestroy destroyed

小程序的生命周期

onLoad 加載 （能夠獲取頁面的參數(shù) 開啟ajax，定時(shí)器，事件監(jiān)聽 像vue的created ）
onShow 顯示（ 播放媒體）
onReady準(zhǔn)備 （獲取節(jié)點(diǎn)信息 像vue的mounted ）
onHide 后臺(tái)運(yùn)行 停止播放媒體
onUnload 卸載 停止事件監(jiān)聽與定時(shí)器

小程序的全局方法

onPullDownRefresh 下拉刷新
onReachBottom() 觸底更新
onShareAppMessage右上角分享
onPageScroll 頁面滾動(dòng)
onShareTimeline 分享到朋友圈

app的全局方法

onBackPress 手機(jī)的返回鍵被點(diǎn)擊 onNavigationBarButtonTap 導(dǎo)航欄按鈕被點(diǎn)擊

5.表單

button 按鈕
type 類型（primary主要 warn警告 default 默認(rèn) ） size=“mini”
disabled 是否可用

---

input
value值
v-model對表單雙向綁定
@change=“$event.detail.value”
placeholder 提示文本

---

picker
mode 模式
time時(shí)間 date 日期 region地區(qū)
value值
@change=“$event.detail.value”

---

slider 滑塊
value 值 max 最大 min 最小
@change=“$event.detail.value”

四 . 路由

·路由組件
navigator 導(dǎo)航
url 跳轉(zhuǎn)頁面的地址
open-type 打開類型
( navigate跳轉(zhuǎn)
redirect重定向 （當(dāng)前頁面不留歷史記錄）
navigateBack返回
relauch 重啟
switchTab 跳轉(zhuǎn)底部欄 )

路由傳參
傳遞 url:path?name=mumu&age=18
接收
onLoad(option){} option的值{name:“mumu”,age:18}

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

路由配置 tabBar
color
selectedcolor
list
(pagePath iconPath selectedIconPath text )

獲取當(dāng)前頁面 getApp
01 在App.vue 定義globalData:{num:100}
02 要使用的頁面獲取app
var app = getApp()
03獲取globalData的值
onShow(){ this.num = app.globalData.num }
04 更新globalData值
addNum(){ app.globalData.num++; this.num = app.globalData.num }

獲取頁面棧 getCurrentPages
var page = getCurrentPages();
獲取當(dāng)前的頁面棧，是一個(gè)數(shù)組（1-5）

uni.navigateBack({delta:page.length}) page[page.length-1] 獲取當(dāng)前頁面的信息（不要去修改）

五. 條件編譯

為了讓不同的平臺(tái)展示不同特性與功能 ，在小程序，H5，App中可以顯示不同的內(nèi)容
模板條件編譯
格式 <!-- #ifdef H5 --> 內(nèi)容 <!-- #endif -->
條件 APP App端 H5 網(wǎng)頁 MP 小程序(MP-WEIXIN 微信小程序
css條件編譯（這里設(shè)置了APP的顏色，大家可以仿照寫其他端的）

/* #ifdef APP */
>    .active{color:red}
>    /* #endif */

js條件編譯 （這里設(shè)置了APP的提示框，大家可以仿照寫其他端的）

	// #ifdef APP
	uni.showModal({ title:"你好App用戶" }) 
	// #endif
> 

條件配置在 pages.json中配置（可以讓某個(gè)頁面只在某端實(shí)現(xiàn)，某端特有，其他端看不到）

	“style”:{   
	"h5":{
>       "titleNView":{
>           "titleText":"我是H5"
>        }   },  
>   "app-plus": {
>       "titleNView":false //隱藏導(dǎo)航欄   } } 
>       		
>       // #ifdef MP-WEIXIN	|| APP	 { 	"path":"pages/condition/we", 	
>       "style":{ 		
>       "navigationBarTitleText":
> "小程序?qū)Ｓ许撁? 	} }, 
> // #endif

條件編譯設(shè)置完之后大概是這種效果

祝大家學(xué)的開心，學(xué)的愉快！?。?br>文章來源地址http://www.zghlxwxcb.cn/news/detail-523633.html

到了這里，關(guān)于uniapp基礎(chǔ)（新手入門）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！