為什么使用nui-app開發(fā)微信小程序呢?

• 一次開發(fā),多端發(fā)布
• 防止源碼反編譯,增加安全性
• 提供插件市場(chǎng),ui庫(kù),豐富的周邊生態(tài)

確實(shí)是優(yōu)點(diǎn)多多,所以打算用uni-app開發(fā)一款微信小程序,奈何首席ui設(shè)計(jì)師小姐姐不喜歡nui-app自帶的ui庫(kù),卻一眼相中了vant的組件樣式,于是開始了舍近求遠(yuǎn)的引入VantWeapp的征程

特別注意 vant自己是不跨端的.千萬(wàn)不要搞錯(cuò)了.引入Vant的h5 ui庫(kù),只能在h5使用. app和小程序需要用Vant Weapp.Vant Weapp 是移動(dòng)端 Vue 組件庫(kù) Vant 的小程序版本，兩者基于相同的視覺規(guī)范，提供一致的 API 接口，助力開發(fā)者快速搭建小程序應(yīng)用。

二.運(yùn)行微信開發(fā)者工具

運(yùn)行到小程序模擬器>>微信開發(fā)者工具

如果無(wú)法打開請(qǐng)先進(jìn)行配置 1.在工具>>設(shè)置中配置微信開發(fā)者工具的路徑 2.在微信開發(fā)者工具中設(shè)置>安全設(shè)置開啟服務(wù)端口 再次運(yùn)行微信呢開發(fā)者工具,hbuilder就自動(dòng)將創(chuàng)建的小程序更新到微信開發(fā)者工具

此時(shí)發(fā)現(xiàn)nui-app編譯多出一個(gè)nupackge文件夾(紅框),而綠框中的代碼正是運(yùn)行在微信開發(fā)者工具中的

1.進(jìn)入unpackage/dist/ dev/mp-weixin文件夾下,執(zhí)行npm init初始化一個(gè)package.js文件

npm init
復(fù)制代碼

2.在unpackage/dist/ dev/mp-weixin文件夾下,執(zhí)行npm i vant-weapp -S --production,完成Vant Weapp的下載

npm i @vant-weapp -S --production
復(fù)制代碼

3.在微信開發(fā)者工具中,點(diǎn)擊右上角詳情>本地設(shè)置勾選ES6轉(zhuǎn)ES5和使用npm模塊 4.在微信開發(fā)者工具中,點(diǎn)擊菜單欄工具>構(gòu)建npm,等待構(gòu)建完成

在uni-app項(xiàng)目的根目錄下,在pages.json中注冊(cè)組件聲明

"usingComponents": {
  "van-button" : "@vant/weapp/button/index"
}
復(fù)制代碼

在對(duì)應(yīng)index.vue頁(yè)面中使用該組件

警告按鈕
復(fù)制代碼

大功告成!!!