Sep12

【原创】如何在微信小程序开发中正确的使用vant ui组件

Author: leeon  Click: 6134   Date: 2018.09.12 @ 23:17:02 pm Category: 程序语言

微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html),但是这种导入模式和使用模式有别于我们使用的npm调用。今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源。

第一步:

在小程序工程的根目录下执行:

npm i vant-weapp -S --production

第二步:

保证当前你的微信开发者工具是最新版本,然后点击执行“构建npm“


构建成功后会提示:



同时项目根目录中会多出一个目录“miniprogram_npm”,这个就是小程序可以识别的npm第三方库。



第三步:

这时候当我们需要在一个页面中调用vant组件,那么就要在对应的页面json中添加类似如下配置:


{
"usingComponents":{
"van-button":"/miniprogram_npm/vant-weapp/button/index"
}
}
接着你就可以在wxml中直接调用这个ui组件了。

注意,对于vant库来说其实你并不需要在页面对应的js中require vant-weapp组件。


TAG:   微信小程序 weapp vant

    评论
    • 提交

    分类

    标签

    归档

    最新评论

    Abyss在00:04:28评论了
    Linux中ramdisk,tmpfs,ramfs的介绍与性能测试
    shallwe99在10:21:17评论了
    【原创】如何在微信小程序开发中正确的使用vant ui组件
    默一在09:04:53评论了
    Berkeley DB 由浅入深【转自架构师杨建】
    Memory在14:09:22评论了
    【原创】最佳PHP框架选择(phalcon,yaf,laravel,thinkphp,yii)
    leo在17:57:04评论了
    shell中使用while循环ssh的注意事项

    我看过的书

    链接

    其他

    访问本站种子 本站平均热度:8823 c° 本站链接数:1 个 本站标签数:464 个 本站被评论次数:94 次