第一步：你要有一個(gè)微信小程序，在微信開發(fā)者平臺(tái)上

至于怎樣申請(qǐng)微信開發(fā)者appid和微信開發(fā)者平臺(tái)上面的東西可以自己去百度下，重點(diǎn)講的是在HBuilderX開發(fā)小程序

第二步：在你的微信開發(fā)者工具里面新建一個(gè)小程序

第三步：把你新建好的項(xiàng)目導(dǎo)入到HBuilderX里面去

然后點(diǎn)擊運(yùn)行--運(yùn)行到小程序模擬器，就可以自動(dòng)打開微信開發(fā)者工具，就可以實(shí)現(xiàn)在Hbuilder開發(fā)，微信開發(fā)者工具預(yù)覽。但是！??！如果一切正常的情況下是這樣的，如果不正常的話，那你將很難受，好在我已經(jīng)填了許多坑，我就把不正常的情況給大家說下。

首先，如果你已經(jīng)導(dǎo)入了項(xiàng)目到hbuilderx里面，但是點(diǎn)擊運(yùn)行時(shí)，運(yùn)行到小程序那一行是不可點(diǎn)或者點(diǎn)了之后控制臺(tái)報(bào)不能連接到微信開發(fā)者工具，這時(shí)候你就要打開自己的微信開發(fā)者工具了，如圖下操作

在微信開發(fā)者工具的上方 點(diǎn)擊設(shè)置--安全設(shè)置

ok,這時(shí)候你就可以在hbuilderx開發(fā)，微信開發(fā)者工具里預(yù)覽了。但是如果你沒有申請(qǐng)到appid的話在微信開發(fā)者里面只能pc端預(yù)覽，而不能手機(jī)掃碼預(yù)覽，因?yàn)樗鼤?huì)提示你本項(xiàng)目不是開發(fā)者開發(fā)。

還有一個(gè)問題是引用vant庫時(shí)的報(bào)錯(cuò)

當(dāng)我按照所有流程來時(shí)

第一步：npm i vant-weapp -S --production

第二步：

第三步：就是在你的代碼里寫下

<van-button type="primary">按鈕</van-button>

這時(shí)候你運(yùn)行的時(shí)候他就開始調(diào)皮了

這個(gè)問題我在度娘還愣是沒找到完全的解決方案

這時(shí)候就又要回到微信開發(fā)者工具了 點(diǎn)擊設(shè)施--項(xiàng)目設(shè)置

然后再hbuilderx里面打開該項(xiàng)目的命令行工具輸入以下命令

npm init
npm install --production vant-weapp

這時(shí)候你再回到hbuilderX里面你會(huì)發(fā)現(xiàn)多了一個(gè)文件

然后再在你要用到的文件json里面寫下路徑

{
  "usingComponents": {
		 "van-button": "vant-weapp/button/index"
	}
}

到此這篇關(guān)于淺談HBuilderX開發(fā)小程序的一些問題的文章就介紹到這了,更多相關(guān)HBuilderX開發(fā)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論