위 챗 공중 호 개발 편(경위 획득,지도 내 비게 이 션)

1.jssdk 도입
JS 인 터 페 이 스 를 호출 할 페이지 에 다음 JS 파일 을 도입 합 니 다.(https 지원)http://res.wx.qq.com/open/js/jweixin-1.6.0.js
       만약 에 서비스 안정성 을 계속 향상 시 키 려 면 상기 자원 이 방문 할 수 없 을 때 방문 을 바 꿀 수 있다.http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (https 지원).
       비고:AMD/CMD 표준 모듈 로 딩 방법 으로 불 러 오 는 것 을 지원 합 니 다.
//  
npm install weixin-js-sdk --save
//  
import wx from 'weixin-js-sdk';

2. config 인터페이스 주입 권한 검증 설정
       첫 번 째 단계:현재 페이지 의 url 가 져 오기(요청 인터페이스의 매개 변수 로 배경 에서 config 인증 설정 의 매개 변수 값 을 바 꿉 니 다)
       두 번 째 단계:현재 위 챗 버 전이 지정 한 JS 인 터 페 이 스 를 지원 하 는 지 확인 하고 일괄 판단 을 지원 합 니 다.
       STEP 3:지리 적 위치 획득 도입 API(위도 가 져 오기:wx.getLocation()  지도 열기:wx.openLocation()
getLoationInfo(){ //    
            var that = this;
            var _url = window.location.href;
            Api.ajax({
                key: "getSignatureUrl",
                type: "GET",
                data: {
                    url:_url
                }
            }).then(res => {
                wx.config({
                    debug: false, //       ,     api         alert  ,         ,   pc   ,       log  ,  pc      。
                    appId: res.appId, //   ,        
                    timestamp: res.timestamp, //   ,        
                    nonceStr: res.nonceStr, //   ,        
                    signature: res.signature,//   ,  js  ,
                    jsApiList: ['checkJsApi','getLocation', 'openLocation','hideOptionMenu'] //   ,     JS    ,       
                });
                wx.ready(function(){
                    // 1              JS   ,      
                    wx.checkJsApi({
                        jsApiList : [ 'getLocation' ],
                        success : function(res) {
                            //          ,   api true,    false//  :{"checkResult":{"getLocation":true},"errMsg":"checkJsApi:ok"}
                            if (res.checkResult.getLocation == false) {
                                alert('        ,     JS  ,           !');
                                return;
                            }
                        }
                    });
                    wx.getLocation({
                        type: 'wgs84',
                        success: function (res) {                           
                            var latitude = res.latitude; //   ,   ,   90 ~ -90
                            var longitude = res.longitude ; //   ,   ,   180 ~ -180。
                            console.log(latitude,longitude)
                            //      (               )
                            wx.openLocation({
                                latitude: Number(this.latitude), //   ,   ,   90 ~ -90
                                longitude: Number(this.longitude), //   ,   ,   180 ~ -180。
                                name: storeDetail.storeName, //    
                                address: storeDetail.storeAddress, //       
                                scale: 16, //       ,   ,   1~28。     
                                infoUrl: '' //                ,     
                            });
                            
                        },
                        cancel:function(res){
                            // alert('        ',res);

                            // console.log(res)
                        }
                    });
                })
            },res => {
                // console.log(res)
            });
        }

좋은 웹페이지 즐겨찾기