代码详解React Js 微信分享封装
本篇文章给大家分享的内容是代码详解React Js 微信分享封装,有着一定的参考价值,有需要的朋友可以参考一下
话不多说,直接上源代码:
/** * Created by wuyakun on 2017/5/23. */import Fetch from './FetchIt'; import API_URL from './url'; import Share from './Share';let wxUtils = {};////////////////////////////////////////////////////////////////////////////////////////// 分享/////////////////////////////////////////////////////////////////////////////////////////** getshareinfo?type= type :goods 课程详情 team 团详情 id 课程id tid 团ID * @param config * @param shareInfo {imgUrl,title,description,link} */function share2wx(config, shareInfo) { const share = new Share({ appid: config.appid, // 必填,公众号的唯一标识 timestamp: config.timestamp, // 必填,生成签名的时间戳 nonceStr: config.nonceStr, // 必填,生成签名的随机串 signature: config.signature, // 必填,签名 }); share.init(Object.assign({}, shareInfo)); } function getConfig(shareInfo) { let href = window.location.href.split('#')[0]; const url = encodeURIComponent(href /*window.location.href*/); Fetch.get(`${API_URL.mobile.signature_path}?url=${url}`).then(data => { share2wx(data, shareInfo); }); }/** * @param shareInfo */wxUtils.share = function (shareInfo) { getConfig(shareInfo); };////////////////////////////////////////////////////////////////////////////////////////// 分享结束/////////////////////////////////////////////////////////////////////////////////////////** * 是否开启右上角Menu * @param open */wxUtils.optionMenu = function (open = true) { if (open) { openOptionMenu(); } else { disabledOptionMenu(); } };/** * 是否禁用右上角 */function disabledOptionMenu() { if (typeof WeixinJSBridge === "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady(true), false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady(true)); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(true)); } } else { onBridgeReady(true); } }/** * 开启menu */function openOptionMenu() { if (typeof WeixinJSBridge === "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady(false), false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady(false)); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(false)); } } else { onBridgeReady(false); } } function onBridgeReady(disable = true) { if (typeof WeixinJSBridge !== "undefined") WeixinJSBridge.call(disable ? 'hideOptionMenu' : 'showOptionMenu'); }/** * 隐藏微信网页底部的导航栏 * @param disable */wxUtils.disabledToolbar = function (disable = true) { document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个API隐藏底部导航栏 WeixinJSBridge.call(disable ? 'hideToolbar' : 'showToolbar'); }); }; export default wxUtils;
// 分享function Share(config) { wx.config({ debug: false, // 开启调试模式 appId: config.appid, // 必填,公众号的唯一标识 timestamp: config.timestamp, // 必填,生成签名的时间戳 nonceStr: config.nonceStr, // 必填,生成签名的随机串 signature: config.signature, // 必填,签名,见附录1 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareWeibo'], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); } Share.prototype = { constructor: Share, init(config) { this.imgUrl = config.imgUrl; this.link = config.link; // this.musicPath = config.musicPath; this.description = config.description; this.title = config.title; wx.ready(() => { // if (this.musicPath) { // document.getElementById('musicIcon').play(); // } this.toFriend(); this.toTimeline(); }); wx.error(res => { console.log(`${res}`); }); }, toFriend() { wx.onMenuShareAppMessage({ imgUrl: this.imgUrl, link: this.link, title: this.title, desc: this.description, success: function () { // 用户确认分享后执行的回调函数 }, }); }, toTimeline() { wx.onMenuShareTimeline({ imgUrl: this.imgUrl, link: this.link, title: this.title, desc: this.description, success: function () { // 用户确认分享后执行的回调函数 }, }); }, };export default Share;
//开启分享 BaseComponent.wxUtils.optionMenu(true); BaseComponent.wxUtils.share({ imgUrl: activityData.sharePicUrl, title: activityData.shareTitle, description: activityData.shareContent, link: url, });
Atas ialah kandungan terperinci 代码详解React Js 微信分享封装. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menurut berita dari laman web ini pada 17 April, TrendForce baru-baru ini mengeluarkan laporan, mempercayai bahawa permintaan untuk produk platform Blackwell baharu Nvidia adalah menaik, dan dijangka memacu jumlah kapasiti pengeluaran pembungkusan CoWoS TSMC meningkat lebih daripada 150% pada 2024. Produk platform baharu NVIDIA Blackwell termasuk GPU siri B dan kad pemecut GB200 yang menyepadukan CPU GraceArm NVIDIA sendiri. TrendForce mengesahkan bahawa rantaian bekalan pada masa ini sangat optimistik tentang GB200, dengan penghantaran dijangka melebihi satu juta unit pada 2025, menyumbang 40-50% daripada GPU mewah Nvidia. Nvidia merancang untuk menyampaikan produk seperti GB200 dan B100 pada separuh kedua tahun ini, tetapi pembungkusan wafer huluan mesti terus menggunakan produk yang lebih kompleks.

PHP, Vue dan React: Bagaimana untuk memilih rangka kerja bahagian hadapan yang paling sesuai? Dengan pembangunan berterusan teknologi Internet, rangka kerja bahagian hadapan memainkan peranan penting dalam pembangunan Web. PHP, Vue dan React ialah tiga rangka kerja bahagian hadapan yang mewakili, masing-masing mempunyai ciri dan kelebihan tersendiri. Apabila memilih rangka kerja bahagian hadapan yang hendak digunakan, pembangun perlu membuat keputusan termaklum berdasarkan keperluan projek, kemahiran pasukan dan pilihan peribadi. Artikel ini akan membandingkan ciri dan penggunaan tiga rangka kerja bahagian hadapan PHP, Vue dan React.

Penyepaduan rangka kerja Java dan rangka kerja React: Langkah: Sediakan rangka kerja Java bahagian belakang. Buat struktur projek. Konfigurasikan alat binaan. Buat aplikasi React. Tulis titik akhir REST API. Konfigurasikan mekanisme komunikasi. Kes praktikal (SpringBoot+React): Kod Java: Tentukan pengawal RESTfulAPI. Kod tindak balas: Dapatkan dan paparkan data yang dikembalikan oleh API.

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Laman web ini melaporkan pada 9 Julai bahawa pemproses siri "Strix" seni bina AMD Zen5 akan mempunyai dua penyelesaian pembungkusan StrixPoint yang lebih kecil akan menggunakan pakej FP8, manakala StrixHalo akan menggunakan pakej FP11. Sumber: sumber videocardz @Olrak29_ Pendedahan terbaru ialah saiz pakej FP11 StrixHalo ialah 37.5mm*45mm (1687 milimeter persegi), yang sama dengan saiz pakej LGA-1700 bagi CPU Intel AlderLake dan RaptorLake. Phoenix APU terbaru AMD menggunakan penyelesaian pembungkusan FP8 dengan saiz 25*40mm, yang bermaksud bahawa StrixHalo's F

Dengan merangkum kod, fungsi C++ boleh meningkatkan kecekapan pembangunan GUI: Pengkapsulan kod: Fungsi kod kumpulan ke dalam unit bebas, menjadikan kod lebih mudah difahami dan diselenggara. Kebolehgunaan semula: Fungsi mencipta kefungsian biasa yang boleh digunakan semula merentas aplikasi, mengurangkan pertindihan dan ralat. Kod ringkas: Kod berkapsul menjadikan logik utama ringkas dan mudah dibaca serta nyahpepijat.

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut

Vue.js sesuai untuk projek kecil dan sederhana dan lelaran yang cepat, sementara React sesuai untuk aplikasi besar dan kompleks. 1) Vue.js mudah digunakan dan sesuai untuk situasi di mana pasukan tidak mencukupi atau skala projek kecil. 2) React mempunyai ekosistem yang lebih kaya dan sesuai untuk projek dengan prestasi tinggi dan keperluan fungsional yang kompleks.
