关于小程序地图选点和图片上传

最近做项目时发现一个问题，写个随笔，记录下解决思路

1、问题描述：

表单内容包括地址、小区、图片上传。

当我利用地图选点插件将选点数据显示在表单上之后，我在小区字段上添加文字。

微信截图_20200830171402.png

接着上传图片。当我选择完图片返回表单时发现小区字段还原成改之前的状态。

微信截图_20200830171454.png

这并不是我想要的，于是我开始着手解决这个问题。

---

2、Bug引起原因

用过腾讯位置服务地图选点的开发者都知道，从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象。

const chooseLocation = requirePlugin('chooseLocation');
Page({
    // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
    onShow () {
        // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
        const location = chooseLocation.getLocation();
        console.log('onShow')
    }
})

图片上传组件

由于图片上传后也会触发onShow生命周期，重新从插件中获取location，将添加的文字又被覆盖成原来的状态。

---

3、思路整理

OK，已经知道了图片上传会触发onShow，要实现小区字段不被覆盖，可以在触发onShow时不执行chooseLocation.getLocation()，常规操作是设置一个变量去判断他到底执不执行。

1.设置uploadTriggerOnShow

data: {
    ...
    uploadTriggerOnShow: false
}

2.在uploadSuccess中赋值

uploadSuccess(e) {
    console.log('upload success', e.detail)
    this.setData({
        uploadTriggerOnShow: true
    })
},

3.在onShow中console.log(this.data.uploadTriggerOnShow)查看变量是否改变

一整套流程操作下来发现uploadTriggerOnShow并没改变，原来程序在图片上传后是先触发的onShow，然后再执行uploadSuccess。

---

4、思路转换

在不改变程序运行顺序的情况下，只能改变思路，既然设置uploadTriggerOnShow行不通，那就设置locationTriggerOnShow，在地图选点插件页面跳转时设置true，chooseLocation.getLocation()之后再设置回false。

1.设置locationTriggerOnShow

data: {
    ...
    locationTriggerOnShow: false
}

2.在跳转时设置true

wx.navigateTo({
    url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=&category='
})
this.setData({
    locationTriggerOnShow: true
});

3.onShow时增加if判断

onShow() {
    const location = chooseLocation.getLocation()
    if (location && this.data.locationTriggerOnShow) {
        ...
        this.setData({
            locationTriggerOnShow: false
        });
    }
}

完美解决~