Ngomong -ngomong, aplikasi biasanya memiliki pintu masuk untuk dibagikan di platform sosial, dan ada juga kerangka kerja yang baik untuk berbagi halaman web. Namun, dengan pengembangan HTML5 yang berkelanjutan, halaman web seluler menjadi semakin populer dalam kehidupan kita. Jadi bagaimana cara menyelesaikan berbagi di ponsel kita? Omong -omong, platform berbagi utama memiliki SDK untuk Android dan iOS. Sebagai pengembang, kami hanya perlu mengintegrasikan SDK ke dalam proyek kami. Melalui antarmuka eksternal yang disediakan, kita dapat dengan mudah menyelesaikan fungsi berbagi; Sedangkan untuk halaman web, ada banyak kerangka kerja berbagi yang sangat baik di internet, seperti: berbagi BSHARE dan berbagi Jiathis; Kami dapat dengan mudah berintegrasi ke dalam proyek kami; Tetapi kita perlu berupaya menerapkan berbagi di halaman web seluler. Saya pikir saat ini, kami dapat berbagi dengan menghubungi klien yang diinstal oleh pengguna. Apa yang perlu disebutkan di sini adalah berbagi WeChat. Saat kami berbagi di halaman web, kode QR berbagi biasanya muncul. Kami menggunakan aplikasi WeChat untuk memindai dan berbagi. Kami tidak dapat beroperasi di ponsel. Kita perlu membuka aplikasi secara langsung untuk berbagi ketika pengguna memilih berbagi weChat. Di sini kita akan mengeluh tentang WeChat berbagi JS SDK. Ketika saya pertama kali melakukan kontak dengan hal ini, saya pikir selama saya menyelesaikan operasi, saya dapat mewujudkan berbagi khusus. Dengan segala macam jebakan, saya akhirnya menemukan bahwa WeChat JS SDK hanya untuk sementara mencaci konten khusus kami. Ketika kita perlu berbagi, kita masih perlu menyelesaikan operasi melalui tombol di sudut kanan atas WeChat. Oke, saya tidak akan berbicara omong kosong lagi. Mari masukkan topik hari ini. Selanjutnya, saya akan menyelesaikan pembagian ruang SINA, QQ, QQ, dan Tencent Weibo melalui hyperlink, dan kemudian memberi Anda logika tanda tangan dari komponen berbagi WeChat JS SDK berdasarkan platform C#, dan akhirnya membuat Anda menyelesaikan berbagi web seluler.
Masukkan poin pertama: berbagi lengkap melalui hyperlink
Untuk platform sosial yang umum digunakan, kami pada dasarnya dapat berbagi konten melalui hyperlink, kecuali untuk WeChat, yang tidak mendukung metode berbagi ini. Metode berbagi ini dapat memfasilitasi kami untuk menyesuaikan berbagi dan sangat nyaman untuk digunakan.
function sharesina () {// Bagikan ke Sina Weibo var sharesinAstring = 'http://service.weibo.com/share/share.php?title=' + $ ("#title"). Val () + '& url =' + $ ("#url"). Val (); windoce.location.location.location.location.location p = {url:location.href,showcount:'0',/*Whether the total number of shares is displayed, display: '1', not display: '0' */desc:'',/*Default sharing reason (optional)*/summary:'',/*Share summary (optional)*/title:'',/*Share title (optional)*/site:'Manyi.com',/*Share source such as: Tencent (opsional)*/foto: '',/*jalur untuk berbagi gambar (opsional)*/gaya: '203', lebar: 98, tinggi: 22}; // Bagikan ke qq space var sharesinAstring = 'http://sns.qzone.qq.com/cgi-bi--nin/qzshare/cgi_qzshare.qq.pq.com '& url =' + $ ("#url"). Val () + '& Situs = "Manyi.com"'; window.location.href = sharesinastring;} function shareqq () {var p = {url: location.href, /*get uRl, Anda dapat menambahkan dari berbagi ke qq lOgo statistik untuk svenient statistik* /*get /Anda dapat menambahkan dari berbagi ke qq lOgo statistik untuk svenient statistik* Tampilan beberapa bahasa berbagi (menggunakan | pemisahan)*/title: '',/*Bagikan judul (opsional)*/ringkasan: '',/*ringkasan berbagi (opsional)*/foto: '',/*Bagikan gambar (opsional)*/flash: ',/*Alamat Video (Opsional)*/Situs:' Manyi.com ',/*Sumber Bagikan (Opsional) untuk Contoh: TOLY: TOLY/SITY:' MAYI.COM ',/*Sumber Bagikan (Opsional) (Opsional)*/SITY/SITY/SITY/SITY/FLAY/FLAY,/*TOLAE (Opsional) (Opsional)* 32}; // Bagikan ke qqvar sharesInastring = 'http://connect.qq.com/widget/shareqq/index.html?title=' + $ ("#judul"). Val () + '& ringkasan =' + $ ("#url"). '&site="Manyi.com"';window.location.href = sharesinastring;}function shareQQweibo() {var p = {url: location.href, /*Get the URL, and add the shared QQ logo from the QQ to facilitate statistics*/title: '', /*Share title (optional)*/pic: '', /*Share picture (optional)*/site: 'ManyI.com'/*Sumber Bagikan (Opsional) Misalnya: QQ Berbagi*/}; // Bagikan ke tencent weibo var sharesinastring = 'http://vtqq.com/share/share.php?title=' + $ ("#judul"). Val () + '& url =' + $ ("). '& Situs = "Manyi.com"'; window.location.href = sharesinastring;}Di atas adalah kode JS untuk berbagi Sina Weibo, QQ, QQ Space, dan Tencent Weibo. Kita hanya perlu menghubungi mereka di lokasi di mana halaman perlu dibagikan. Tentu saja, ada banyak platform yang juga mendukung bentuk berbagi konten ini. Silakan jelajahi sendiri. Kami tidak akan menguraikannya satu per satu di sini.
Berikut adalah beberapa saham WeChat:
Pada awalnya, kami mengatakan bahwa browser built-in WeChat memiliki fungsi berbagi di sudut kanan atas, yang juga membuat kami tidak mungkin berbagi langsung di halaman web kami ke Circle of Friends WeChat. WeChat memberi kami JS SDK untuk berbagi kustom WeChat. Apakah Anda tidak dapat menahan gairah Anda? Mari kita perhatikan singkat apa itu JS SDK ini? Dokumen -dokumen yang disediakan oleh WeChat cukup terperinci pada waktu itu, tetapi jika Anda ingin mengembangkan JS SDK, pertama -tama kami memerlukan akun resmi WeChat, dan kemudian kami mengklik "izin antarmuka" untuk melihat izin yang kami miliki, sebagai berikut:
Saya tidak akan membicarakan hal -hal dasar di atas. Mari kita fokus pada cara mendapatkan jsapi_ticket dan cara menandatangani. Langkah -langkah yang diminta oleh dokumentasi resmi adalah untuk terlebih dahulu mendapatkan Access_Token, kemudian dapatkan JSAPI_Ticket melalui Access_Token, dan akhirnya menandatangani melalui JSAPI_TICKET. Mari selesaikan pekerjaan demi langkah di atas. CATATAN: Pejabat memberikan contoh program untuk PHP, Java, Python, dan Nodejs. Di sini saya akan menggunakan C# sebagai contoh untuk mengakhiri operasi di atas untuk Anda.
Langkah 1: Dapatkan Access_Token
Dokumen resmi mengatakan ini: Access_Token adalah antarmuka yang unik secara global memanggil kredensial akun resmi. Access_token diperlukan saat memanggil setiap antarmuka dengan akun resmi. Pengembang perlu menyimpannya dengan benar. Penyimpanan Access_Token harus mempertahankan setidaknya 512 ruang karakter. Periode validitas Access_Token saat ini 2 jam dan perlu disegarkan secara teratur. Akuisisi berulang akan menyebabkan akses_token yang Anda peroleh terakhir kali menjadi tidak valid.
Langkah 2 untuk mendapatkan jsapi_ticket
Dokumen resmi mengatakan ini: JSAPI_Ticket adalah tiket sementara yang digunakan oleh akun resmi untuk menghubungi antarmuka WeChat JS. Dalam keadaan normal, periode validitas JSAPI_Ticket adalah 7200 detik, yang diperoleh melalui Access_Token. Karena jumlah panggilan API untuk mendapatkan JSAPI_Ticket sangat terbatas, sering menyegarkan JSAPI_Ticket akan menyebabkan panggilan API terbatas dan memengaruhi bisnis mereka sendiri. Pengembang harus menyimpan jsapi_ticket secara global dalam layanan mereka.
1. Lihat dokumen berikut untuk mendapatkan access_token (berlaku selama 7200 detik, pengembang harus cache access_token secara global dalam layanan mereka): ../15/54ce45d8d30b6bf6758f68d2e95bc627.html
2. Gunakan akses_token yang diperoleh pada langkah pertama untuk meminta jsapi_ticket (valid selama 7200 detik, pengembang harus cache jsapi_ticket secara global dalam layanannya): https://api.weixin.qq.com/cgi-bin/ticket/getticket?cacsin.qq.com/cgi--bin/ticket/getticket?tapixin=okey
Setelah mendapatkan JSAPI_Ticket, Anda dapat menghasilkan tanda tangan untuk verifikasi izin JS-SDK.
Langkah ketiga adalah menghasilkan tanda tangan untuk verifikasi izin JS-SDK
Aturan pembuatan tanda tangan adalah sebagai berikut: Bidang yang berpartisipasi dalam tanda tangan termasuk noncestr (string acak), jsapi_ticket yang valid, stempel waktu (cap waktu), URL (URL dari halaman web saat ini, tidak termasuk # dan bagian selanjutnya). Setelah menyortir semua parameter untuk ditandatangani dari kecil ke besar (urutan kamus) sesuai dengan kode ASCII dari nama bidang, format pasangan nilai kunci URL (yaitu, key1 = value1 & key2 = value2 ...) digunakan untuk menyambung ke string string1. Perlu dicatat di sini bahwa semua nama parameter adalah karakter kecil. String1 dienkripsi, dan nama bidang dan nilai bidang keduanya nilai asli dan tidak ada URL Escape yang dilakukan.
Hal -hal yang perlu diperhatikan
1. Noncestr dan stempel waktu yang digunakan untuk tanda tangan harus sama dengan noncestr dan cap waktu di wx.config;
2. URL yang digunakan untuk tanda tangan harus menjadi URL lengkap dari halaman yang memanggil antarmuka JS;
3. Untuk alasan keamanan, pengembang harus menerapkan logika tanda tangan di sisi server.
Di atas adalah bagian logika tanda tangan dari WeChat JS SDK, dan berikut ini adalah implementasi kode spesifik:
menggunakan sistem; menggunakan System.net; menggunakan System.web.mvc; menggunakan System.io; menggunakan System.text; menggunakan System.web.script.serialization; menggunakan anyaiabywap.models; /// <summary> /// get jsapi_ticket //// </ringkasan> namescace namkon (ringkasan> namoncace namkon (ringkasan> namescace namscoBym.coCkon {ringkasan namkon/ringkasan namon -namon -namon -namon -namoncace ne, ringkasan nam -cluton/ringkasan nameSpace ne, ringkasan nam -cluton/ Controller {private static string appId = "appId disediakan oleh weChat"; private static string secrect = "rahasia yang disediakan oleh weChat"; public static wxinfo accessToken = null; // objek global, diperbarui setiap 7200 detik, weChat memiliki permintaan dan batasan waktu untuk harian pembaruan statize public datime overtime = datet overtime = datet retRAt. url) {if (accessToken! = null) {timespan span = convert.todateTime (lembur) .subtract (convert.todateTime (dateTime.now)); if (span.totalHours> 2) {accessToken = getWinxIntoken (); outtime = datetime.now;}}}}}}}}}}} {ow -OncOKen = Datetime.now;} // Hasilkan TimeSpan Timestamp Ts = Datetime.utcnow - Datetime baru (1970, 1, 1, 0, 0, 0, 0, 0); AccessToken.Timestamp = Convert.Toint64 (Ts.TotalSeconds) .toString (); // dapatkan string acak = Ts.totalseconds) .toString (); // dapatkan string random (ts.totalseconds) .toString (); // dapatkan string random. "jsapi_ticket ="+ accessToken .ticket+ "& noncestr ="+ accessToken.nonCestr+ "× tamp ="+ accessToken.Timestamp+ "& url ="+ url; accessToken.signature = sha1 (str) .tolower (); accessToken.Appid.Signature = sha1 (str) .tolower (); accessToken.Appid.signature = sha1 (str) .tolower (); accessToken.Appid.signature = sha1 (str) .tolower (); accessToken.Appid; JsonRequestBehavior.allowget);} // menghasilkan string private string acak createNoncestr (int int = 16) {string str = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789 (routePy (rougePy (string (need (rouct (string (need (string (string (string, Karakter acak panjang 8-bit. Panjang spesifik dapat diubah dengan sendirinya untuk (int i = 0; i <panjang; i ++) {int m = r.next (0, 62); // Di sini batas bawah adalah 0, angka acak dapat diperoleh, dan batas atas harus 62, karena bilangan acak kita tidak dapat diambil. Hasil;} // Hash Algorithm Private Static String sha1 (string text) {byte [] cleanbytes = encoding.default.getbytes (teks); byte [] hashedbytes = System.security.cryptography.sha1.create (). Computehash (cleanbytes); return.cryptography.sha1.create (). Computehash (cleanbytes); return); Bitconverter.toString (hashedbytes) .replace ("-", "");} // dapatkan tokenprivate static wxinfo getWinxIntoken () {// dapatkan access_tokenhttpwebresponse response = CreateGetHttpResponse("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRECT, 5000);StreamReader reader = new StreamReader(response.GetResponseStream());String line;StringBuilder sb = new StringBuilder();while ((line = reader.ReadLine()) != null){sb.Append(line.ToString());}JavaScriptSerializer js = new JavaScriptSerializer();WXInfo accessToken = js.Deserialize<WXInfo>(sb.ToString());//Get jsapi_ticketResponse = createGetHttpresponse ("https://api.weixin.qq.com/cgi--bin/ticket/getticket?access_token=" + accessToken.access_token + "& type = jsapi", 5000); pembaca = baru = response = response (responseP = JSAPI ", 5000); pembaca = New streurer (response = JSAPI", READER = READER = REVEADER; StringBuilder (); while ((line = reader.readline ())! = Null) {sb.append (line.toString ());} accessToken = js.deserialize <wxinfo> (sb.tostring ()); return accessToken; name = "url"> URL yang diminta </param> /// <param name = "timeout"> Timeout yang diminta </param> /// <param name = "userAgent"> Informasi browser klien yang diminta dapat kosong </param> // <param name = "cookies"> Informasi cookie yang dikirimkan dengan permintaan http, itu bisa kosong </param> cookies/cookie </pays/cookie yang dikirimkan dengan http, itu bisa kosong </param> cookies/cookie </cookies/cookie yang dikirimkan dengan http, itu bisa kosong </param> cookies/cookie </cookies/cookie yang dikirimkan dengan http, itu bisa kosong </param> cookies/cookie </cookies/cookie yang dikirimkan dengan http, itu bisa kosong </param> Creategethttpresponse (string url, int? Timeout, string userAgent = null, cookiecollection cookies = null) {if (string.isnullorempty (url)) {lempar argumentnullexception ("url"); ifeTpetheTheThet; (! String.isNullorEmpty (userAgent)) {request.useragent = userAgent;} if (timeout.hasValue) {request.timeout = timeout.value;} if (cookies! = null) {request.cookiContainer = cookieconerer baru (); cookies. Httpwebresponse;}}}Objek global wxinfo.cs untuk menyimpan informasi token
namespace anyaiabywap.models {/// <summary> /// weChat untuk mendapatkan token return parameter kelas /// </summary> kelas publik wxinfo {public string appid {get; mengatur; } public string access_token {get; mengatur; } // Access_TokenPublic String Expires_in {get; mengatur; } // Waktu kedaluwarsa token, valid dalam 7200 detik tiket string publik {get; mengatur; } // jsapi_ticketpublic string errmsg {get; mengatur; } public int errcode {get; mengatur; } public String noncestr {get; mengatur; } // Hasilkan string acak timestamp string publik tanda tangan {get; mengatur; } // menghasilkan cap waktu tanda tangan public string tanda tangan {get; mengatur; } // Nilai pengembalian tanda tangan}}Kode JS untuk inisialisasi pada halaman web:
// wechat js status permintaan sdk var requestStatus = 0; function shareWx () {if (requestStatus! = 1) {requestStatus = 1; // meminta var ajaxpara = "url =" + encodeuricomponent (window.location.href.split ('#') [0]); $. '/Wxmessage/gettoken', datatype: 'json', data: ajaxpara, success: function (json) {if (tidak terdefinisi! = Json && json! == "") {var jsonobjs = eval (json); wx.config ({debug: false, // giliran debug (json); wx.config ({{debug: false,//giliran debug (json); wx.config ({debug: false, false, giliran debug, eval (json); wx.config ({debug: false, false, ganti debug, eval (json); wx.config ({debug: false, false,/giliran debug (json); wx. Parameter, Anda dapat membukanya di sisi PC. jsonobjs.Signature, // Diperlukan, lihat Lampiran 1JSapilis: ['checkjsapi', 'onMenusharetimeline', 'onMenushareAppMessage', 'onMenushareqq', 'Onmenushareweibo', 'OnMenushareqque', 'OnMenushareweibo', 'OnMenushareQzone', 'OnMenushareweibo', 'OnMenushareQzone' diperlukan, 'Onmenushareweibo', 'OnMenushareQzone' diperlukan, 'The Onmenushareweibo', 'OnMenushareQzone' diperlukan, 'OnMenushareweibo', 'onMenushareQQE' 2}); wx.ready (function () {// alert ("verifikasi weChat berhasil"); // Setelah verifikasi informasi konfigurasi, metode siap untuk dieksekusi. Semua panggilan antarmuka harus diperoleh setelah antarmuka konfigurasi. yang hanya disebut ketika pengguna memicu, mereka dapat dipanggil secara langsung, dan tidak perlu ditempatkan dalam fungsi siap. antarmuka JS yang perlu dideteksi. {"CheckResult": {"PilihImage": true}, "errmsg": "checkjsapi: ok"}}}); wx.onmenushareweibo ({title: 'manyi.com tes berbagi', // berbagi judul desc: 'moderi.com uji share description', // share link: 'ht share:' ht share) destastion/htping. IMGURL: 'http://www.manyiaby.com/img/logo_2.jpg', // Bagikan ikon sukses: function () {// peringatan fungsi callback ("dibagikan dengan sukses");}, batal: function () {// Peringatan fungsi panggilan balik ("dibagikan dibagikan");};}; {// Peringatan (Verifikasi WeChat Gagal: "+res); // Setelah verifikasi informasi konfigurasi, metode yang siap dijalankan. mereka dapat dipanggil secara langsung, dan tidak perlu ditempatkan di fungsi siap.Di sini, saya akan memperkenalkan penggunaan JS SDK yang berbagi WeChat. Anda dapat merujuknya berdasarkan kebutuhan Anda sendiri. Saya telah memperkenalkannya kepada Anda pada awalnya bahwa JS SDK berbagi yang disediakan oleh WeChat hanyalah pemrosesan cache untuk browser internal WeChat. Berbagi nyata masih mengharuskan kami untuk mengklik tombol berbagi di sudut kanan atas.
Di atas bukan solusi berbagi web seluler yang sempurna. Akhirnya, saya akan memperkenalkan beberapa komponen berbagi sosial kepada Anda. Ketika saya melihat komponen ini, saya tahu bahwa inilah yang saya butuhkan, antarmuka sederhana, dan itu dapat membuat situs web kami terlihat elegan dan nyaman. Oke, tanpa basa -basi lagi, masukkan topik:
Di atas adalah pengantar editor tentang cara berbagi fungsi multi-platform di aplikasi web seluler. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!