Vant Weapp有赞小程序ui组件

  • 文章介绍
  • 评价建议

  • 轻量、可靠的小程序 UI 组件库

    介绍

    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

    预览

    扫描下方小程序二维码,体验组件库示例:

    Vant Weapp有赞小程序ui组件

    背景知识

    使用 Vant Weapp 前,请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

    安装

    步骤一 通过 npm 安装

    需要注意的是 package.jsonnode_modules 必须在 miniprogram 目录下

    # 通过 npm 安装
    npm i @vant/weapp -S --production
    
    # 通过 yarn 安装
    yarn add @vant/weapp --production
    
    # 安装 0.x 版本
    npm i vant-weapp -S --production
    

    步骤二 构建 npm 包

    打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件

    Vant Weapp有赞小程序ui组件

    步骤三 修改 tsconfig.json

    如果你使用 typescript 开发小程序,需要在 tsconfig.json 中增加如下配置,防止 npm 构建后 tsc 编译报错

    请将path/to/node_modules/@vant/weapp修改为项目中 @vant/weapp 所在的目录

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
        }
      }
    }
    

    步骤四 修改 app.json

    将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。

    示例工程

    我们提供了一个示例工程,示例工程会帮助你了解如下内容:

    • 基于 Vant Weapp 搭建小程序应用
    • 样式覆盖方案

    使用

    引入组件

    以 Button 组件为例,只需要在app.jsonindex.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。

    // 通过 npm 安装
    // app.json
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
    
    // 通过下载源码使用 es6版本
    // app.json
    "usingComponents": {
      "van-button": "path/to/@vant/weapp/dist/button/index"
    }
    
    // 通过下载源码使用 es5版本
    // app.json
    "usingComponents": {
      "van-button": "path/to/@vant/weapp/lib/button/index"
    }
    

    使用组件

    引入组件后,可以在 wxml 中直接使用组件

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

    其他

    在开发者工具中预览示例小程序

    
    # 将项目克隆到本地
    git clone [email protected]:youzan/vant-weapp.git
    
    # 安装项目依赖
    cd vant-weapp && npm install
    
    # 执行组件编译
    npm run dev
    
    

    接着打开微信开发者工具,导入example目录的项目就可以预览示例了。

    项目地址:https://youzan.github.io/vant-weapp/#/quickstart#bu-zou-yi-tong-guo-npm-an-zhuang

    发表评论

  • 如本资源侵犯了您的权益,请联系投诉邮箱[email protected]进行举报!我们将在收到邮件的1个小时内处理完毕。

  • 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用!

  • OKMG(芒果源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售!

  • OKMG(芒果源码)客服QQ:29139260

  • OKMG(芒果源码)商务电话(仅对企业客户/个人用户请联系QQ客服):010-86463891

  • 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
  • 免责声明 芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:29139260

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: [email protected]),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系客服
    开通VIP 享更多特权,建议使用 QQ 登录