課程地址：【新課uniapp零基礎(chǔ)入門(mén)到項(xiàng)目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12&share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
目錄
一、uniapp和HBuilderX介紹
二、uniapp基礎(chǔ)
2.1? 新建項(xiàng)目、項(xiàng)目目錄、預(yù)覽uni項(xiàng)目
2.1.1 新建項(xiàng)目
2.1.2 項(xiàng)目目錄
2.1.3 預(yù)覽uni項(xiàng)目
2.2 vue語(yǔ)法在uniapp中的使用
2.3 pages.json文件的頁(yè)面配置和全局配置
2.3.1 創(chuàng)建新頁(yè)面
2.3.2 顯示新頁(yè)面
2.3.3 頁(yè)面配置
2.3.4 全局配置
2.4 uniapp組件
2.4.1 view 視圖容器?塊級(jí)標(biāo)簽 div
2.4.2 icon 圖標(biāo)組件 行級(jí)標(biāo)簽
2.4.3 text 文本組件 行標(biāo)簽 span
2.4.4 scroll-view組件 可滾動(dòng)視圖容器
2.4.5 swiper組件 滑塊視圖容器
2.4.6 image 圖片組件
2.4.7 video 視頻組件
2.4.8 audio 音頻組件
2.4.9 live-player 和 live-pusher? 實(shí)時(shí)音視頻錄制和播放
2.4.10 camera 相機(jī)組件
2.4.11 表單組件
1 button
2 input
2.4.12 navigator 頁(yè)面跳轉(zhuǎn)組件
1 url
2 open-type
3 delta
2.4.13 配置tabBar導(dǎo)航菜單
2.4.14 open-type跳轉(zhuǎn)差異
一、uniapp和HBuilderX介紹
uni-app官方網(wǎng)站：https://uniapp.dcloud.net.cn/
為什么要學(xué)習(xí)uniapp？
1、一套代碼可以打包到不同的應(yīng)用平臺(tái)；一套代碼編到十幾個(gè)平臺(tái)，這不是夢(mèng)想。眼見(jiàn)為實(shí)，掃描以下二維碼，親自體驗(yàn)最全面的跨平臺(tái)效果！
比較常用的平臺(tái)如下
2、方便入手，就是使用vue語(yǔ)法寫(xiě)小程序；
3、豐富的生態(tài)環(huán)境，插件眾多。
開(kāi)發(fā)工具：HBuilderX，uniapp使用HBuilderX，兩者都是一家公司的，DCloud公司（國(guó)產(chǎn)團(tuán)隊(duì)）。
主題：綠柔、雅藍(lán)、酷黑
二、uniapp基礎(chǔ)
uni-app官網(wǎng)
2.1? 新建項(xiàng)目、項(xiàng)目目錄、預(yù)覽uni項(xiàng)目
2.1.1 新建項(xiàng)目
1、新建項(xiàng)目。
2、新建uni-app項(xiàng)目
新建uni-app項(xiàng)目、選擇默認(rèn)模板
項(xiàng)目名稱、項(xiàng)目目錄、選擇vue2版本
項(xiàng)目創(chuàng)建成功。
2.1.2 項(xiàng)目目錄
項(xiàng)目基本構(gòu)成
詳細(xì)構(gòu)成
不使用unicloud時(shí)的項(xiàng)目目錄及文件（上面有些目錄和文件在下面沒(méi)有提及，有的是打包后會(huì)生成的）
2.1.3 預(yù)覽uni項(xiàng)目
1 內(nèi)置瀏覽器預(yù)覽
選擇運(yùn)行，選擇第2個(gè)，內(nèi)置瀏覽器瀏覽
2 外置瀏覽器瀏覽
1 配置，選擇下面的配置Web服務(wù)器。
2 選擇谷歌瀏覽器打開(kāi)的話，就配置谷歌瀏覽器的安裝路徑
3 然后選擇外置瀏覽器的chrome瀏覽器運(yùn)行
運(yùn)行成功，此時(shí)是pc端的頁(yè)面。
單擊右鍵->檢查->設(shè)備改為手機(jī)。
3 小程序?yàn)g覽
1 配置
選擇圖示下面的運(yùn)行設(shè)置
配置微信開(kāi)發(fā)者工具的安裝路徑。
這里要安裝微信開(kāi)發(fā)者工具，且微信登陸。
2 運(yùn)行，選擇“運(yùn)行到小程序模擬器”的第一項(xiàng)，微信開(kāi)發(fā)者工具。
運(yùn)行失敗，到微信開(kāi)發(fā)者工具里打開(kāi)設(shè)置，找到安全設(shè)置，打開(kāi)服務(wù)端口。
此時(shí)再運(yùn)行，即可在微信開(kāi)發(fā)者工具里運(yùn)行uni項(xiàng)目。
以上介紹了瀏覽器和小程序上的預(yù)覽，還可以打包成app，但是配置起來(lái)比較麻煩，先不說(shuō)這么多了。
可以隨便選擇預(yù)覽窗口，瀏覽器或者小程序都可以。
2.2 vue語(yǔ)法在uniapp中的使用
index.vue
vue的template里只能有一個(gè)盒子view。
<template>
<view class="box">
<h1>
<span class="row">uniapp</span>入門(mén)
</h1>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.box {
width: 100px;
height: 100px;
background-color: lightpink;
h1 {
font-size: 40px;
color: red;
.row {
font-style: italic;
}
}
}
</style>- 注意
- 1 view可以用div替代
- 2 style標(biāo)簽里加上lang="scss"，類名可以嵌套
- 3 不需要遵循uniapp里的東西，標(biāo)簽最終會(huì)解析成uniapp自己的代碼標(biāo)簽
- 4 H5和小程序相同標(biāo)簽的顯示效果不同。因此真正要寫(xiě)的時(shí)候要去學(xué)習(xí)uni組件的知識(shí)。所有盒子都可以使用這樣的標(biāo)簽包裹。這種標(biāo)簽就是適配小程序。因此，現(xiàn)在上面的代碼只適合開(kāi)發(fā)H5頁(yè)面，不適合開(kāi)發(fā)小程序。
?
微信開(kāi)發(fā)者工具，個(gè)人體會(huì)，就是微信小程序的開(kāi)發(fā)工具。
2.3 pages.json文件的頁(yè)面配置和全局配置
2.3.1 創(chuàng)建新頁(yè)面
pages文件夾，右鍵選擇“新建頁(yè)面”，按下圖操作。
創(chuàng)建成功后看到pages.json文件里多了一個(gè)新頁(yè)面
2.3.2 顯示新頁(yè)面
將list頁(yè)面挪到index上面。
這樣list就放在首頁(yè)了。
通過(guò)這個(gè)操作，實(shí)現(xiàn)哪個(gè)頁(yè)面，就顯示當(dāng)前頁(yè)面。
2.3.3 頁(yè)面配置
新頁(yè)面標(biāo)題
其他全局文件的配置。
找到網(wǎng)站的全局文件一欄https://uniapp.dcloud.net.cn/collocation/pages.html
以下就是頁(yè)面可配置的屬性，不同小程序之間有一定的差異。
例如，配置頁(yè)面導(dǎo)航欄的背景色和文字顏色。
頁(yè)面效果如圖
2.3.4 全局配置
主要是globalStyle
- globalStyle代表頁(yè)面窗體。
- 全局配置，包容性大，作用域小一些。
- navigationBarTitleText?
- 如果頁(yè)面設(shè)置標(biāo)題，則使用頁(yè)面設(shè)置的標(biāo)題navigationBarTitleText；
- 如果沒(méi)有，則頁(yè)面標(biāo)題使用globalStyle的navigationBarTitleText?
- navigationBarBackgroundColor、navigationBarTextStyle、 backgroundColor同理也是如此
2.4 uniapp組件
- 為什么要學(xué)習(xí)uniapp組件
- 上述講的東西做H5沒(méi)有問(wèn)題，因?yàn)镠5頁(yè)面支持html標(biāo)簽。
- 但是項(xiàng)目還需要支持小程序、App等。所以要遵循標(biāo)準(zhǔn)規(guī)范。
- 因?yàn)樾〕绦蝽?yè)面不支持html標(biāo)簽，所以要按照規(guī)則進(jìn)行書(shū)寫(xiě)。
uniapp官網(wǎng)的組件https://uniapp.dcloud.net.cn/component/
小程序的組件https://developers.weixin.qq.com/miniprogram/dev/component/
上述兩個(gè)的組件十分相似，因?yàn)樵谛〕绦虺霈F(xiàn)后，uniapp才出現(xiàn)。而且uniapp通過(guò)微信小程序的寫(xiě)法完成了其他小程序的寫(xiě)法。
小程序官網(wǎng)有的東西，uniapp里都有。uniapp有的，小程序里沒(méi)有。uniapp的包容性更強(qiáng)，東西更多，包含了vue組件等。
如果單純想開(kāi)發(fā)微信小程序，建議去學(xué)習(xí)微信小程序的課程。
其他組件，可以去簡(jiǎn)書(shū)、掘金里去找說(shuō)明。
2.4.1 view 視圖容器?塊級(jí)標(biāo)簽 div
view標(biāo)簽比div標(biāo)簽更強(qiáng)，是uniapp自己封裝的組件。
何為組件：組件可以理解為一個(gè)小模塊，將公用的功能封裝起來(lái)。
使用
<template>
<view class="out">
<view class="box">
</view>
</view>
</template>
類似以前用的div。
注意1：
.out {
.box {
}
}會(huì)自動(dòng)解析為
.out .box { }注意2：
rpx：響應(yīng)式單位。
例如，以px為單位的div，
.out {
.box {
width: 200px;
height: 200px;
background-color: pink;
}
}在不同機(jī)型上的絕對(duì)大小是一樣的
而要是想生成一個(gè)全屏。
使用響應(yīng)式單位rpx頁(yè)面樣式與布局 | uni-app官網(wǎng)
750*1334，是iphone6的屏幕分辨率，只需要記750。
以px為單位的固定大小的長(zhǎng)度是不響應(yīng)的，所以建議使用rpx響應(yīng)式單位。
2.4.2 icon 圖標(biāo)組件 行級(jí)標(biāo)簽
icon | uni-app官網(wǎng)
每個(gè)平臺(tái)的圖標(biāo)不完全相同。
例如
<view class="box">
<icon type="success" size="26"/>
</view>效果
2.4.3 text 文本組件 行標(biāo)簽 span
text替換之前的span標(biāo)簽。
text還有一些特別的屬性，可以去官網(wǎng)看text組件 | uni-app官網(wǎng)
2.4.4 scroll-view組件 可滾動(dòng)視圖容器
scroll-view | uni-app官網(wǎng)
滑動(dòng)，左右滑動(dòng)。
例如，這里有5個(gè)220rpx*220rpx大小的盒子，但是邊框高度限制為220rpx
代碼
<scroll-view class="scroll">
<view class="group">
<view class="item">
111
</view><view class="item">
111
</view><view class="item">
111
</view><view class="item">
111
</view><view class="item">
111
</view><view class="item">
111
</view>
</view>
</scroll-view>樣式style
.scroll {
border: 1px solid red;
box-sizing: border-box;
height: 220rpx;
.group {
.item {
width: 220rpx;
height: 220rpx;
background: blue;
}
}
}問(wèn)題：希望能將藍(lán)色小塊做成橫向滑動(dòng)的效果。
p7
首先，將藍(lán)色小塊改為行級(jí)塊元素。處理一下后
scroll-view的滾動(dòng)屬性。
添加scroll-x橫向滾動(dòng)屬性。
效果
藍(lán)色盒子可以滑動(dòng)，底部有滾動(dòng)欄。
scroll-y同理，這里不再演示。
scroll-view的其他屬性可以等js學(xué)習(xí)后再嘗試。
2.4.5 swiper組件 滑塊視圖容器
像移動(dòng)端輪播圖的實(shí)現(xiàn)，就是通過(guò)swiper實(shí)現(xiàn)的。
與scroll-view左右滑動(dòng)不同，swiper每次就滑動(dòng)一屏。
swiper-item，swiper的子元素
屬性circular，即循環(huán)滑動(dòng)。
此外還有自動(dòng)切換時(shí)間autoplay，用interval設(shè)置切換時(shí)間。
此外還有輪播圖下面的指示點(diǎn)，有興趣可以自己試一下。
2.4.6 image 圖片組件
image | uni-app官網(wǎng)
image和video是最常用的媒體組件。audio（音頻）和video（視頻）幾乎一樣。camera是相機(jī)組件。
image標(biāo)簽的使用
<image src="/static/logo.png" mode=""></image>注意：1、反斜杠/代表項(xiàng)目主體，這個(gè)src是絕對(duì)路徑。2、src也可以是網(wǎng)絡(luò)圖片的地址
效果
效果：綠色的圖變形了。
但是html支持的img標(biāo)簽對(duì)應(yīng)的圖片不會(huì)變形。（小程序不支持html標(biāo)簽）
原因：image組件有一個(gè)默認(rèn)的寬高，320px*240px。
解決方法：1 外加一個(gè)類，來(lái)額外控制寬高。
p8 8:15
?mode不同取值對(duì)應(yīng)的效果。
一般只顯示最小的邊，也就是aspectFill，長(zhǎng)邊多余的地方會(huì)裁剪掉。
其他的了解下就行了，用到的時(shí)候再說(shuō)。
除了mode之外，還有其他的屬性
懶加載 lazy-load，指定位置后才會(huì)加載圖片，這樣加載速度比較快。（沒(méi)看明白為什么速度快）
webp 等等
2.4.7 video 視頻組件
video與html的video是一樣的，只是增加了一些屬性和方法。
<video src="../../static/logo.mp4" mode=""></video>video | uni-app官網(wǎng)
video的屬性和方法
1、H5不允許自動(dòng)播放，所以autoplay不生效；
2、muted可以自動(dòng)播放，不過(guò)是靜音播放；
3、loop 循環(huán)播放；
4、initial-time 視頻初始播放位置；
其他的屬性可以用到的時(shí)候好好研究下。
2.4.8 audio 音頻組件
audio | uni-app官網(wǎng)
2.4.9 live-player 和 live-pusher? 實(shí)時(shí)音視頻錄制和播放
直播模塊會(huì)用到。
2.4.10 camera 相機(jī)組件
老師多做H5和微信小程序，由于camera不支持H5，兼容性太差，所以沒(méi)有對(duì)此有了解。
屬性比較簡(jiǎn)單，用到的話可以去研究下。
2.4.11 表單組件
- 表單，用于收集用戶信息，手機(jī)、郵箱、日期選擇等等，包含如下組件，
- button
- uniapp提供的按鈕樣式太少了
- 后期會(huì)用到uView的按鈕，按鈕樣式多，兼容性更好一些。
- checkout
- button
p10 3:00
1 button
?button | uni-app官網(wǎng)
舉例
<button size="mini"></button>- button的屬性
- size屬性，有default、mini屬性。
- type，type屬性有default、primary和warn三種類型。
- plain，是否鏤空，為false表示不鏤空，為true表示鏤空。
- loading，顯示加載中。
- form-type，用于form組件，點(diǎn)擊分別會(huì)觸發(fā)form組建的submit和reset事件。
- 剩下就是只有某些平臺(tái)才能用的屬性了。
2 input
input | uni-app官網(wǎng)
- input的屬性
- type
- 有文本輸入：text
- 數(shù)字輸入：number
- ...
- type
- 最后有演示案例。
?
此外還有picker，平臺(tái)差異化，所以也就不說(shuō)了。
uView還提供了Calendar日歷，Slider滑動(dòng)選擇器，Picker選擇器，效果更好一些。
后面通過(guò)案例練習(xí)。
2.4.12 navigator 頁(yè)面跳轉(zhuǎn)組件
navigator | uni-app官網(wǎng)
該組件類似html的a組件，但只能跳轉(zhuǎn)本地頁(yè)面。目標(biāo)頁(yè)面必須在pages.json中注冊(cè)。
navigator的屬性
?
例如，實(shí)現(xiàn)list和index頁(yè)面的跳轉(zhuǎn)。
在index頁(yè)面添加一個(gè)navigator組件
1 url
<navigator url="/pages/list/list">新聞列表</navigator>效果
點(diǎn)擊新聞列表，會(huì)跳轉(zhuǎn)到list頁(yè)面。
?
在list頁(yè)面添加navigator組件，點(diǎn)擊時(shí)可以跳回index首頁(yè)。
<navigator url="/pages/index/index">今日新聞</navigator>效果，點(diǎn)擊今日新聞，跳回首頁(yè)。
?
注意1：
?
點(diǎn)擊標(biāo)題左邊的箭頭，可以返回上一個(gè)頁(yè)面。
2 open-type
這是open-type屬性控制的，默認(rèn)取值是navigate。
?
（1）open-type取值為navigate時(shí)，對(duì)應(yīng)uni.navigateTo的功能。對(duì)應(yīng)：保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。所以首頁(yè)還是保留的，只是跳轉(zhuǎn)到了list頁(yè)面。
?
（2）open-type取值為redirect的時(shí)候，關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
與navigate不同在于，取值為redirect時(shí)，相當(dāng)于打開(kāi)了新的頁(yè)面，此時(shí)沒(méi)有返回鍵（標(biāo)題左側(cè)箭頭）。
<navigator url="/pages/list/list" open-type="redirect">新聞列表</navigator>效果，
此時(shí)標(biāo)題“新聞列表”左側(cè)沒(méi)有箭頭。
?
場(chǎng)景：希望點(diǎn)開(kāi)的新頁(yè)面是一個(gè)獨(dú)立的頁(yè)面，且有些分享按鈕，此時(shí)要求新頁(yè)面不可追溯到上一個(gè)頁(yè)面，那么就將open-type屬性值置為redirect。
navigate和redirect都顯示跳轉(zhuǎn)到非tabBar頁(yè)面。當(dāng)頁(yè)面最下方有相應(yīng)菜單的時(shí)候，此時(shí)無(wú)法進(jìn)行跳轉(zhuǎn)。
（3）open-type取值為switchTab時(shí)，跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面。uni.navigateTo(OBJECT) | uni-app官網(wǎng)
相當(dāng)于關(guān)閉所有頁(yè)面。
如果想要跳轉(zhuǎn)tabBar頁(yè)面時(shí)，就需要使用switchTab頁(yè)面。不過(guò)reLaunch用的比較多。與navigate和redirect是一對(duì)一樣，switchTab與reLaunch也是一對(duì)。兩者區(qū)別在于，reLaunch路徑可以攜帶參數(shù)，switchTab路徑后面不能帶參數(shù)。這兩個(gè)都是可以打開(kāi)導(dǎo)航菜單的內(nèi)容的。
（4）navigateBack，返回上一頁(yè)。一般會(huì)通過(guò)頁(yè)面棧的方式實(shí)現(xiàn)。關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò)?getCurrentPages()?獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。uni.navigateTo(OBJECT) | uni-app官網(wǎng)
以上就是open-type的屬性取值方式，也就是跳轉(zhuǎn)方式如何選擇的問(wèn)題。html的a標(biāo)簽也有多種跳轉(zhuǎn)方式，本窗口打開(kāi)還是新窗口打開(kāi)。
3 delta
當(dāng) open-type 為 'navigateBack' 時(shí)有效，表示回退的層數(shù)
剩下的就是交互的問(wèn)題了。
注意：navigator組件不僅可以插入文字，還可以插入圖片。這里就不多余記錄了。
?
電腦查看京東手機(jī)端，電腦打開(kāi)京東網(wǎng)頁(yè)，F(xiàn)12，切到手機(jī)端瀏覽。
2.4.13 配置tabBar導(dǎo)航菜單
在小程序下方創(chuàng)建一個(gè)導(dǎo)航菜單，需要做一個(gè)配置文件。
官方方式
步驟1，打開(kāi)官網(wǎng)的全局文件。pages.json 頁(yè)面路由 | uni-app官網(wǎng)
步驟2，打開(kāi)pages.json文件，（此時(shí)有3個(gè)頁(yè)面，首頁(yè)、新聞列表、關(guān)于我們），配置好3個(gè)頁(yè)面的標(biāo)題。
步驟3，打開(kāi)tabBar說(shuō)明。
?
pages.json 頁(yè)面路由 | uni-app官網(wǎng)
tabBar是對(duì)象類型，可以看下面的官網(wǎng)案例。
?
步驟4，在pages.json文件中添加tabBar對(duì)象，注意，tabBar與pages和globalStyle是同層級(jí)的，
?
添加tabBar對(duì)象如下，
?
效果，
實(shí)現(xiàn)了分tab跳轉(zhuǎn)。
?
注意1：iconfont下載圖標(biāo)
iconfont-阿里巴巴矢量圖標(biāo)庫(kù)
?
選中時(shí)的樣式，也下載下來(lái)。
?
然后將tabBar需要的文件都放到static文件夾下。
?
2.4.14 open-type跳轉(zhuǎn)差異
注意2：添加tabBar后，之前頁(yè)面的跳轉(zhuǎn)會(huì)失效，即navigator組件的跳轉(zhuǎn)（方式選navigate和redirect都不能跳轉(zhuǎn)）。
看下圖，navigator組件在open-type取navigate時(shí)，url要填非tabBar頁(yè)面的路徑。
?
分析一下：在A頁(yè)面可以跳轉(zhuǎn)B頁(yè)面，同時(shí)B頁(yè)面標(biāo)題左側(cè)會(huì)有返回上一頁(yè)的箭頭。但是A和B頁(yè)面都是tabBar頁(yè)面。單獨(dú)點(diǎn)擊B頁(yè)面對(duì)應(yīng)的tab按鈕，此時(shí)如果B頁(yè)面標(biāo)題左側(cè)有箭頭，那么點(diǎn)擊這個(gè)箭頭應(yīng)該返回到哪個(gè)頁(yè)面？這就不合適了。
但是可以怎么跳轉(zhuǎn)呢？加open-type=“reLanuch”，對(duì)應(yīng)uni.reLanuch,關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。uni.navigateTo(OBJECT) | uni-app官網(wǎng)。這樣就可以打開(kāi)tabBar頁(yè)面了。
記憶方式：open-type默認(rèn)是navigate，什么都不設(shè)置就是navigate；另外就是reLanuch（設(shè)置tabBar）；由于switchTab路徑不能攜帶參數(shù)，所以干脆就reLanuch（路徑可攜帶參數(shù)）。
使用reLanuch，在A頁(yè)面點(diǎn)擊可以跳轉(zhuǎn)到B頁(yè)面，同時(shí)點(diǎn)擊tabBar也可以打開(kāi)B頁(yè)面。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-807062.html
插播：學(xué)習(xí)git操作的網(wǎng)站：learn git branching。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-807062.html
到了這里，關(guān)于【b站咸蝦米】chapter1&2_uniapp介紹與uniapp基礎(chǔ)_新課uniapp零基礎(chǔ)入門(mén)到項(xiàng)目打包（微信小程序/H5/vue/安卓apk）全掌握的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
