Rumah hujung hadapan web tutorial js 代码详解React Js 微信分享封装

代码详解React Js 微信分享封装

Apr 09, 2018 pm 03:50 PM
javascript react enkapsulasi

本篇文章给大家分享的内容是代码详解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;
Salin selepas log masuk
// 分享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;
Salin selepas log masuk
//开启分享
        BaseComponent.wxUtils.optionMenu(true);
        BaseComponent.wxUtils.share({
            imgUrl: activityData.sharePicUrl,
            title: activityData.shareTitle,
            description: activityData.shareContent,
            link: url,
        });
Salin selepas log masuk

Atas ialah kandungan terperinci 代码详解React Js 微信分享封装. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

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

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

TrendForce: Produk platform Blackwell Nvidia memacu kapasiti pengeluaran CoWoS TSMC untuk meningkat sebanyak 150% tahun ini TrendForce: Produk platform Blackwell Nvidia memacu kapasiti pengeluaran CoWoS TSMC untuk meningkat sebanyak 150% tahun ini Apr 17, 2024 pm 08:00 PM

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? PHP, Vue dan React: Bagaimana untuk memilih rangka kerja bahagian hadapan yang paling sesuai? Mar 15, 2024 pm 05:48 PM

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 bahagian hadapan Penyepaduan rangka kerja Java dan rangka kerja React bahagian hadapan Jun 01, 2024 pm 03:16 PM

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 Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

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

Saiz pakej AMD 'Strix Halo” FP11 terdedah: bersamaan dengan Intel LGA1700, 60% lebih besar daripada Phoenix Saiz pakej AMD 'Strix Halo” FP11 terdedah: bersamaan dengan Intel LGA1700, 60% lebih besar daripada Phoenix Jul 18, 2024 am 02:04 AM

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

Bagaimanakah fungsi C++ meningkatkan kecekapan pembangunan GUI dengan merangkum kod? Bagaimanakah fungsi C++ meningkatkan kecekapan pembangunan GUI dengan merangkum kod? Apr 25, 2024 pm 12:27 PM

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.

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Jan 05, 2024 pm 01:37 PM

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 vs React: Pertimbangan khusus projek Vue.js vs React: Pertimbangan khusus projek Apr 09, 2025 am 12:01 AM

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.

See all articles