国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Joyven / 2690人閱讀

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

1.安裝并引入JS-SDK依賴包 
這里是JS-SDK說明文檔
1.1 npm 下載依賴包 
npm install weixin-js-sdk --save
1.2.在需要用到jssdk的模塊引入 
import wx from "weixin-js-sdk";
1.3.檢查是否引入成功,可以在引入的模塊mounted中執行 
console.log(wx)
{config: ?, ready: ?, error: ?, checkJsApi: ?, onMenuShareTimeline: ?,?…}
addCard: ? (e)
checkJsApi: ? (e)
chooseCard: ? (e)
chooseImage: ? (e)
chooseWXPay: ? (e)
...
控制臺顯示以上代碼表示引入成功.
2.配置微信JS-SDK 
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用
wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過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; // 緯度，浮點數，范圍為90 ~ -90
            var longitude = res.longitude; // 經度，浮點數，范圍為180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒計
            var accuracy = res.accuracy; // 位置精度
            
          }
        });
      })
坑1: config:invalid signature 配置報錯;

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

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

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

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

安卓可以直接在網頁中這么獲取當前URL:

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

IOS就不行,你只能獲取到你剛進入頁面的URL;
解決的思路大概是
1.首先要判斷是否是IOS系統
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) {
            //獲取參數成功后配置
            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; // 緯度，浮點數，范圍為90 ~ -90
            var longitude = res.longitude; // 經度，浮點數，范圍為180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒計
            var accuracy = res.accuracy; // 位置精度
            console.log(latitude);
            this.latitude = latitude
          }
        });
      })
      
       // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。
      wx.error(function(res){
       
      });
     
    }
坑3:需要定時調用微信的API接口,設置定時無效(這個問題可能很傻) 
所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作
因此我們需要將定時 寫在wx.ready 方法里面,而不需要每次調用微信API的時候 wx.config一次.
wx.config({
    //配置
})
wx.ready({
//放到這里 是可以滴
setInterval(timer,5000)
})
3.使用高德地圖 
高德地圖API文檔
3.1注冊高德并申請Key 
首先，注冊開發者賬號，成為高德開放平臺開發者


登陸之后，在進入「應用管理」 頁面「創建新應用」


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

創建一個容器,給一個ID名字

給容器加一個樣式

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

在組將mounted方法中創建地圖實例

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一直爆這個錯誤，求教如何解決？

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103795.html

相關文章

  • Vue微信公眾號兼容微信JS-SDK，使用分享等功能

    摘要：你要是問我為什么會出現這種情況，等我什么時候進微信團隊了，我再給大家解答。。。 很久沒有寫文章了，最近項目是基于微信公眾號的Vue項目，有一個非常重要的分享功能，不搞不知道一搞不得了，發現vue-router和微信SDK配置有很大的兼容性問題，翻遍文檔，社區，博客，都沒有找到可以適合解決我這個問題的方法，最后是我們一起一個一個方法、一個一個api嘗試才找到解決辦法，現在和大家分享一下我...

    2json 評論0 收藏0

  • vue項目接入微信JSSDK的坑

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

    lieeps 評論0 收藏0

  • vue項目接入微信JSSDK的坑

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

    jsdt 評論0 收藏0

  • vue項目接入微信JSSDK的坑

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

    nodejh 評論0 收藏0

  • vue使用微信JS-SDK實現分享功能

    摘要：最近開發微信公眾號內嵌頁面，使用搭建的項目，由于業務需求，需要實現微信自定義分享功能，所以項目中集成微信。 最近開發微信公眾號內嵌H5頁面，使用vue搭建的項目，由于業務需求，需要實現微信自定義分享功能，所以項目中集成微信JS-SDK。微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、...

    ShowerSun 評論0 收藏0

發表評論

0條評論

Joyven

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<