微信小程序开发地址选择模块基于vant-weapp组件(地址添加,地址编写,自动获取地址)

需求
用户自行填写地址
不要问我为什么需要这个模块，问我的话就是因为项目需要

我就讲讲为什么领导需要开发这个需求，因为在我们开发的平台上最进做了一个抽奖功能，奖是抽到了，那么问题来了用户又没填写地址该怎么办呢，所以开会的时候就把我这个苦逼的开发叫了过去，XXX我们系统少了地址这个东西你去做吧，微信小程序端添加一个按钮，用户可以自行填写地址进行记录，根据后端配置文件进行显示隐藏(因为这个自行填写地址只是某一时间段可以进行填写)。
分析
用户自行填写地址:
1.微信小程序需要两个页面，一个显示地址页面，一个编辑地址页面，显示地址页面检测是否存在地址，不存在地址可以添加地址，存在地址可以跳转到编辑地址页面进行编辑。
2.后台，接收前台传入的地址值存入到数据库中，返回成功或者失败。
实现
分析完需求之后二话不说开干，打开微信小程序，新建代码片段
然后微信小程序前台的设计是这样的

新增地址页面

编辑地址页面

效果图

核心代码如下
1.选择地图:
使用微信小程序自带的接口进行授权然后选择地图，返回值

 //选择地址
    wx.chooseLocation({
      success: function (res) {
        console.info(res);
        var userinfo = that.data.userinfo;
        userinfo.address = res.address;
        userinfo.realAddress = res.name;
        that.setData({
          userinfo: userinfo
        })
      },
    })
  },

2.CRUD地址对象
修改地址完后返回上一页，并把修改过后的值传到上一页，删除地址把要删除的地址对象返回上一页，或者添加地址把要添加的地址对象返回上一页，在上一页中需要编写onShow函数来进行值改变

  //修改地址
  modifyAddress: function () {
    var currentPage = getCurrentPages();
    var prevPage = currentPage[currentPage.length - 2]; //上一个页面
    var userinfo = this.data.userinfo; //获取当前的用户信息
    prevPage.setData({
      status: 'modify',
      userinfo: userinfo
    })
    wx.navigateBack({
      delta: 1
    })
    console.log(currentPage);
  }

//删除地址
  delAddress: function () {
    var currentPage = getCurrentPages();
    var prevPage = currentPage[currentPage.length - 2]; //上一个页面
    var userinfo = this.data.userinfo; //获取当前的用户信息
    prevPage.setData({
      status: 'delete',
      userinfo: userinfo
    })
    wx.navigateBack({
      delta: 1
    })
    console.log(currentPage);
  },

 //添加地址
  addAddress: function () {
    var currentPage = getCurrentPages();
    var prevPage = currentPage[currentPage.length - 2]; //上一个页面

    var userinfo = this.data.userinfo;

    prevPage.setData({
      status: 'add',
      userinfo: userinfo
    })
    wx.navigateBack({
      delta: 1
    })
    console.log(currentPage);
  },

3.onShow函数

 //获取返回页面的参数
  onShow: function () {
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; //当前页面
    let status = currPage.data.status;//获取上一个页面的状态(是否为CURD)
    let userinfo = currPage.data.userinfo;//获取上一个页面的地址信息
    var userinfos = this.data.userinfos;
    console.log(userinfo) //为传过来的值
 
    switch(status){
      //如果为添加,对值进行添加
      case "add":
        console.log("add>>>");
        console.log(userinfo);
        userinfo.id = userinfos.length+1;
        userinfos.push(userinfo);
        break;
      //如果为删除,对对应的值进行删除
      case "delete":
        console.log("delete>>>"+userinfo.id);
        userinfos[userinfo.id-1] = null;
        while(userinfos.length > 0 && userinfos[userinfos.length-1]==null){
            userinfos.pop();
        }
        break;
      //如果为修改,对对应值进行修改
      case "modify":
        console.log("modify>>>"+userinfo.id);
        userinfos[userinfo.id-1] = userinfo;
        break;
      default:

    }

代码结构如下

完整的代码比较多所以这不全部放上，csdn也放知道你们下载不起，我csdn也放，github也上传给你们白嫖，需要的自行下载，本demo下载完即可运行(需要自行下载微信小程序，然后导入)。
最后编写不易请各位多多支持！！！
github地址https://github.com/unkownc/workDemo