uniapp微信公眾號H5分享

如果項目文件node_modules中沒有weixin-js-sdk文件,則直接使用本文章提供的;

如果不生效,則在template.h5.html中引入

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

首先引入weixin-js-sdk

<script>import * as weixin from 'weixin-js-sdk'import * as UserApi from '@/api/user'export default {data() {return {}},onLoad(options) {this.weixinShareInfo();},methods: {weixinShareInfo(){var that = this;//獲取當前url然后傳遞給后臺獲取授權和簽名信息var urls = window.location.href.split('#')[0]; //當前網頁的URL,不包含#及其后面部分console.log('888:',window.location.href.split('#')[0]);var data = {urls:urls}//獲取到微信分享相關配置UserApi.fenxiang(data, { load: true }).then(res => {if(res.data && res.data.signData){console.log('res.data.signData:',res.data.signData);weixin.config({debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。appId: res.data.signData.appId, // 必填,公眾號的唯一標識timestamp: res.data.signData.timestamp, // 必填,生成簽名的時間戳nonceStr: res.data.signData.nonceStr, // 必填,生成簽名的隨機串signature: res.data.signData.signature,// 必填,簽名jsApiList: ["onMenuShareTimeline","onMenuShareQQ","onMenuShareAppMessage","updateAppMessageShareData","updateTimelineShareData"] // 必填,需要使用的JS接口列表});weixin.ready(function(){console.log(999999999998888888888);weixin.checkJsApi({jsApiList: ['updateAppMessageShareData',"updateTimelineShareData"], // 需要檢測的JS接口列表,所有JS接口列表見附錄2,success: function(res2) {// 以鍵值對的形式返回,可用的api值true,不可用為false// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}// config信息驗證后會執行ready方法,所有接口調用都必須在config接口獲得結果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。weixin.updateAppMessageShareData({ title: '測試標題', // 分享標題desc: res.data.signData.intro, // 分享描述link: res.data.signData.url, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致imgUrl: res.data.signData.fximg, // 分享圖標success: function () {// 設置成功console.log('===分享===');}})weixin.updateTimelineShareData({title: '測試標題', // 分享標題desc: res.data.signData.intro, // 分享描述link: res.data.signData.url, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致imgUrl: res.data.signData.fximg, // 分享圖標success: function () {// 設置成功console.log('===分享===');}})},fail: function(err){console.log('checkJsApi:',err);}});})weixin.error(function(err){console.log('err:',err);// config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對于SPA可以在這里更新簽名。})}}).catch(err => {})},}}
</script>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/696117.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/696117.shtml
英文地址,請注明出處:http://en.pswp.cn/news/696117.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

vue3框架組件自動導入unplugin-vue-components

1.安裝 npm i unplugin-vue-components -save-dev 2.配置 我這里用的是Vue CLI&#xff0c;所以要在vue.config.js文件中添加配置&#xff0c;官網中有寫不同打包工具的配置寫法 框架我使用的是Element Plus&#xff0c;使用前去官網查看自己的框架是否支持&#xff0c;主流…

LLM之RAG實戰(二十七)| 如何評估RAG系統

有沒有想過今天的一些應用程序是如何看起來幾乎神奇地智能的&#xff1f;這種魔力很大一部分來自于一種叫做RAG和LLM的東西。把RAG&#xff08;Retrieval Augmented Generation&#xff09;想象成人工智能世界里聰明的書呆子&#xff0c;它會挖掘大量信息&#xff0c;準確地找到…

電腦黑屏什么都不顯示怎么辦 電腦開機黑屏不顯示任何東西的4種解決辦法

相信有很多網友都有經歷電腦開機黑屏不顯示任何東西&#xff0c;找了很多方法都沒處理好&#xff0c;其實關于這個的問題&#xff0c;首先還是要了解清楚開機黑屏的原因&#xff0c;才能夠對癥下藥&#xff0c;下面大家可以跟小編一起來看看怎么解決吧 電腦開機黑屏不顯示任何…

【無刷電機學習】基礎概念及原理介紹(持續更新中...)

目錄&#xff08;2024.02.22版&#xff09; 1 定義 2 各種電機優勢比較 2.1 有刷與無刷比較 2.2 交流與直流比較 2.3 內轉子與外轉子比較 2.4 低壓BLDC的一些優點 3 基本原理 3.1 單相無刷電機 3.2 三相無刷電機 4 驅動方法 4.1 六步換相控制 4.1.1 基本原理 4…

突發!AI獨角獸「竹間智能」被曝停工停產6個月

大家好我是二狗。 今天早上起來刷朋友圈&#xff0c;看到一張截圖——AI創企竹間智能&#xff0c;宣稱因為公司所處的經營環境艱難&#xff0c;部分部門和崗位將從即日起停工停產6個月。 圖源&#xff1a;&#xff08;企服科學&#xff09; 下面是文字版&#xff1a; 由于公司…

Web服務器基礎介紹

目錄 Web服務器基礎介紹 一、HTML是什么&#xff1f; 二、靜態網頁和動態網頁 1、靜態網頁 2、動態網頁 3、動態網頁語言 PHP JSP Python Ruby 三、HTTP協議 1、HTTP協議是什么&#xff1f; 2、HTTP請求訪問的方法 3、GET與POST比較 GET&#xff1a; POST&…

Linux網絡編程(三-UDP協議)

目錄 一、UDP概述 二、UDP的首部格式 三、UDP緩沖區 四、基于UDP的應用層協議 五、常見問題 一、UDP概述 UDP(User Datagram Protocol&#xff0c;用戶數據協議報)是傳輸層協議&#xff0c;提供不可靠服務&#xff0c;其特點包括&#xff1a; 無連接&#xff1a;知道對端…

CSP-202309-3-梯度求解

CSP-202309-3-梯度求解 作為一個算法小白&#xff0c;本人第一次接觸大模擬的題&#xff0c;本題的算法參考自&#xff1a;【CSP】202309-3 梯度求解 解題思路 1.輸入處理 getchar();&#xff1a;從標準輸入讀取一個字符。這里它的作用可能是用來“吃掉”&#xff08;消耗&a…

Kafka_04_Topic和日志

Kafka_04_Topic和日志 Topic/PartitionTopicPartition 日志存儲存儲格式日志清理刪除壓縮 Topic/Partition Topic/Partition: Kafka中消息管理的基礎單位 Topic和Partition并不實際存在(僅邏輯上的概念) 如: Topic和Partition關系 // 每個日志文件可對應多個日志分段, 其還可…

緩存篇—緩存擊穿

在很多場景下&#xff0c;我們的業務通常會有幾個數據會被頻繁地訪問&#xff0c;比如秒殺活動&#xff0c;這類被頻地訪問的數據被稱為熱點數據。 如果緩存中的某個熱點數據過期了&#xff0c;此時大量的請求訪問了該熱點數據&#xff0c;就無法從緩存中讀取&#xff0c;直接…

《UE5_C++多人TPS完整教程》學習筆記22 ——《P23 記錄加入的玩家(Couting Incoming Players)》

本文為B站系列教學視頻 《UE5_C多人TPS完整教程》 —— 《P23 記錄加入的玩家&#xff08;Couting Incoming Players&#xff09;》 的學習筆記&#xff0c;該系列教學視頻為 Udemy 課程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻譯版&#xff0c;UP主&#xff…

前端面試問題(jwt/布局/vue數組下標/扁平化/菜單樹形/url api/新版本)

前端面試問題(jwt/布局/vue數組下標/扁平化/菜單樹形/url api/新版本) 1. jwt鑒權邏輯 前端 JWT 鑒權邏輯通常涉及在發起請求時攜帶 JWT&#xff0c;并在接收到響應后處理可能的授權問題。 1. 用戶登錄&#xff1a; 用戶提供憑證&#xff1a; 用戶在登錄界面輸入用戶名和密碼…

如何使用Docker部署MongoDB并結合內網穿透實現遠程訪問本地數據庫

文章目錄 前言1. 安裝Docker2. 使用Docker拉取MongoDB鏡像3. 創建并啟動MongoDB容器4. 本地連接測試5. 公網遠程訪問本地MongoDB容器5.1 內網穿透工具安裝5.2 創建遠程連接公網地址5.3 使用固定TCP地址遠程訪問 正文開始前給大家推薦個網站&#xff0c;前些天發現了一個巨牛的 …

2024最佳住宅代理IP服務商有哪些?

跨境出海已成為了近幾年的最熱趨勢&#xff0c;大批量的企業開始開拓海外市場&#xff0c;而海外電商領域則是最受歡迎的切入口。新興的tiktok、Temu&#xff0c;老牌的Amazon、Ebay&#xff0c;熱門的Etsy、Mecari等等都是藍海一片。跨境入門并不難&#xff0c;前期的準備中不…

深入理解文件查看命令:cat、more、less、tail、head

在Linux系統中&#xff0c;有許多命令用于查看文件的內容&#xff0c;其中包括cat、more、less、tail和head。這些命令提供了不同的方式來瀏覽文本文件&#xff0c;適用于各種查看需求。在本篇博客中&#xff0c;我們將深入介紹這些命令&#xff0c;并通過示例演示它們的用法。…

Spring Boot打war包部署到Tomcat,訪問頁面404 !!!

水善利萬物而不爭&#xff0c;處眾人之所惡&#xff0c;故幾于道&#x1f4a6; 文章目錄 Spring Boot打war包部署到Tomcat&#xff0c;訪問頁面404 &#xff01;&#xff01;&#xff01;解決辦法&#xff1a;檢查Tomcat版本和Jdk的對應關系&#xff0c;我的Tomcat是6.x&#x…

Sping基礎篇----掌握Sping的控制反轉/依賴注入的概念【實戰案例總結】

作為一名對技術充滿熱情的學習者&#xff0c;我一直以來都深刻地體會到知識的廣度和深度。在這個不斷演變的數字時代&#xff0c;我遠非專家&#xff0c;而是一位不斷追求進步的旅行者。通過這篇博客&#xff0c;我想分享我在某個領域的學習經驗&#xff0c;與大家共同探討、共…

SMMU介紹

SMMU&#xff08;System Memory Management Unit&#xff09;是一種硬件設備&#xff0c;其作用是在虛擬地址空間和物理地址空間之間提供地址轉換的功能。它通常用于處理虛擬化環境中的 I/O 設備&#xff0c;例如虛擬機中的設備訪問或者容器環境中的設備隔離。 SMMU 的主要作用…

KVM虛擬機的克隆方式

話不多說&#xff0c;直接上操作 首先確定我們要克隆的模板機器&#xff0c;這樣可以方便我們后續克隆許多機器 IP獲取最好就是dhcp模式&#xff0c;這樣克隆出來的機器就不需要自己再去改ip了 確定需要克隆的模板機以后&#xff0c;先關機再執行克隆操作 virsh shutdown ser…

【SiamFC】《Fully-Convolutional Siamese Networks for Object Tracking》

ECCV 2016 Workshops 文章目錄 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 The OTB-13 benchmark5.3 The VOT benchmarks5.4 Dataset size 6 Conclusion&#xff08;own&#xff09;/ Future wo…