uni-app 打包APP端 引入腾讯选点组件

组件官网： https://lbs.qq.com/webApi/component/componentGuide/componentPicker

注意：官网的iframe调用方法是基于H5，故window获取返回信息的办法在app中不好使

1.建一个.html页面来存放地图组件链接

例： <iframe

            id="myMap"

            width="100%"

            height="100%”

            frameborder=0

            src=“选点组件链接"

        >

        </iframe>

<!-- 微信 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 -->

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<!-- uni 的 SDK -->

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

//待触发 UniAppJSBridgeReady 事件后，即可调用 uni 的 API。

document.addEventListener('UniAppJSBridgeReady', function() {

    //监听数据变化

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

           // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息

           var loc = event.data;

           if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'

                console.log('location', loc);

                //向app页面发送数据

                 uni.postMessage({

                      data: {

                          address: loc

                      }

                });

             }

      }, false);

});

2.在uni-app内建一个vue页面来嵌刚刚建的html页面

<web-view

            id="myMap"

            width="100%"

            height="100%”

            @message=“getMes” //这个方法可以获得html页uni.postMessage({})发送的数据

            :src=“.html页面"

        >

        </web-view>

注意：内嵌html页面的链接有外链和内链两种方式

外链：把页面放到服务器生成链接

内链：把html页面 放在  uni-app 项目根目录->hybrid->html  文件夹下

例： < web-view src = " /hybrid/html/local.html " > </ web-view >