Github代码地址

在开发小程序的过程中，遇到Taro整合vant-weapp的问题，记录如下，源代码参见本文开头的GitHub代码地址。

有兴趣的同学可以在查阅GitHub代码地址的show-user-vant-weapp分支，显示如何引入vant-weapp。

修改过如下几个文件

  1. config/index.js增加如下配置代码 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    copy: {
        patterns: [
        {
            from: 'src/components/vant-weapp/wxs/',
            to: 'dist/components/vant-weapp/wxs/'
            // ,
            // ignore: '*.js'
        } // 指定需要 copy 的目录
        ],
        options: {}
    },

  2. 修改pages/index/index.tsx增加如下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
        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'
        }
    }

  3. 修改pages/index/index.tsx的 Render 方法 增加如下代码

    1
    2
    3
    <van-button type="primary" size='small' onclick={this.onVantBtnClick.bind(this)}>
    纯粹为测试Vant-weapp，点击控制台输出日志
    </van-button>

  4. 修改pages/index/index.tsx的 onVantBtnClick 方法 增加如下代码 

    onVantBtnClick(e:any){
console.log(e)
}