在開(kāi)發(fā)小程序的過(guò)程中,遇到Taro
整合vant-weapp
的問(wèn)題务甥,記錄如下薛躬,源代碼參見(jiàn)本文開(kāi)頭的GitHub代碼地址。
有興趣的同學(xué)可以在查閱GitHub代碼地址的show-user-vant-weapp
分支馍忽,顯示如何引入vant-weapp
。
修改過(guò)如下幾個(gè)文件
-
config/index.js
增加如下配置代碼copy: { patterns: [ { from: 'src/components/vant-weapp/wxs/', to: 'dist/components/vant-weapp/wxs/' // , // ignore: '*.js' } // 指定需要 copy 的目錄 ], options: {} },
-
修改
pages/index/index.tsx
增加如下代碼usingComponents: { // 'van-row': '/static/vant/di/index', 'van-col': '/static/vant/dist/col/index', // 'wxs': '../../components/vant-weapp/wxs/utils', // 'van-action-sheet': // '/components/vant/action-sheet/index', 'van-cell-group': // '/components/vant/cell-group/index', 'van-area': // '/components/vant/area/index', 'van-field': '/components/vant/field/index', 'van-button' : '../../components/vant-weapp/button/index', 'van-panel' : '../../components/vant-weapp/panel/index' // 'van-tabbar': // '/components/vant/tabbar/index', 'van-card': '/components/vant/card/index', // 'van-tabbar-item': '/components/vant/tabbar-item/index' } }
-
修改
pages/index/index.tsx
的Render
方法 增加如下代碼<van-button type="primary" size='small' onclick={this.onVantBtnClick.bind(this)}> 純粹為測(cè)試Vant-weapp燕差,點(diǎn)擊控制臺(tái)輸出日志 </van-button>
-
修改
pages/index/index.tsx
的onVantBtnClick
方法 增加如下代碼onVantBtnClick(e:any){ console.log(e) }