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

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

摘要：安裝并引入依賴包這里是說明文檔下載依賴包在需要用到的模塊引入檢查是否引入成功可以在引入的模塊中執(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端時(shí)才會打印。
    appId: "", // 必填，公眾號的唯一標(biāo)識,管理公眾號頁面可以獲取
    timestamp: "", // 必填，生成簽名的時(shí)間戳,后臺返回
    nonceStr: "", // 必填，生成簽名的隨機(jī)串,后臺返回
    signature: "",// 必填，簽名,后臺返回
    jsApiList: ["openLocation","getLocation"] // 必填，需要使用的JS接口列表,寫入自己用到的接口名稱
});

然后等待配置完成后,在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)錯;

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

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

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

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

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

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

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

---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; // 緯度，浮點(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)證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
      wx.error(function(res){
       
      });
     
    }

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

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

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

3.使用高德地圖

高德地圖API文檔

3.1注冊高德并申請Key

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

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

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

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

給容器加一個樣式

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

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

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

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

參考

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/103795.html

發(fā)表評論

登陸后可評論

0條評論

Joyven

男|高級講師

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

TA的文章

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

閱讀 722·2021-11-24 09:39
SSL證書為什么會有有效期？如何有效避免SSL證書過期？

閱讀 2409·2021-11-22 13:54
RackNerd：美國便宜VPS促銷，AMD Ryzen 3900X CPU，NVMe SSD硬盤，

閱讀 2259·2021-09-23 11:46
HTML5的離線存儲

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

閱讀 2733·2019-08-30 15:54
5.React中組件通信問題

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

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

發(fā)表評論

0條評論

Joyven

男|高級講師

TA的文章

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

SSL證書為什么會有有效期？如何有效避免SSL證書過期？

RackNerd：美國便宜VPS促銷，AMD Ryzen 3900X CPU，NVMe SSD硬盤，

HTML5的離線存儲

css--圖片廊

5.React中組件通信問題

使用 CSS 追蹤用戶

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

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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