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

Joyven 發(fā)布于2019-08-23 17:05 / 2767人閱讀

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

1.安裝并引入JS-SDK依賴包

這里是JS-SDK說(shuō)明文檔

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)
...
控制臺(tái)顯示以上代碼表示引入成功.

2.配置微信JS-SDK

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用

wx.config({
    debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
    appId: "", // 必填，公眾號(hào)的唯一標(biāo)識(shí),管理公眾號(hào)頁(yè)面可以獲取
    timestamp: "", // 必填，生成簽名的時(shí)間戳,后臺(tái)返回
    nonceStr: "", // 必填，生成簽名的隨機(jī)串,后臺(tái)返回
    signature: "",// 必填，簽名,后臺(tái)返回
    jsApiList: ["openLocation","getLocation"] // 必填，需要使用的JS接口列表,寫(xiě)入自己用到的接口名稱
});

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

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

坑1: config:invalid signature 配置報(bào)錯(cuò);

首先我們不能用chorme來(lái)調(diào)試這個(gè)config,沒(méi)有任何反應(yīng)
然后網(wǎng)上各種搜基本可以確實(shí)是URL的問(wèn)題

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

解決方案看這個(gè)問(wèn)題,將此頁(yè)面的URL 動(dòng)態(tài)送給后臺(tái),生成簽名.

坑2 安卓和IOS獲取URL的不同導(dǎo)致注冊(cè)報(bào)錯(cuò)

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

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

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

---config.js 全局定義一個(gè)變量

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

偽代碼如下:

 mounted(){
      let url;
      if (publicFun.isIOS()) {//判斷是否是IOS
        url = this.PUBLICCONFIG.entryUrl;
      } else {
        url = location.href.split("#")[0];
      }
      
      //傳參給后臺(tái) 獲取 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; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
            var longitude = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒計(jì)
            var accuracy = res.accuracy; // 位置精度
            console.log(latitude);
            this.latitude = latitude
          }
        });
      })
      
       // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
      wx.error(function(res){
       
      });
     
    }

坑3:需要定時(shí)調(diào)用微信的API接口,設(shè)置定時(shí)無(wú)效(這個(gè)問(wèn)題可能很傻)

所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作
因此我們需要將定時(shí) 寫(xiě)在wx.ready 方法里面,而不需要每次調(diào)用微信API的時(shí)候 wx.config一次.

wx.config({
    //配置
})
wx.ready({
//放到這里 是可以滴
setInterval(timer,5000)
})

3.使用高德地圖

高德地圖API文檔

3.1注冊(cè)高德并申請(qǐng)Key

首先，注冊(cè)開(kāi)發(fā)者賬號(hào)，成為高德開(kāi)放平臺(tái)開(kāi)發(fā)者
登陸之后，在進(jìn)入「應(yīng)用管理」 頁(yè)面「創(chuàng)建新應(yīng)用」
為應(yīng)用添加 Key，「服務(wù)平臺(tái)」一項(xiàng)請(qǐng)選擇「 Web 端 ( JSAPI ) 」

3.2 在項(xiàng)目index.html中引入高德腳本標(biāo)簽

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

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

給容器加一個(gè)樣式

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

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

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

運(yùn)行項(xiàng)目后,你就會(huì)看到一個(gè)北京天安門(mén)的地圖了.接下來(lái)你應(yīng)該知道怎么做了對(duì)吧?

參考

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

云服務(wù)器 GPU云服務(wù)器關(guān)于微信公眾號(hào)的問(wèn)題云服務(wù)器和微信公眾號(hào)無(wú)交互分享java視頻的微信公眾號(hào) 微信公眾號(hào)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103795.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Joyven

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Powershell 安裝不同文件格式的方法記錄

閱讀 693·2021-11-24 09:39
SSL證書(shū)為什么會(huì)有有效期？如何有效避免SSL證書(shū)過(guò)期？

閱讀 2364·2021-11-22 13:54
RackNerd：美國(guó)便宜VPS促銷(xiāo)，AMD Ryzen 3900X CPU，NVMe SSD硬盤(pán)，

閱讀 2231·2021-09-23 11:46
HTML5的離線存儲(chǔ)

閱讀 3276·2019-08-30 15:55
css--圖片廊

閱讀 2706·2019-08-30 15:54
5.React中組件通信問(wèn)題

閱讀 2438·2019-08-30 14:18
使用 CSS 追蹤用戶

閱讀 1567·2019-08-29 14:15
使用移動(dòng)自適應(yīng)布局+easy mock實(shí)現(xiàn)移動(dòng)界面的簡(jiǎn)單實(shí)現(xiàn)

閱讀 2759·2019-08-29 13:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

Vue微信公眾號(hào)兼容微信JS-SDK，使用分享等功能

vue項(xiàng)目接入微信JSSDK的坑

vue項(xiàng)目接入微信JSSDK的坑

vue項(xiàng)目接入微信JSSDK的坑

vue使用微信JS-SDK實(shí)現(xiàn)分享功能

發(fā)表評(píng)論

0條評(píng)論

Joyven

男|高級(jí)講師

TA的文章

Powershell 安裝不同文件格式的方法記錄

SSL證書(shū)為什么會(huì)有有效期？如何有效避免SSL證書(shū)過(guò)期？

RackNerd：美國(guó)便宜VPS促銷(xiāo)，AMD Ryzen 3900X CPU，NVMe SSD硬盤(pán)，

HTML5的離線存儲(chǔ)

css--圖片廊

5.React中組件通信問(wèn)題

使用 CSS 追蹤用戶

使用移動(dòng)自適應(yīng)布局+easy mock實(shí)現(xiàn)移動(dòng)界面的簡(jiǎn)單實(shí)現(xiàn)

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！