{"id":13601687,"url":"https://github.com/Rychou/mpvue-vant","last_synced_at":"2025-04-11T04:31:21.824Z","repository":{"id":33061017,"uuid":"146863744","full_name":"Rychou/mpvue-vant","owner":"Rychou","description":"mpvue中无缝接入Vant Weapp组件库，所有组件均可使用。","archived":false,"fork":false,"pushed_at":"2022-12-08T11:35:32.000Z","size":2740,"stargazers_count":407,"open_issues_count":24,"forks_count":68,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-06T01:09:04.433Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rychou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-31T08:25:50.000Z","updated_at":"2025-03-04T02:21:32.000Z","dependencies_parsed_at":"2023-01-14T23:15:37.095Z","dependency_job_id":null,"html_url":"https://github.com/Rychou/mpvue-vant","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rychou%2Fmpvue-vant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rychou%2Fmpvue-vant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rychou%2Fmpvue-vant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rychou%2Fmpvue-vant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rychou","download_url":"https://codeload.github.com/Rychou/mpvue-vant/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154982,"owners_count":21056543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T18:01:06.396Z","updated_at":"2025-04-11T04:31:21.794Z","avatar_url":"https://github.com/Rychou.png","language":"JavaScript","funding_links":[],"categories":["框架"],"sub_categories":["目录"],"readme":"## 介绍\r\n\r\n`mpvue-vant` 记录了我们团队开发中在 `mpvue` 中使用 `Vant Weapp` 组件库所踩下的坑，在这里分享给大家，让`mpvue` 开发者可以使用 `vant` 组件库进行开发，避免踩不必要的坑。\r\n\r\n此教程是在[dov-yih](https://github.com/dov-yih)一同协助下完成。经过测试，[Vant Weapp](https://youzan.github.io/vant-weapp/#/intro)下所有组件都能够在`mpvue`中使用\r\n\r\n- [demo 地址](./demo)\r\n- [更新日志](./blog/update.md)\r\n\r\n## 使用方法\r\n\r\n### 安装组件库\r\n\r\n\u003e 以下两种方式没有本质区别，都是要将组件库复制到 `static` 目录下。\r\n\r\n**npm 安装**\r\n\r\n在根目录下，命令行执行：\r\n\r\n```shell\r\nnpm i vant-weapp -S --production\r\n```\r\n\r\n安装完后，将 `node_modules/vant-weapp/dist` 目录下的所有文件，copy 至 `static/vant` 目录下。\r\n\r\n**克隆仓库**\r\n\r\n在本地找个位置（非项目目录），在命令行执行以下命令：\r\n\r\n```shell\r\ngit clone https://github.com/youzan/vant-weapp.git\r\n```\r\n\r\n克隆到本地后，将 `dist` 目录下的所有文件复制到你项目的 `/static/vant/` 目录下。\r\n\r\n### 引入组件\r\n\r\n在需要引入组件的页面目录下的 `main.json` 文件中，引入对应组件。\r\n\r\n```json\r\n{\r\n  \"usingComponents\": {\r\n    \"van-button\": \"/static/vant/button/index\",\r\n  }\r\n}\r\n```\r\n\r\n### 组件使用\r\n\r\n直接在页面的 `.vue` 文件中使用即可。\r\n\r\n```html\r\n\u003cvan-button\u003e测试\u003c/van-button\u003e\r\n```\r\n\r\n## 注意事项\r\n\r\n具体组件 api 文档参考[Vant Weapp](https://youzan.github.io/vant-weapp/#/intro)\r\n\r\n### 使用方式\r\n\r\nmpvue 和原生小程序的方式有所不同。可以参考[mpvue 文档](http://mpvue.com/)\r\n\r\n**数据绑定**\r\n\r\n原生小程序使用方式为\r\n\r\n```html\r\n\u003cbutton value=\"{{value}}\"\u003e按钮\u003c/button\u003e\r\n```\r\n\r\nmpvue 使用方式\r\n\r\n```html\r\n\u003cbutton v-bind:value=\"value\"\u003e按钮\u003c/button\u003e\r\n\u003cbutton :value=\"value\"\u003e按钮\u003c/button\u003e //或者\r\n```\r\n\r\n**事件监听**\r\n\r\n原生小程序使用方式\r\n\r\n```html\r\n\u003cbutton bind:click=\"onClick\"\u003e按钮\u003c/button\u003e\r\n```\r\n\r\nmpvue 使用方式\r\n\r\n```html\r\n\u003cbutton @click=\"onClick\"\u003e按钮\u003c/button\u003e\r\n```\r\n\r\n**特殊的组件引入**\r\n\r\n`vant` 中像 `notify` 这种操作反馈类的组件，都需要引入两个东西。\r\n\r\n- 组件的引入，这个在`main.json`中引入。\r\n\r\n- 方法的引入，需要在 `vue` 文件中 `import` 引入，值得注意的是，这里的引入不能使用绝对路径，可以用类似于这样的相对路径。\r\n\r\n  ```js\r\n  import Notify from '@/../static/notify/notify' //@是mpvue的一个别名，指向src目录\r\n  ```\r\n\r\n**事件的回调参数**\r\n\r\n`mpvue` 中获取 `event` 值与原生小程序有所不同。举例：\r\n\r\n```js\r\nonChange (event) { // 获取表单组件filed的值\r\n  console.log(event.mp.detail) // 注意加入mp\r\n}\r\n```\r\n\r\n### BUG 及报错处理方法\r\n\r\n**监听事件名**\r\n\r\n`mpvue` 里面无法监听原生小程序组件中的 `@click-icon` 这类 `kebab-case` 事件名，因此如果 API 文档里面有出现这样的监听名，那么需要手动修改源代码。\r\n\r\n可以改成驼峰式的监听名。\r\n\r\neg: 我在 `field` 组件中就遇到这个问题，我的做法是：\r\n\r\n```\r\n// static/vant/field/index.js\r\n\r\nthis.$emit('click-icon');\r\n\r\n// 修改为:\r\n\r\nthis.$emit('clickIcon');\r\n```\r\n\r\n**启动报错**\r\n\r\n一般的报错报错都可以通过一下流程处理。\r\n\r\n- 是否打开了微信开发者工具中的`ES6转ES5`功能。\r\n- 仔细检查代码和比对文档，看看是否有使用不当的地方。\r\n- 重新编译`npm run dev`或删掉`dist`目录重新`npm run dev`\r\n- 重启或更新微信开发者工具。\r\n\r\n若以上流程都走完了，还是无法解决报错，可以通过提交`issues`的方式，我来帮你解决。\r\n\r\n**引入组件报错**\r\n\r\n```shell\r\nVM54:1 thirdScriptError sdk uncaught third Error module \"static/vant/notify/index.js\" is not defined\r\n```\r\n\r\n解决办法是：打开小程序开发者工具中的**ES6 转 ES5**功能. [issues/#5](https://github.com/Rychou/mpvue-vant/issues/5#issuecomment-419620351)\r\n\r\n## 其他组件库\r\n\r\n目前比较好的组件库有三个，[Wux Weapp](https://wux-weapp.github.io/wux-weapp-docs/#/),[iview weapp](https://weapp.iviewui.com/),[Vant Weapp](https://youzan.github.io/vant-weapp/#/intro)。\r\n\r\n这三者都是用原生小程序写的组件库，因此理论上来说，在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样，有的更丰富，有的逻辑更完善，有的文档更清晰。因此用什么组件，还需要自己取舍。\r\n\r\n比如：三者中，唯有[Wux Weapp](https://wux-weapp.github.io/wux-weapp-docs/#/)有日历组件，而且它里面还有一些更高级的组件可以使用。\r\n\r\n使用方法上，几乎没有差异。值得注意的是，大家复制源代码到自己项目上时，应该复制`/dist/`目录下的文件。因为这里是经过编译后的。\r\n\r\n如果大家使用过程中遇到什么 BUG，可以通过提[issues](https://github.com/Rychou/mpvue-vant/issues)的方式让我知道，大家一起踩坑吧！\r\n\r\n## 分享两个小程序\r\n\r\n### 猫叫助手\r\n\r\n基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了`mpvue`中使用云开发的注意事项，[mpvue-cloud](https://github.com/Rychou/mpvue-cloud)\r\n\r\n收录各种猫叫声，帮助与猫咪交流，分享一些养猫的小知识等。\r\n\r\n![猫叫助手](https://ws3.sinaimg.cn/large/005BYqpgly1g22ii40s6kj325s0m8tcq.jpg)\r\n\r\n### 在书云\r\n\r\n这是我近期使用 `Taro` 开发框架开发的一款小程序，主要功能是提供可靠的 `书架管理` 功能，只需要扫一扫书籍背后的条形码即可添加书籍入库，你可以方便的在线上管理你的书架，查看书籍的基本信息，亦可以添加书评。\r\n\r\n该项目获得了[微信小程序 U 计划](https://edu.weixin.qq.com/cgi-bin/newreadtemplate?t=edu_portal/zh-hans/apply/apply-u-plan/index)的资助。目前项目正在开发中，欢迎大家体验反馈。\r\n\r\n![在书云](https://ws3.sinaimg.cn/large/005BYqpgly1g22igfh59bj325s0m8wig.jpg)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRychou%2Fmpvue-vant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRychou%2Fmpvue-vant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRychou%2Fmpvue-vant/lists"}