首页 > 电脑专区 > 微信教程 >

微信小程序脱坑记之VantUI使用area进行省市选择

来源:互联网 2023-02-20 23:08:32 217

最近接了一个项目需要做微信小程序,基本上是第一次正式做小程序的项目,途中遇到很多坑,所以准备写一个经验系列。使用的是MPVue VantUI,这次又遇到了选择省市的问题,VantUI这个还是略坑的,特别又有MPVue,分享一下解决的前后,希望对大家有所帮助。zk6办公区 - 实用经验教程分享!

微信小程序脱坑记之VantUI使用area进行省市选择zk6办公区 - 实用经验教程分享!

工具/原料

  • Visual Studio Code
  • 微信开发者工具
  • Windows 10 电脑一台

方法/步骤

  • 1

    官网介绍了数据格式,但是这个格式一定要是符合VantUI的呀,表示很难将当前系统的数据转换为这个格式,还好我在VantUI的github上找到了area.js,然后将整个数据重新导入了项目数据库。首先找到area的说明,如图。zk6办公区 - 实用经验教程分享!

    微信小程序脱坑记之VantUI使用area进行省市选择zk6办公区 - 实用经验教程分享!

  • 1相关内容非法爬取自百度经验
  • 2

    然后往下滑,找到area.js的路径,下载。我这里放在了我项目中utils目录下。zk6办公区 - 实用经验教程分享!

    微信小程序脱坑记之VantUI使用area进行省市选择zk6办公区 - 实用经验教程分享!

  • 3

    使用过程:先引入vant-area和vant-popup。zk6办公区 - 实用经验教程分享!

    微信小程序脱坑记之VantUI使用area进行省市选择zk6办公区 - 实用经验教程分享!

  • 4

    template中写UI,放vant-area和一个vant-popup,大概意思就是点击输入框,弹出一个popup来选择省和市。zk6办公区 - 实用经验教程分享!

    微信小程序脱坑记之VantUI使用area进行省市选择zk6办公区 - 实用经验教程分享!

  • 5

    脚本中需要定义一些变量和选择后点击确定触发的方法,如图。zk6办公区 - 实用经验教程分享!

    微信小程序脱坑记之VantUI使用area进行省市选择zk6办公区 - 实用经验教程分享!

  • 6

    编译后,在开发者工具中可以看到效果如图。zk6办公区 - 实用经验教程分享!

    微信小程序脱坑记之VantUI使用area进行省市选择zk6办公区 - 实用经验教程分享!

  • 注意事项

    • 喜欢我的文章,别忘了点赞 收藏哦!
    • 不花一分钱,小小“点赞 收藏”就是笔者更新的动力!配合分享效果更佳哦~

    以上方法由办公区教程网摘抄自百度经验可供大家参考!zk6办公区 - 实用经验教程分享!


    标签: 小程序微信

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码