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

資訊專欄INFORMATION COLUMN

VueJs單頁應用實現微信網頁授權及微信分享功能

doodlewind / 1021人閱讀

摘要:在實際開發中,無論是做端端還是微信公眾號等類型的項目的時候,或多或少都會涉及到微信相關的開發,最近公司項目要求實現微信網頁授權,并獲取微信用戶基本信息的功能及微信分享的功能,現在總算完成了,但開發過程中遇到好幾個坑。

在實際開發中,無論是做PC端、WebApp端還是微信公眾號等類型的項目的時候,或多或少都會涉及到微信相關的開發,最近公司項目要求實現微信網頁授權,并獲取微信用戶基本信息的功能及微信分享的功能,現在總算完成了,但開發過程中遇到好幾個坑。廢話不多說了,開始正題。
描述點

微信相關開發知識了解

怎么樣實現微信相關功能本地測試

微信網頁授權

微信分享

微信相關開發知識了解

微信公眾號的appId,AppSecret

當我們注冊一個微信公眾號后,便能夠得到一個appId(每個微信公眾號只有一個,一個微信公眾號唯一的標識)和appSecret(可以進行重置),這兩個信息是進行微信公眾號開發必不可少的,因為微信公眾號中幾乎所有功能的開發都與這兩個信息相關。

微信公眾號中IP白名單

在開發微信公眾功能的時候,需要我們添加IP白名單,這樣以便能夠獲取到access_token,關于access_token的介紹請看這里https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

網頁授權域名以及JS接口安全域名

網頁授權域名:在我們的應用中需要微信用戶進行登錄、獲取微信用戶基本信息的時候,需要設置這個域名

JS接口安全域名:在我們的應用中需要實現微信分享等功能,需要設置這個域名。

怎么樣實現微信相關功能本地測試

相對很多人都對這個問題比較感興趣,因為在進行涉及到微信公眾號中功能開發的時候,默認情況下我們是不能進行本地測試的,也就是說測試都需要將代碼進行部署才測試,但這非常不利于我們的測試開發,其實進行本地測試開發很簡單,只需要我們有一個域名就可以了,然后將我們本地的ip映射到這個域名上,就可以本地測試了。下面我就說說我是怎么做本地測試的.

因為購買域名需要進行備案操作之類的,比較麻煩,所以一般第三方平臺就可以讓我們得到一個域名。我是在natpp(ngrok)這個網站上注冊的https://natapp.cn/

我是花了五元錢購買了一個月的隧道,因為免費的不怎么靠譜,畢竟是免費的,哈哈。


注意,我們不能直接使用這個隧道,因為這個隧道是三級域名,無法用于微信開發,需要綁定一個二級域名或自主域名

當綁定完域名之后,在本地我們需要將本地ip進行映射穿透操作。
windows下打開dos窗口,輸入 natapp -authtoken 你的隧道的authtoken

將你在上面設置的二級域名添加到上述說的網頁授權域名以及JS接口安全域名

接下來便可以進行本地測試了.最后說一下,開發過程中下載微信開發工具進行調試也是不錯的選擇,下載地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

微信網頁授權

微信網頁授權的目的主要是實現三方站點微信的登錄、獲取微信用戶信息等

實現微信網頁授權獲取微信用戶的基本信息

先判斷當前瀏覽器是不是微信內置瀏覽器,微信網頁授權api: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

    isweixin() {
          const ua = window.navigator.userAgent.toLowerCase();
          if(ua.match(/MicroMessenger/i) == "micromessenger"){
              return true;
          } else {
              return false;
          }
      },

1 第一步:用戶同意授權,獲取code

2 第二步:通過code換取網頁授權access_token

3 第三步:刷新access_token(如果需要)

4 第四步:拉取用戶信息(需scope為 snsapi_userinfo)

5 附:檢驗授權憑證(access_token)是否有效

微信API里面關于這些都介紹得比較清楚的,我就說說在這個過程中我所遇到的問題,以及解決辦法

在第一步獲取code的時候,因為這個code在五分鐘之內只能夠使用一次,所以必須對這個code進行緩存起來。否則會出現"errcode":40163,"errmsg":"code been used, hints: [ req_id: nOCEBa0466th12 ]"或{"errcode":40029,"errmsg":"invalid code"} 錯誤。

微信分享

微信分享其實用得非常得多,我就簡單說下在vue-cli中怎么引入微信分享的sdk,以及怎么樣實現分享功能.

微信分享APi: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

首先引入sdk:

npm install weixin-js-sdk --save-dev

然后通過require或者import引入

import wx from "weixin-js-sdk";

微信分享中最重要的是獲取到簽名,才能夠實現微信的分享

再根據當前的url去獲取到所需要的參數來完成簽名的驗證,參數主要用appId
、nonceStr、timestamp、signature,然后通過wx對象的config方法去進行配置驗證簽名

 wx.config({
          debug: false,
          appId: appId, // 和獲取Ticke的必須一樣------必填,公眾號的唯一標識
          timestamp:timestamp, // 必填,生成簽名的時間戳
          nonceStr: nonceStr, // 必填,生成簽名的隨機串
          signature: signature,// 必填,簽名,見附錄1
          //需要分享的列表項:發送給朋友,分享到朋友圈,分享到QQ,分享到QQ空間
          jsApiList: [
            "onMenuShareAppMessage","onMenuShareTimeline",
            "onMenuShareQQ","onMenuShareQZone"
          ]
        });


         //處理驗證失敗的信息
        wx.error(function (res) {
          logUtil.printLog("驗證失敗返回的信息:",res);
        });
        //處理驗證成功的信息
        wx.ready(function () {
        //              alert(window.location.href.split("#")[0]);
          //分享到朋友圈
          wx.onMenuShareTimeline({
            title: _this.newDetailObj.title, // 分享標題
            link: window.location.href.split("#")[0], // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標
            success: function (res) {
              // 用戶確認分享后執行的回調函數
              logUtil.printLog("分享到朋友圈成功返回的信息為:",res);
              _this.showMsg("分享成功!")
            },
            cancel: function (res) {
              // 用戶取消分享后執行的回調函數
              logUtil.printLog("取消分享到朋友圈返回的信息為:",res);
            }
          });
          //分享給朋友
          wx.onMenuShareAppMessage({
            title: _this.newDetailObj.title, // 分享標題
            desc: _this.desc, // 分享描述
            link: window.location.href.split("#")[0], // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標
            type: "", // 分享類型,music、video或link,不填默認為link
            dataUrl: "", // 如果type是music或video,則要提供數據鏈接,默認為空
            success: function (res) {
              // 用戶確認分享后執行的回調函數
              logUtil.printLog("分享給朋友成功返回的信息為:",res);
            },
            cancel: function (res) {
              // 用戶取消分享后執行的回調函數
              logUtil.printLog("取消分享給朋友返回的信息為:",res);
            }
          });
          //分享到QQ
          wx.onMenuShareQQ({
            title: _this.newDetailObj.title, // 分享標題
            desc: _this.desc, // 分享描述
            link: window.location.href.split("#")[0], // 分享鏈接
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標
            success: function (res) {
              // 用戶確認分享后執行的回調函數
              logUtil.printLog("分享到QQ好友成功返回的信息為:",res);
            },
            cancel: function (res) {
              // 用戶取消分享后執行的回調函數
              logUtil.printLog("取消分享給QQ好友返回的信息為:",res);
            }
          });

          //分享到QQ空間
          wx.onMenuShareQZone({
            title: _this.newDetailObj.title, // 分享標題
            desc: _this.desc, // 分享描述
            link: window.location.href.split("#")[0], // 分享鏈接
            imgUrl: _this.newDetailObj.thu_image, // 分享圖標
            success: function (res) {
              // 用戶確認分享后執行的回調函數
              logUtil.printLog("分享到QQ空間成功返回的信息為:",res);
            },
            cancel: function (res) {
              // 用戶取消分享后執行的回調函數
              logUtil.printLog("取消分享到QQ空間返回的信息為:",res);
            }
          });
        });

在這個過程中出現的錯誤就是:config:invalid signature,這個錯誤就說明簽名不對,這時候需要靜下心來去想想,然后進行排除,我最后發現原來是當前的url的錯誤,看了網上很多都是url需要進行編碼

let url = encodeURIComponent(window.location.href.split("#")[0]);

就不錯了,最后來看看效果

一般出現這個問題,大部分都是url的問題哦。

今天就寫到這里,需要交流的小伙伴請加群:526450553

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

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

相關文章

  • VueJs單頁應用實現微信網頁授權微信分享功能

    摘要:在實際開發中,無論是做端端還是微信公眾號等類型的項目的時候,或多或少都會涉及到微信相關的開發,最近公司項目要求實現微信網頁授權,并獲取微信用戶基本信息的功能及微信分享的功能,現在總算完成了,但開發過程中遇到好幾個坑。 在實際開發中,無論是做PC端、WebApp端還是微信公眾號等類型的項目的時候,或多或少都會涉及到微信相關的開發,最近公司項目要求實現微信網頁授權,并獲取微信用戶基本信息的...

    BicycleWarrior 評論0 收藏0
  • 前端思考 - 收藏集 - 掘金

    摘要:并嘗試用為什么你統計的方式是錯的掘金翻譯自工程師的文章。正如你期望的,文中的前端開發單一職責原則前端掘金單一職責原則又稱單一功能原則,面向對象五個基本原則之一。 單頁式應用性能優化 - 首屏數據漸進式預加載 - 前端 - 掘金前言 針對首頁和部分頁面打開速度慢的問題,我們開始對單頁式應用性能進行優化。本文介紹其中一個方案:基于 HTTP Chunk 的首屏數據漸進式預加載方案,該方案總...

    LinkedME2016 評論0 收藏0
  • 移動端H5多頁開發拍門磚經驗

    摘要:以下會以其中一個以公積金頁面開發項目作為例子,介紹移動端的一些常見問題和使用作為進行多頁開發的經驗。所以要想在微信開發調試工具中獲取,我們需要使用一種叫做內網穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);兩年前剛接觸移動端開發,剛開始比較疑惑,每次遇到問題都是到社區里提問...

    hightopo 評論0 收藏0

發表評論

0條評論

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