成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

微信公眾號頁面(VUE)中如何配置微信JS-SDK和高德地圖,以及遇到的一些問題記錄

Joyven / 2859人閱讀

摘要：安裝并引入依賴包這里是說明文檔下載依賴包在需要用到的模塊引入檢查是否引入成功可以在引入的模塊中執(zhí)行控制臺顯示以上代碼表示引入成功配置微信所有需要使用的頁面必須先注入配置信息，否則將無法調(diào)用開啟調(diào)試模式調(diào)用的所有的返回值會

1.安裝并引入JS-SDK依賴包 
這里是JS-SDK說明文檔
1.1 npm 下載依賴包 
npm install weixin-js-sdk --save
1.2.在需要用到j(luò)ssdk的模塊引入 
import wx from "weixin-js-sdk";
1.3.檢查是否引入成功,可以在引入的模塊mounted中執(zhí)行 
console.log(wx)
{config: ?, ready: ?, error: ?, checkJsApi: ?, onMenuShareTimeline: ?,?…}
addCard: ? (e)
checkJsApi: ? (e)
chooseCard: ? (e)
chooseImage: ? (e)
chooseWXPay: ? (e)
...
控制臺顯示以上代碼表示引入成功.
2.配置微信JS-SDK 
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用
wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
    appId: "", // 必填，公眾號的唯一標識,管理公眾號頁面可以獲取
    timestamp: "", // 必填，生成簽名的時間戳,后臺返回
    nonceStr: "", // 必填，生成簽名的隨機串,后臺返回
    signature: "",// 必填，簽名,后臺返回
    jsApiList: ["openLocation","getLocation"] // 必填，需要使用的JS接口列表,寫入自己用到的接口名稱
});

然后等待配置完成后,在ready中使用微信提供的API

wx.ready(function(){
        wx.getLocation({
          type: "wgs84", // 默認為wgs84的gps坐標，如果要返回直接給openLocation用的火星坐標，可傳入"gcj02"
          success: function (res) {
            var latitude = res.latitude; // 緯度，浮點數(shù)，范圍為90 ~ -90
            var longitude = res.longitude; // 經(jīng)度，浮點數(shù)，范圍為180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒計
            var accuracy = res.accuracy; // 位置精度
            
          }
        });
      })
坑1: config:invalid signature 配置報錯;

首先我們不能用chorme來調(diào)試這個config,沒有任何反應
然后網(wǎng)上各種搜基本可以確實是URL的問題

微信規(guī)定 簽名的URL要與當前頁面URL一致！

解決方案看這個問題,將此頁面的URL 動態(tài)送給后臺,生成簽名.

坑2 安卓和IOS獲取URL的不同導致注冊報錯

安卓可以直接在網(wǎng)頁中這么獲取當前URL:

location.href.split("#")[0]

IOS就不行,你只能獲取到你剛進入頁面的URL;
解決的思路大概是
1.首先要判斷是否是IOS系統(tǒng)
2.如果是IOS 我們緩存一個入口URL然后注冊,如果不是IOS直接使用location.href.split("#")[0]URL進行注冊

---config.js 全局定義一個變量

global.entryUrl = location.href.split("#")[0];

偽代碼如下:

 mounted(){
      let url;
      if (publicFun.isIOS()) {//判斷是否是IOS
        url = this.PUBLICCONFIG.entryUrl;
      } else {
        url = location.href.split("#")[0];
      }
      
      //傳參給后臺 獲取 appId/timestamp/nonceStr/signature
      api.getJsConfig({
        "url":url
      },{
        success:function (res) {
            //獲取參數(shù)成功后配置
            wx.config({
              debug: true, 
              appId:  res.data.appId, 
              timestamp:res.data.timestamp , 
              nonceStr:res.data.nonceStr,
              signature: res.data.signature,
              jsApiList: ["openLocation","getLocation"] 
            });
        }
      })
      
      //微信配置成功
       wx.ready(function(){
        console.log("配置成功")
        wx.getLocation({
          type: "wgs84", 
          success: function (res) {
            var latitude = res.latitude; // 緯度，浮點數(shù)，范圍為90 ~ -90
            var longitude = res.longitude; // 經(jīng)度，浮點數(shù)，范圍為180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒計
            var accuracy = res.accuracy; // 位置精度
            console.log(latitude);
            this.latitude = latitude
          }
        });
      })
      
       // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
      wx.error(function(res){
       
      });
     
    }
坑3:需要定時調(diào)用微信的API接口,設(shè)置定時無效(這個問題可能很傻) 
所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作
因此我們需要將定時 寫在wx.ready 方法里面,而不需要每次調(diào)用微信API的時候 wx.config一次.
wx.config({
    //配置
})
wx.ready({
//放到這里 是可以滴
setInterval(timer,5000)
})
3.使用高德地圖 
高德地圖API文檔
3.1注冊高德并申請Key 
首先，注冊開發(fā)者賬號，成為高德開放平臺開發(fā)者


登陸之后，在進入「應用管理」 頁面「創(chuàng)建新應用」


為應用添加 Key，「服務平臺」一項請選擇「 Web 端 ( JSAPI ) 」
3.2 在項目index.html中引入高德腳本標簽 

3.3創(chuàng)建一個高德地圖的實例

創(chuàng)建一個容器,給一個ID名字


 


給容器加一個樣式


.page-location-map{
      width: 100%;
      height: 100%;
    }


在組將mounted方法中創(chuàng)建地圖實例


let Map = new AMap.Map("map", {
        zoom: 11,//級別
        center: [116.397428, 39.90923],//中心點坐標
        viewMode: "3D" //使用3D視圖
      })


運行項目后,你就會看到一個北京天安門的地圖了.接下來你應該知道怎么做了 對吧?


參考


1.vue-router的history模式在IOS微信分享下url不變的坑以及解決辦法
2.微信公眾平臺, config:invalid signature一直爆這個錯誤，求教如何解決？

           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103795.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    Vue微信公眾號兼容微信JS-SDK，使用分享等功能
    
                                                     
    摘要：你要是問我為什么會出現(xiàn)這種情況，等我什么時候進微信團隊了，我再給大家解答。。。

很久沒有寫文章了，最近項目是基于微信公眾號的Vue項目，有一個非常重要的分享功能，不搞不知道一搞不得了，發(fā)現(xiàn)vue-router和微信SDK配置有很大的兼容性問題，翻遍文檔，社區(qū)，博客，都沒有找到可以適合解決我這個問題的方法，最后是我們一起一個一個方法、一個一個api嘗試才找到解決辦法，現(xiàn)在和大家分享一下我...
    
                                                   
                          
    
                                
    
                                    2json
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue項目接入微信JSSDK的坑
    
                                                     
    摘要：微信說明文檔分享的坑根據(jù)的文檔，很多人都是在初始化的配置的時候，傳入的當前的地址不正確。同樣的，給微信初始化的加入對應的參數(shù)。


date: 2018-12-13 15:23:09
用于記錄接入微信JS-SDK的坑，以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候，心里是迷茫而又恐懼。因為，聽說坑特別多，后來發(fā)現(xiàn)自己的親身體驗到了這一點。
支付的坑
1、當前URL未注冊
...
    
                                                   
                          
    
                                
    
                                    lieeps
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue項目接入微信JSSDK的坑
    
                                                     
    摘要：微信說明文檔分享的坑根據(jù)的文檔，很多人都是在初始化的配置的時候，傳入的當前的地址不正確。同樣的，給微信初始化的加入對應的參數(shù)。


date: 2018-12-13 15:23:09
用于記錄接入微信JS-SDK的坑，以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候，心里是迷茫而又恐懼。因為，聽說坑特別多，后來發(fā)現(xiàn)自己的親身體驗到了這一點。
支付的坑
1、當前URL未注冊
...
    
                                                   
                          
    
                                
    
                                    jsdt
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue項目接入微信JSSDK的坑
    
                                                     
    摘要：微信說明文檔分享的坑根據(jù)的文檔，很多人都是在初始化的配置的時候，傳入的當前的地址不正確。同樣的，給微信初始化的加入對應的參數(shù)。


date: 2018-12-13 15:23:09
用于記錄接入微信JS-SDK的坑，以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候，心里是迷茫而又恐懼。因為，聽說坑特別多，后來發(fā)現(xiàn)自己的親身體驗到了這一點。
支付的坑
1、當前URL未注冊
...
    
                                                   
                          
    
                                
    
                                    nodejh
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    vue使用微信JS-SDK實現(xiàn)分享功能
    
                                                     
    摘要：最近開發(fā)微信公眾號內(nèi)嵌頁面，使用搭建的項目，由于業(yè)務需求，需要實現(xiàn)微信自定義分享功能，所以項目中集成微信。

最近開發(fā)微信公眾號內(nèi)嵌H5頁面，使用vue搭建的項目，由于業(yè)務需求，需要實現(xiàn)微信自定義分享功能，所以項目中集成微信JS-SDK。微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、...
    
                                                   
                          
    
                                
    
                                    ShowerSun
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<