目錄

Uni-app、HBuilderX和微信web開發(fā)者工具的介紹

使用HBuilderX時需配置的工具

通過HBuilderX構(gòu)建項目

?配置微信開發(fā)者工具

通過HBuilderX將項目運行到微信小程序中

?Uni-app中常用的組件及方法

擴(kuò)展組件的使用方法

結(jié)語

Uni-app、HBuilderX和微信web開發(fā)者工具的介紹

Uni-app的介紹:

uni-app是一個使用vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、H5以及各種小程序、快應(yīng)用等多個平臺.

HBuilderX的介紹:

HBuilderX中的H是HTML的首字母，Builder是構(gòu)造者，X是HBuilder的下一代版本。簡稱HX。
HX是輕如編輯器、強(qiáng)如IDE的合體版本。

微信web開發(fā)者工具的介紹:

為幫助開發(fā)者更方便、更安全地開發(fā)和調(diào)試基于微信的網(wǎng)頁，我們推出了微信 web 開發(fā)者工具。它是一個桌面應(yīng)用，通過模擬微信客戶端的表現(xiàn)，使得開發(fā)者可以使用這個工具方便地在 PC 或者 Mac 上進(jìn)行開發(fā)和調(diào)試工作。

使用HBuilderX時需配置的工具

首先下載完善項目需要的插件

?其次就是運行配置將需要運行到瀏覽器的文件路徑給配置完善.

?HBuilderX可通過多種方式運行項目

??HBuilderX中配置微信開發(fā)者工具需打開項目的manifest.json文件進(jìn)行配置微信小程序的AppID

?并且將微信開發(fā)者工具的路徑配置正確，路徑錯誤將會運行失敗，找到微信小程序圖標(biāo)，鼠標(biāo)右擊點擊屬性->快捷方式，將目標(biāo)(T)的路徑復(fù)制到HBuilderX配置文件中

通過HBuilderX構(gòu)建項目

通過HBuilderX創(chuàng)建第一個uni-app應(yīng)用

第一步：打開HBuilderX，點擊工具欄里的文件 -> 新建 -> 項目

?第二步：選擇uni-app類型，輸入項目名稱，選擇模板，選擇vue的版本,點擊創(chuàng)建，即可成功創(chuàng)建

?最后：項目創(chuàng)建完成之后需要測試是否可以正常運行項目，打開項目的任意文件，如App.vue，選擇“運行”-->"運行到瀏覽器“命令，選擇瀏覽器，即可在瀏覽器中看到項目的運行效果。

?配置微信開發(fā)者工具

進(jìn)入微信開發(fā)者工具，點擊設(shè)置->安全將服務(wù)器端口號打開

通過HBuilderX將項目運行到微信小程序中

打開HBuilderX，進(jìn)入項目，點擊運行->運行到小程序模擬器->微信開發(fā)者工具命令，即可在微信開發(fā)者工具中體驗uni-app，如圖

?Uni-app中常用的組件及方法

組件:<view> 視圖容器。它類似于傳統(tǒng)html中的div，用于包裹各種元素內(nèi)容。

屬性說明

<text>文本組件。用于包裹文本內(nèi)容。

屬性說明

<button>按鈕

屬性說明

<image>圖片。?

?屬性說明

navigator頁面跳轉(zhuǎn)。該組件類似HTML中的<a>組件，但只能跳轉(zhuǎn)本地頁面。目標(biāo)頁面必須在pages.json中注冊。

屬性說明

?代碼示例:

<template>
	<view>
		<view class="page-body">
			<view class="btn-area">
				<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
					<button type="default">跳轉(zhuǎn)到新頁面</button>
				</navigator>
				<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
					<button type="default">在當(dāng)前頁打開</button>
				</navigator>
				<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
					<button type="default">跳轉(zhuǎn)tab頁面</button>
				</navigator>
			</view>
		</view>
	</view>
</template>
<script>
// navigate.vue頁面接受參數(shù)
export default {
	onLoad: function (option) { //option為object類型，會序列化上個頁面?zhèn)鬟f的參數(shù)
		console.log(option.id); //打印出上個頁面?zhèn)鬟f的參數(shù)。
		console.log(option.name); //打印出上個頁面?zhèn)鬟f的參數(shù)。
	}
}
</script>

常見的方法:uni.navigateTo 保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面 uni.switchTab 跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面 uni.redirectTo 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面 uni.reLaunch 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面

擴(kuò)展組件的使用方法

uni-table :

表格是由4個組件：?uni-table表格組件、uni-tr表格行 、uni-th?表格頭、uni-td?單元格組成

需要注意的是：

• uni-table?的根節(jié)點一定是?uni-tr
• uni-tr?的根節(jié)點一定是?uni-th?或者?uni-td
• 一個表格內(nèi)理論上只能包含表頭行
• 目前只能在?uni-th?中設(shè)置 width 屬性，uni-td?的寬度跟隨?uni-th?寬度變化

<uni-table border stripe emptyText="暫無更多數(shù)據(jù)" >
	<!-- 表頭行 -->
	<uni-tr>
		<uni-th align="center">日期</uni-th>
		<uni-th align="center">姓名</uni-th>
		<uni-th align="left">地址</uni-th>
	</uni-tr>
	<!-- 表格數(shù)據(jù)行 -->
	<uni-tr>
		<uni-td>2020-10-20</uni-td>
		<uni-td>Jeson</uni-td>
		<uni-td>北京市海淀區(qū)</uni-td>
	</uni-tr>
	<uni-tr>
		<uni-td>2020-10-21</uni-td>
		<uni-td>HanMeiMei</uni-td>
		<uni-td>北京市海淀區(qū)</uni-td>
	</uni-tr>
	<uni-tr>
		<uni-td>2020-10-22</uni-td>
		<uni-td>LiLei</uni-td>
		<uni-td>北京市海淀區(qū)</uni-td>
	</uni-tr>
	<uni-tr>
		<uni-td>2020-10-23</uni-td>
		<uni-td>Danner</uni-td>
		<uni-td>北京市海淀區(qū)</uni-td>
	</uni-tr>

</uni-table>

uni-icon :

用于展示 icon 圖標(biāo) 。

基本用法

<uni-icons type="contact" size="30"></uni-icons>

uni-icon屬性

結(jié)語

首先uniapp是一個非常強(qiáng)大的跨平臺開發(fā)框架。它允許我們使用一套代碼來開發(fā)同時運行在多個平臺上的應(yīng)用程序，包括iOS、Android、Web等。這對于開發(fā)者來說非常方便，因為我們不需要為不同的平臺編寫不同的代碼，只需要使用Vue.js來編寫一個統(tǒng)一的代碼庫。

其次uniapp具有很好的開發(fā)效率。由于Uniapp使用了一套統(tǒng)一的開發(fā)語法和組件庫，我們可以快速地開發(fā)出具有良好用戶體驗的應(yīng)用程序。而且，Uniapp還提供了豐富的組件和插件，可以幫助我們輕松實現(xiàn)一些常見的功能，如導(dǎo)航欄、下拉刷新等。

此外，我還學(xué)到了一些關(guān)于前端開發(fā)的基礎(chǔ)知識，如HTML、CSS和JavaScript等。這些知識對于我理解Uniapp和Vue.js的工作原理非常有幫助。我也發(fā)現(xiàn)了Vue.js的一些特性，如數(shù)據(jù)綁定、組件化，這些都是Uniapp開發(fā)的基礎(chǔ)。

在學(xué)習(xí)Uniapp的過程中，我也遇到了一些挑戰(zhàn)。比如，我發(fā)現(xiàn)在調(diào)試Uniapp應(yīng)用程序時，需要使用HBuilderX這樣的開發(fā)工具，而不是傳統(tǒng)的瀏覽器開發(fā)工具。這需要我去了解和適應(yīng)新的開發(fā)環(huán)境和工具。另外，由于Uniapp是一個相對新的框架，我在學(xué)習(xí)過程中也會遇到一些問題，需要查閱官方文檔和社區(qū)來找到解決方法。

總的來說，學(xué)習(xí)Uniapp是一次非常有意義的經(jīng)歷。通過這個過程，我不僅學(xué)到了新的技術(shù)和知識，還提高了自己的開發(fā)能力。我相信Uniapp會在未來的移動應(yīng)用開發(fā)中發(fā)揮越來越重要的作用，我會繼續(xù)深入學(xué)習(xí)和應(yīng)用這個框架。文章來源地址http://www.zghlxwxcb.cn/news/detail-600813.html

到了這里，關(guān)于Uni-app運用HBuilderX和微信web開發(fā)者工具做微信小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！