小程序map组件二——[蓝色波浪篇]引入并配置Vant Weapp(详细)+腾讯地图地点搜索插件获取实时位置实战

今天出第二篇，这一篇也是非常的重要，为了后续的项目能够更好的搭建起来，这一步也是非常的重要的💁‍♀️💁‍♀️💁‍♀️

效果展示

引入Vant Weapp

Vant Weapp官网
引入他的原因非常简单，那就是——我实在是不会写样式🥶🥶🥶
引入也非常简单，就几步就好，官网里也有安装教程，真的很简单
这里我没有使用typescript噢，所以就没有配置typescript，如果有需要的朋友可以跟着官网来，就多加一步而已，加个配置😎

1.项目目录下，右键打开控制台
这里我使用的是npm安装，没有Node.js的朋友可以先去安装一下，或者使用其他方式都可以，打开官网，我们一步步来

npm i @vant/weapp -S --production

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

3.修改 project.config.json

这里是重点！！！！不然后续你引入组件的时候就又“多一层”了，不明白我说什么的可以看看我曾经的憨憨行为

憨憨本憨
在我引入组件的时候，你们看到了什么😐这是我第一次使用它的时候犯的一次错，大家记住啦！

4.构建 npm 包

在你构建完成之后，在你的项目目录下

5.引用组件啦
除了上面的憨憨行为，这才是正确的引入组件的方式：

腾讯地图插件使用

这里要进行一些配置
腾讯地图开发者插件官网文档链接
里面讲的非常的详细了，我这里不重复了，这里选用的是地图选点插件

第一次弄的朋友可能会有这种提示语，你点击添加就好了，它会自动帮你安装的，后续用到的很多插件都是这样的

小程序开发

js文件：只需要在address方法里填入你的key和你key所对应的应用名称就可以使用啦🍟

index.wxml

<view class="container">
  <van-button icon="star-o" type="info" bindtap="address">点击选择地址van-button>

  <view class="detail" style
1
2
3