引言

經(jīng)過web前端開發(fā)的學(xué)習(xí)，相信大家對(duì)于前端開發(fā)有了一定深入的了解，今天我開設(shè)了微信小程序?qū)?，主要想從移?dòng)端開發(fā)方向進(jìn)一步發(fā)展，而對(duì)于我來說寫移動(dòng)端博文的第一站就是小程序開發(fā)，希望看到我文章的朋友能對(duì)你有所幫助。

npm包

目前小程序中已經(jīng)支持使用 npm 安裝第三方包，從而來提高小程序的開發(fā)效率。但是，在小程序中使用 npm 包有如下限制：

不支持依賴于 Node.js 內(nèi)置庫(kù)的包

不支持依賴于 瀏覽器內(nèi)置對(duì)象的包

不支持依賴于 C++插件的包

Vant Weapp

Vant Weapp 是有贊前端團(tuán)隊(duì)開源的一套小程序 UI 組件庫(kù)，助力開發(fā)者快速搭建小程序應(yīng)用。它所使用的是 MIT 開源許可協(xié)議，對(duì)商業(yè)使用比較友好。其官方文檔如下：Vant官方文檔

安裝 Vant 組件庫(kù)

通過 npm 安裝：

(注意一點(diǎn)：npm需要node.js環(huán)境配置，可百度教程，這里不在贅述)

安裝組件庫(kù)之前先要對(duì) npm 進(jìn)行初始化一個(gè)包管理配置文件：

# 通過 npm 安裝
npm i @vant/weapp -S --production
# 通過 yarn 安裝
yarn add @vant/weapp --production
# 安裝 0.x 版本
npm i vant-weapp -S --production
選擇一種命名方式進(jìn)行安裝即可，這里我選擇第一種

?注意：如果安裝報(bào)錯(cuò)的話可以是權(quán)限不夠，需要調(diào)用管理員權(quán)限：（安裝成功如下圖）

?修改 app.json：

將 app.json中的 “style”:"v2"，去除，小程序的新版基礎(chǔ)組件強(qiáng)行加上了許多樣式，難以覆蓋，不關(guān)閉將造成部分組件樣式混亂。

?修改 project.config.json：

開發(fā)者工具創(chuàng)建的項(xiàng)目，miniprogrmRoot 默認(rèn)為 miniprogrm，package.json 在其外部，npm 構(gòu)建無法正常工作。需要手動(dòng)在 project.config.json 內(nèi)添加如下配置，使開發(fā)者工具可以正確索引 npm依賴的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

?PS：這個(gè)地方有點(diǎn)奇怪，本來project.config.json是有這兩個(gè)文件的只是 packageJsonPath 里面需要我們配置數(shù)據(jù)而已，但是我配置數(shù)據(jù)之后就報(bào)錯(cuò)了，老是提示我 解析 project.comfig.json 失敗，請(qǐng)檢查內(nèi)容或刪除文件。就很奇怪，查閱了好多文檔資料沒有解決，最后我把原來文件里的兩個(gè)文件先刪除在添加，最后解決了，算是人生中配置文件的一個(gè)小小 Bug 吧。

注意： 由于目前新版開發(fā)者工具創(chuàng)建的小程序目錄文件結(jié)構(gòu)問題，npm構(gòu)建的文件目錄為miniprogram_npm，并且開發(fā)工具會(huì)默認(rèn)在當(dāng)前目錄下創(chuàng)建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置為’./'即可

構(gòu)建 npm 包：

在根目錄下新建 miniprogram 文件夾。

?然后再點(diǎn)擊【工具 -> 構(gòu)建 npm】

?新的開發(fā)版本中，詳情——本地設(shè)置中是沒有【使用 npm 模塊勾選框選項(xiàng)】，所以我們不需要理會(huì)，如果低版本開發(fā)者用戶有這個(gè)選項(xiàng)的話，則需勾選。

這邊也是有一個(gè)很神奇的地方，構(gòu)建文件夾完成后，控制臺(tái)紅了一大片，出現(xiàn)如下報(bào)錯(cuò)

自動(dòng)熱重載錯(cuò)誤 WXML 文件編譯錯(cuò)誤] miniprogram/miniprogram_npm/@vant/weapp/等一系列問題，然后我就查找了相關(guān)文件將如下 注釋掉，在進(jìn)行編譯，紅色消失，把注釋的代碼還原在編譯，紅色沒出現(xiàn)，問題解決。

?typescript支持：

如果是使用typescript進(jìn)行小程序開發(fā)的話可以進(jìn)行這個(gè)步驟的配置，一般使用js進(jìn)行小程序開發(fā)的話可以直接跳過這個(gè)步驟就可以了。

安裝 miniprogram-api-typings：

# 通過 npm 進(jìn)行安裝
npm i -D miniprogram-api-typings
# 通過 yarn 進(jìn)行安裝
yarn add -D miniprogram-api-typings

在tsconfig.json中增加如下配置，以防止 tsc 編譯報(bào)錯(cuò)。

請(qǐng)將 path/to/node_modules/@vant/weapp 修改為項(xiàng)目的 node_modules 中 @vant/weapp所在的目錄。

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    },
    "lib": ["ES6"]
  }
}

引入組件：

以 Button 組件為例，只需要在app.json或index.json中配置 Button 對(duì)應(yīng)的路徑即可。所有組件文檔中的引入路徑均以 npm 安裝為例，如果你是通過下載源代碼的方式使用 @vant/weapp，請(qǐng)將路徑修改為項(xiàng)目中 @vant/weapp 所在的目錄。

// 通過 npm 安裝
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

當(dāng)我們引入組件時(shí)，沒有把具體的根目錄寫上時(shí)，控制臺(tái)便會(huì)報(bào)錯(cuò)，如下：

?加上具體的路徑后，報(bào)錯(cuò)解決，如下：

?使用組件：

引入組件后，可以在 wxml 中直接使用組件

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

?如果想使用其它類型的樣式，比如按鈕啥的，在vant官方里面找到button按鈕，根據(jù)需求引入即可

?Vant Weapp 定制全局主題樣式

在app.wxss中，寫入 CSS 變量，即可對(duì)全局進(jìn)行生效：

page{
  /* 定制primary按鈕的背景顏色和邊框顏色 */
  --button-primary-background-color:#f00;
  --button-primary-border-color:#0f0;
}

?如果想設(shè)置更多的 CSS 樣式，可以查看 Vant Weapp 官方文檔查看：

?配置文件打開是github網(wǎng)站內(nèi)容，網(wǎng)站有可能被墻，多點(diǎn)幾次就可以了。

?API的Promise化

API Promise化：指的是通過額外的配置，將官方提供的、基于回調(diào)函數(shù)的異步API，升級(jí)改造為基于

默認(rèn)情況下，小程序官方提供的異步API都是基于回調(diào)函數(shù)實(shí)現(xiàn)的，比如網(wǎng)絡(luò)請(qǐng)求的 API 需要安裝如下的方式調(diào)用：(缺點(diǎn)：容易造成回調(diào)地獄的問題，代碼可讀性、維護(hù)性差！)

wx.request({
    method:'';
    url:'';
    data:'';
    success:() => {}, //請(qǐng)求成功的回調(diào)函數(shù)
    fail:() => {},    //請(qǐng)求失敗的回調(diào)函數(shù)
    complete:() =>{}, //請(qǐng)求完成的回調(diào)函數(shù)
})

實(shí)現(xiàn) API Promise 化

在小程序中，實(shí)現(xiàn) API Promise 化主要依賴于 miniprogram-api-promise 這個(gè)第三方 npm 包，它的安裝和使用步驟如下：（推薦版本）

npm i -S miniprogram-api-promise@1.0.4

安裝完成后，所安裝的包需要再一次進(jìn)行 構(gòu)建 npm ，才能出現(xiàn)在miniprogram文件夾下：

小程序入口文件中(app.js)，只需調(diào)用一次 promisifyAll()方法，即可實(shí)現(xiàn)異步 API 的Promise化 ：

// app.js
import {promisifyAll} from './miniprogram/miniprogram_npm/miniprogram-api-promise/index'
const wxp = wx.p = {}
promisifyAll(wx,wxp)

調(diào)用Promise化異步API：

//頁(yè)面 .wxml結(jié)構(gòu)
<van-button type="primary" bindtap="getInfo">按鈕</van-button>
//頁(yè)面.js文件中，定義對(duì)應(yīng)的 tap 事件處理函數(shù)
syssc getInfo(){
  const res = await wx.p.request({
    method: 'GET',
    url: 'https://www.baidu,com', //舉例而已，百度實(shí)際不能使用
    data: {
      name:'張三',
      age:18
    },
  })
  console,log(res)
},

總結(jié) 

到此這篇關(guān)于微信小程序Vant組件庫(kù)的安裝與使用的文章就介紹到這了,更多相關(guān)微信小程序Vant組件庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論