分类： 前端

1 2 3 4 5 6

//a页面 uni.setStorageSync('test_key', 123);   // b页面 // 在onshow 或者onload 中取值 uni.getStorageSync('test_key');

项目需求使用uniapp 在小程序和h5端使用地图并支持选点

遇到以下问题：

小程序内运行<iframe>会是空的

使用web-view 组件传入腾讯地图的src后也不行

没有办法只能去做适配 零散代码如下:

manifest.json

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/* 小程序特有相关 */ "mp-weixin": {     "appid": "U appid xxxxxxxxx",     "setting": {         "urlCheck": false,         "es6": true     },     "usingComponents": true,     "permission": {         "scope.userLocation": {             "desc": "你的位置信息将用于小程序定位"         }     },     "plugins": {         "chooseLocation": {             "version": "1.0.5",             "provider": "wx76a9a06e5b4e693e"         }     } },

H5端选点后，获取到选点坐标内容 做相关处理

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//url https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=U3MBZ-VGILU-WIPVM-2UEDJ-HOZT6-XAF6G&referer=myapp   <uni-popup ref="popup" type="bottom" class="buttom_popup">     <iframe :src=this.url id="mapPage" width="100%" height="500rpx" frameborder=0></iframe>    </uni-popup>   onLoad: function(e) {       //#ifdef H5       window.addEventListener('message', function(event) {         var loc = event.data;         if (loc && loc.module == 'locationPicker') {             that.changeLoc(loc);         }       }, false);       //#endif },

小程序端引入组件，初始化

1 2 3 4 5 6 7 8 9 10

onShow: function(){     //#ifdef MP-WEIXIN     const chooseLocation = requirePlugin('chooseLocation')     const location = chooseLocation.getLocation() // 如果点击确认选点按钮，则返回选点结果对象，否则返回null     console.log("您所选择的位置：", location)     if(location){         //拿到选点后做相关逻辑处理     }       //#endif },

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

//part view  <input @click="open" disabled="true" name="coordinates" class="uni-input" placeholder="地图坐标" v-model="formData.coordinates"/>   //part function open(){     //#ifdef H5     //如果是h5 通过popup层打开iframe窗口调用地图组件     this.$refs.popup.open()     //#endif           //#ifdef MP-WEIXIN     //如果是小程序 调用function 跳转地图页面选点 选点后会回到本，在onShow里接收选点信息，再做相关逻辑处理     this.getAddress();     //#endif       }, getAddress() {     const key = 'U3MBZ-VGILU-WIPVM-2UEDJ-HOZT6-XAF6G' //使用在腾讯位置服务申请的key     const referer = 'Leo' //调用插件的app的名称           //初始化选点坐标      const location = JSON.stringify({         latitude: xxxxxx,         longitude: xxxxxxx     })       wx.navigateTo({         url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location     }); },

对比一下在写housing的时候和customer优化过之后

Housing

Customer

明显不用eval的代码可读性和可维护性要高很多了

只需要在data里把数据结构先配置好

然后就可以用变量名拼接 像这样通过参数处理多重类型

1 2 3 4 5 6 7 8 9

checkDate(id){                 //判断该元素是否存在，不存在择移除                   if(this.form.peitao.indexOf(id)>0){                     this.form.peitao.splice(this.form.peitao.indexOf(id), 1);                     return;                   }                   this.form.peitao.push(id);                   return;                 },

<template>

<view>

<view class="page-section page-section-gap" v-show="show_map">

<view>lat: {{this.lat}}</view>

<view>lng: {{this.lng}}</view>

<button @click="open">打开弹窗</button>

<uni-popup ref="popup" type="bottom" class="buttom_popup">

<iframe :src=this.url id="mapPage" width="100%" height="500rpx" frameborder=0>

</iframe>

</uni-popup>

</view>

</view>

</template>

<script>

import uniPopup from '../../components/uni-popup/uni-popup.vue'

import uniPopupMessage from '../../components/uni-popup/uni-popup-message.vue'

import uniPopupDialog from '../../components/uni-popup/uni-popup-dialog.vue'

export default {

components: {

uniPopup,

uniPopupMessage,

uniPopupDialog

},

onLoad() {

var that = this

window.addEventListener('message', function(event) {

var loc = event.data;

if (loc && loc.module == 'locationPicker') {

that.changeLoc(loc);

}

}, false);

},

data() {

return {

lat:'32.64671',

lng:'117.01504',

show_map:true,

url: "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=you_key&referer=myapp&coord=32.64671,117.01504"

}

},

methods: {

changeLoc:function(loc){

this.lat = loc.latlng.lat

this.lng = loc.latlng.lng

},

open(){

this.$refs.popup.open()

}

}

}

</script>

<style>

.page-section{

padding-top:0rpx;

}

.buttom_popup{

background: #007AFF;

}

</style>