uni-app卖座电影多端开发纪实(五):使用插件

228 阅读1分钟

@关于插件

  • 插件是uni-app极为强大的一个生态扩展功能;
  • 里面有用户写好的各种开源组件、插件、模块、项目模板、甚至完整工程;
  • 高质量Star多的插件导入即用,大大提高了跨端开发的效率!
  • DCloud插件市场就是一个前端多端生态的Github!
  • 大多数插件的兼容性还是到Vue2为止的,所以短期内多端开发还是主用Vue2;

马斯克:“Year! We buy Twitter, and then we copy WeChat!

@使用插件实现城市索引列表

  • 城市索引列表大家都见过,自己从零去开发还是需要花些工夫的!
  • 本例就直接使用一个现成的插件,兵不血刃实现这个功能!
  • 本例使用的t-index-list插件的类型属于uni_modules插件,类似于node_modules,是我们日常使用最多的一种插件;
  • 能白嫖的绝不要花时间开发,插件走起!

搜索插件市场

image.png

导入插件

image.png

秒间导入完成,此时工程下会多出一个uni_modules目录

image.png

uni_modules/xxx/components/xxx/xxx.vue这个路径是符合 easycom规范的,因此无需导入+声明,页面模板可以直接部署它!

页面部署插件

pages/sub/cities/cities.vue

  <!-- 城市列表插件 -->
  <t-index-address @select="select"></t-index-address>

用户点击回调

methods: {
  select(data) {
     console.log(data);//用户点击的城市数据
  },
},

然后就没有然后了!看看效果↓↓

插件效果

image.png

@爽爆有木有!


@本项目源码

😈 点赞收藏加关注了吗??

image.png

本项目源码 watch,follow,fork!!!

祝大家撸码愉快~