小程式 — wepy中使用有讚的vant-weapp元件

摘要： 說下在wepy框架中如何使用開源元件，以有讚的vant元件為例，學會了這個其它的開源元件引入使用方式都一個道理。 1、安裝 $ cnpm i vant-weapp -S --production 安裝vant 2、引入並使用 ...

說下在wepy框架中如何使用開源元件，以有讚的vant元件為例，學會了這個其它的開源元件引入使用方式都一個道理。

1、安裝

$ cnpm i vant-weapp -S --production

2、引入並使用

• 下載完成以後進入 node_modules/_vant_weapp 下的 dist資料夾 複製一份到 src/components 資料夾下，並替換名稱為 vant ；

• 在頁面的 config 中使用原生 usingComponents 屬性引入元件；

config = {
navigationBarTitleText: '首頁',
usingComponents: {
'van-button': '../components/van/button/index'
}
};

• 然後就可以在頁面中使用了。

<template>
<view class="home">
<van-button type="default">預設按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>
</view>
</template>

3、問題

• 如果出現提示一直找不到檔案，有可能是由於快取導致的，執行以下清空下快取就ok：

$ wepy build --no-cache --watch

• 如何修改顏色大小等樣式？

  很簡單，因為引入這個 van t小程式元件，沒有像在 vue中 經過了 webpack 打包，所以可以直接去原始碼中修改。