国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【b站咸蝦米】chapter1&2_uniapp介紹與uniapp基礎(chǔ)_新課uniapp零基礎(chǔ)入門(mén)到項(xiàng)目打包(微信小程序/H5/vue/安卓apk)全掌握

這篇具有很好參考價(jià)值的文章主要介紹了【b站咸蝦米】chapter1&2_uniapp介紹與uniapp基礎(chǔ)_新課uniapp零基礎(chǔ)入門(mén)到項(xiàng)目打包(微信小程序/H5/vue/安卓apk)全掌握。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

課程地址:【新課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)如下

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

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 打包微信app 配置,uni-app,微信小程序,vue.js

二、uniapp基礎(chǔ)

uni-app官網(wǎng)

2.1? 新建項(xiàng)目、項(xiàng)目目錄、預(yù)覽uni項(xiàng)目

2.1.1 新建項(xiàng)目

1、新建項(xiàng)目。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2、新建uni-app項(xiàng)目

新建uni-app項(xiàng)目、選擇默認(rèn)模板

項(xiàng)目名稱、項(xiàng)目目錄、選擇vue2版本

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

項(xiàng)目創(chuàng)建成功。

2.1.2 項(xiàng)目目錄

項(xiàng)目基本構(gòu)成

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

詳細(xì)構(gòu)成

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

不使用unicloud時(shí)的項(xiàng)目目錄及文件(上面有些目錄和文件在下面沒(méi)有提及,有的是打包后會(huì)生成的)

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2.1.3 預(yù)覽uni項(xiàng)目

1 內(nèi)置瀏覽器預(yù)覽

選擇運(yùn)行,選擇第2個(gè),內(nèi)置瀏覽器瀏覽

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2 外置瀏覽器瀏覽

1 配置,選擇下面的配置Web服務(wù)器。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2 選擇谷歌瀏覽器打開(kāi)的話,就配置谷歌瀏覽器的安裝路徑

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

3 然后選擇外置瀏覽器的chrome瀏覽器運(yùn)行

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

運(yùn)行成功,此時(shí)是pc端的頁(yè)面。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

單擊右鍵->檢查->設(shè)備改為手機(jī)。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

3 小程序?yàn)g覽

1 配置

選擇圖示下面的運(yùn)行設(shè)置

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

配置微信開(kāi)發(fā)者工具的安裝路徑。

這里要安裝微信開(kāi)發(fā)者工具,且微信登陸。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2 運(yùn)行,選擇“運(yùn)行到小程序模擬器”的第一項(xiàng),微信開(kāi)發(fā)者工具。

運(yùn)行失敗,到微信開(kāi)發(fā)者工具里打開(kāi)設(shè)置,找到安全設(shè)置,打開(kāi)服務(wù)端口。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

此時(shí)再運(yùn)行,即可在微信開(kāi)發(fā)者工具里運(yùn)行uni項(xiàng)目。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

以上介紹了瀏覽器和小程序上的預(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",類名可以嵌套uniapp 打包微信app 配置,uni-app,微信小程序,vue.js
    • 3 不需要遵循uniapp里的東西,標(biāo)簽最終會(huì)解析成uniapp自己的代碼標(biāo)簽uniapp 打包微信app 配置,uni-app,微信小程序,vue.js
    • 4 H5和小程序相同標(biāo)簽的顯示效果不同。因此真正要寫(xiě)的時(shí)候要去學(xué)習(xí)uni組件的知識(shí)。所有盒子都可以使用這樣的標(biāo)簽包裹。這種標(biāo)簽就是適配小程序。因此,現(xiàn)在上面的代碼只適合開(kāi)發(fā)H5頁(yè)面,不適合開(kāi)發(fā)小程序。uniapp 打包微信app 配置,uni-app,微信小程序,vue.jsuniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

微信開(kāi)發(fā)者工具,個(gè)人體會(huì),就是微信小程序的開(kāi)發(fā)工具。

2.3 pages.json文件的頁(yè)面配置和全局配置

2.3.1 創(chuàng)建新頁(yè)面

pages文件夾,右鍵選擇“新建頁(yè)面”,按下圖操作。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

創(chuàng)建成功后看到pages.json文件里多了一個(gè)新頁(yè)面

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2.3.2 顯示新頁(yè)面

將list頁(yè)面挪到index上面。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

這樣list就放在首頁(yè)了。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

通過(guò)這個(gè)操作,實(shí)現(xiàn)哪個(gè)頁(yè)面,就顯示當(dāng)前頁(yè)面。

2.3.3 頁(yè)面配置

新頁(yè)面標(biāo)題

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

其他全局文件的配置。

找到網(wǎng)站的全局文件一欄https://uniapp.dcloud.net.cn/collocation/pages.html

uniapp 打包微信app 配置,uni-app,微信小程序,vue.jsuniapp 打包微信app 配置,uni-app,微信小程序,vue.js

以下就是頁(yè)面可配置的屬性,不同小程序之間有一定的差異。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

例如,配置頁(yè)面導(dǎo)航欄的背景色和文字顏色。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

頁(yè)面效果如圖

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

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同理也是如此

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

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)不完全相同。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

例如

		<view class="box">
			<icon type="success" size="26"/>
		</view>

效果

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

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

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

代碼

		<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í)塊元素。處理一下后

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

scroll-view的滾動(dòng)屬性。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

添加scroll-x橫向滾動(dòng)屬性。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

效果

藍(lán)色盒子可以滑動(dòng),底部有滾動(dòng)欄。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

scroll-y同理,這里不再演示。

scroll-view的其他屬性可以等js學(xué)習(xí)后再嘗試。

2.4.5 swiper組件 滑塊視圖容器

像移動(dòng)端輪播圖的實(shí)現(xiàn),就是通過(guò)swiper實(shí)現(xiàn)的。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

與scroll-view左右滑動(dòng)不同,swiper每次就滑動(dòng)一屏。

swiper-item,swiper的子元素

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

屬性circular,即循環(huán)滑動(dòng)。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

此外還有自動(dòng)切換時(shí)間autoplay,用interval設(shè)置切換時(shí)間。

此外還有輪播圖下面的指示點(diǎn),有興趣可以自己試一下。

2.4.6 image 圖片組件

image | uni-app官網(wǎng)

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

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ò)圖片的地址

效果

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

效果:綠色的圖變形了。

但是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ō)。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

除了mode之外,還有其他的屬性

懶加載 lazy-load,指定位置后才會(huì)加載圖片,這樣加載速度比較快。(沒(méi)看明白為什么速度快)

webp 等等

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

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í)候好好研究下。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2.4.8 audio 音頻組件

audio | uni-app官網(wǎng)

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2.4.9 live-player 和 live-pusher? 實(shí)時(shí)音視頻錄制和播放

直播模塊會(huì)用到。

2.4.10 camera 相機(jī)組件

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

老師多做H5和微信小程序,由于camera不支持H5,兼容性太差,所以沒(méi)有對(duì)此有了解。

屬性比較簡(jiǎn)單,用到的話可以去研究下。

2.4.11 表單組件

  • 表單,用于收集用戶信息,手機(jī)、郵箱、日期選擇等等,包含如下組件,
    • button
      • uniapp提供的按鈕樣式太少了
      • 后期會(huì)用到uView的按鈕,按鈕樣式多,兼容性更好一些。
    • checkout

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)才能用的屬性了。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js

2 input

input | uni-app官網(wǎng)

  • input的屬性
    • type
      • 有文本輸入:text
      • 數(shù)字輸入:number
      • ...
  • 最后有演示案例。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

此外還有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的屬性

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

例如,實(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è)面。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

在list頁(yè)面添加navigator組件,點(diǎn)擊時(shí)可以跳回index首頁(yè)。

<navigator url="/pages/index/index">今日新聞</navigator>

效果,點(diǎn)擊今日新聞,跳回首頁(yè)。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

注意1:

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

點(diǎn)擊標(biāo)題左邊的箭頭,可以返回上一個(gè)頁(yè)面。

2 open-type

這是open-type屬性控制的,默認(rèn)取值是navigate。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

(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è)面。uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

(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)有箭頭。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

場(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組件不僅可以插入文字,還可以插入圖片。這里就不多余記錄了。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

電腦查看京東手機(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ō)明。uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

pages.json 頁(yè)面路由 | uni-app官網(wǎng)

tabBar是對(duì)象類型,可以看下面的官網(wǎng)案例。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

步驟4,在pages.json文件中添加tabBar對(duì)象,注意,tabBar與pages和globalStyle是同層級(jí)的,

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

添加tabBar對(duì)象如下,

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

效果,

實(shí)現(xiàn)了分tab跳轉(zhuǎn)。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

注意1:iconfont下載圖標(biāo)

iconfont-阿里巴巴矢量圖標(biāo)庫(kù)

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

選中時(shí)的樣式,也下載下來(lái)。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

然后將tabBar需要的文件都放到static文件夾下。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

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è)面的路徑。

uniapp 打包微信app 配置,uni-app,微信小程序,vue.js?

分析一下:在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è)面。

插播:學(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)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • OpenCV系列__chapter1

    OpenCV系列__chapter1

    1.1 加法 img = cv2.add(img1, img2) 1.2 減法 img = cv2.subtract(img1, img2) 1.3 乘法 img = cv2.multiply(img1, img2) 1.4 除法 img = cv2.divide(img1, img2) 1.5 位運(yùn)算 cv2.bitwise_and() 2.1 線性變換 2.2 非線性變換 3.1 裁剪、放大、縮小 (1) 公式縮放 (2) 最近鄰源碼縮放 (3) 最近鄰 3.2 平移變換 3.3 錯(cuò)切變換 3.4 鏡像變

    2024年02月14日
    瀏覽(20)
  • RocketMQ集成Springboot --Chapter1

    RocketMQ集成Springboot 三種消息發(fā)送方式 生產(chǎn)者 引入依賴 消費(fèi)者 引入依賴 實(shí)現(xiàn)一個(gè)監(jiān)聽(tīng)器對(duì)象,重寫(xiě)其中的消費(fèi)消息的方法。使用注解@RocketMQMessageListener(consumerGroup = “htpConsumerGroup”,topic = “helloTopicBoot”) consumerGroup組必須是唯一的,helloTopicBoot表示要監(jiān)聽(tīng)的主題 最后生產(chǎn)者

    2024年02月16日
    瀏覽(20)
  • Chapter1:控制系統(tǒng)數(shù)學(xué)模型(下)

    第一章:控制系統(tǒng)數(shù)學(xué)模型 Exercise1.13 已知控制系統(tǒng)結(jié)構(gòu)圖如下圖所示,求系統(tǒng)的輸出 C 1 ( s ) C_1(s) C

    2024年02月01日
    瀏覽(18)
  • SystemVerilog Assertions應(yīng)用指南 Chapter1.29“ disable iff構(gòu)造

    SystemVerilog Assertions應(yīng)用指南 Chapter1.29“ disable iff構(gòu)造

    ????????在某些設(shè)計(jì)情況中, 如果一些條件為真,則我們不想執(zhí)行檢驗(yàn)。換句話說(shuō),這就像是一個(gè)異步的復(fù)位,使得檢驗(yàn)在當(dāng)前時(shí)刻不工作。SVA提供了“ disable iff來(lái)實(shí)現(xiàn)這種檢驗(yàn)器的異步復(fù)位 ?!?disable iff”的基本語(yǔ)法如下。 ????????屬性p34檢查在有效開(kāi)始后,信號(hào)“

    2024年02月07日
    瀏覽(19)
  • 【長(zhǎng)文閱讀】MAMBA作者博士論文<MODELING SEQUENCES WITH STRUCTURED STATE SPACES>-Chapter1

    【長(zhǎng)文閱讀】MAMBA作者博士論文<MODELING SEQUENCES WITH STRUCTURED STATE SPACES>-Chapter1

    Chapter1 Gu A. Modeling Sequences with Structured State Spaces[D]. Stanford University, 2023. 本文是MAMBA作者的博士畢業(yè)論文,為了理清楚MAMBA專門(mén)花時(shí)間拜讀這篇長(zhǎng)達(dá)330頁(yè)的博士論文,由于知識(shí)水平有限,只能盡自己所能概述記錄,并適當(dāng)補(bǔ)充一些相關(guān)數(shù)學(xué)背景,歡迎探討與批評(píng)指正。內(nèi)容多,

    2024年01月19日
    瀏覽(47)
  • Fast.ai 的新課來(lái)了,給你詳細(xì)介紹 Stable Diffusion 原理

    Fast.ai 的新課來(lái)了,給你詳細(xì)介紹 Stable Diffusion 原理

    最近跟學(xué)生們學(xué)了個(gè)新詞兒,叫做「雙廚狂喜」。一般形容兩個(gè)知名創(chuàng)作者合作出來(lái)的作品 ------ 例如視頻或者直播等 ------ 很受大伙兒歡迎。 這次,告訴你一個(gè)好消息,fast.ai 要和 Huggingface, Stability.ai(Stable Diffusion 作者之一)等各方一起創(chuàng)作一門(mén)新課程,叫做 From Deep Learn

    2024年02月11日
    瀏覽(85)
  • uniapp移動(dòng)端基礎(chǔ)介紹

    uniapp移動(dòng)端基礎(chǔ)介紹

    root 節(jié)點(diǎn)只能包含一個(gè) view 標(biāo)簽 template下包含兩個(gè)view會(huì)報(bào)錯(cuò),只要加一個(gè)view把兩個(gè)view包含起來(lái)才不會(huì)報(bào)錯(cuò)。 如果我們創(chuàng)建自定義的樣式文件,例如創(chuàng)建一個(gè) /static/scss/cafe.css ,想要使其在全局引用。 1、在 App.vue 中全局引用,每個(gè)頁(yè)面都可以使用該樣式。 2、在 index.scss 中導(dǎo)

    2024年01月25日
    瀏覽(14)
  • uniapp基礎(chǔ)(新手入門(mén))

    uniapp基礎(chǔ)(新手入門(mén))

    前言: 這篇文章主要寫(xiě)的是uniapp的基礎(chǔ)知識(shí),可以讓大家快速上手uniapp,同時(shí)避掉一些可能踩到的坑。 uniapp是由 dcloud 公司開(kāi)發(fā)的多端融合框架。uniapp的出現(xiàn)讓我們的開(kāi)發(fā)更為方便,一次開(kāi)發(fā),多端運(yùn)行。更重要的是學(xué)習(xí)成本不會(huì)很大,因?yàn)閡niapp主要是Vue語(yǔ)法加上小程序的

    2024年02月12日
    瀏覽(38)
  • 2023年最新最全uniapp入門(mén)學(xué)習(xí),零基礎(chǔ)入門(mén)uniapp到實(shí)戰(zhàn)項(xiàng)目,unicloud數(shù)據(jù)后臺(tái)快速打造uniapp小程序項(xiàng)目

    2023年最新最全uniapp入門(mén)學(xué)習(xí),零基礎(chǔ)入門(mén)uniapp到實(shí)戰(zhàn)項(xiàng)目,unicloud數(shù)據(jù)后臺(tái)快速打造uniapp小程序項(xiàng)目

    今天開(kāi)始帶著大家一起零基礎(chǔ)學(xué)習(xí)uniapp,在下面的課程中我們就簡(jiǎn)稱uniapp為uni吧。我這里從零基礎(chǔ)開(kāi)始教大家,后面可以帶大家簡(jiǎn)單的做一個(gè)實(shí)戰(zhàn)項(xiàng)目。所以不用擔(dān)心自己沒(méi)有基礎(chǔ),跟著石頭哥認(rèn)真學(xué)習(xí)就行了的。 我們學(xué)習(xí)uniapp之前先要認(rèn)識(shí)uniapp的好處 看下官網(wǎng) https://unia

    2024年02月06日
    瀏覽(23)
  • uniapp微信小程序系列(1)基礎(chǔ)與入門(mén)

    uniapp微信小程序系列(1)基礎(chǔ)與入門(mén)

    uni-app 是一個(gè)使用 Vue.js (opens new window)開(kāi)發(fā)所有前端應(yīng)用的框架,支持iOS、Android、Web及各平臺(tái)小程序。本系列文章為uni-app開(kāi)發(fā)微信小程序知識(shí)點(diǎn)的歸納總結(jié)。 如果你是新手,項(xiàng)目創(chuàng)建一般推薦:uni-ui項(xiàng)目,該項(xiàng)目架構(gòu)包含了uni官方提供的內(nèi)嵌UI組件庫(kù),方便直接使用。 如果你

    2024年02月17日
    瀏覽(23)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包