วิธีการแบ่งปันฟังก์ชั่นหลายแพลตฟอร์มบนเว็บแอปมือถือ

โดยวิธีการที่แอพมักจะมีทางเข้าแบ่งปันบนแพลตฟอร์มโซเชียลและยังมีกรอบการทำงานที่ดีสำหรับการแบ่งปันหน้าเว็บ อย่างไรก็ตามด้วยการพัฒนาอย่างต่อเนื่องของ HTML5 หน้าเว็บมือถือจึงได้รับความนิยมมากขึ้นเรื่อย ๆ ในชีวิตของเรา แล้วจะแบ่งปันโทรศัพท์มือถือของเราให้เสร็จสมบูรณ์ได้อย่างไร? เมื่อพูดถึงแพลตฟอร์มการแบ่งปันที่สำคัญมี SDKs สำหรับ Android และ iOS ในฐานะนักพัฒนาเราจำเป็นต้องรวม SDK เข้ากับโครงการของเราเท่านั้น ผ่านอินเทอร์เฟซภายนอกที่ให้ไว้เราสามารถทำฟังก์ชั่นการแชร์ให้เสร็จสมบูรณ์ได้อย่างง่ายดาย สำหรับหน้าเว็บมีกรอบการแบ่งปันที่ยอดเยี่ยมมากมายบนอินเทอร์เน็ตเช่น: การแบ่งปัน Bshare และการแบ่งปัน Jiathis; เราสามารถรวมเข้ากับโครงการของเราได้อย่างง่ายดาย แต่เราจำเป็นต้องใช้ความพยายามในการใช้การแบ่งปันบนหน้าเว็บมือถือ ฉันคิดว่าในเวลานี้เราสามารถแชร์ได้โดยเรียกลูกค้าที่ติดตั้งโดยผู้ใช้ สิ่งที่ต้องกล่าวถึงที่นี่คือการแบ่งปัน WeChat เมื่อเราแชร์บนหน้าเว็บรหัส QR การแชร์มักจะปรากฏขึ้น เราใช้แอพ WeChat เพื่อสแกนและแบ่งปัน เราไม่สามารถใช้งานได้บนโทรศัพท์มือถือ เราจำเป็นต้องเปิดแอปโดยตรงเพื่อแชร์เมื่อผู้ใช้เลือกการแชร์ WeChat ที่นี่เราจะบ่นเกี่ยวกับ WeChat แบ่งปัน JS SDK เมื่อฉันเข้ามาติดต่อกับสิ่งนี้ครั้งแรกฉันคิดว่าตราบใดที่ฉันเสร็จสิ้นการดำเนินการฉันสามารถตระหนักถึงการแบ่งปันที่กำหนดเอง ด้วยข้อผิดพลาดทุกชนิดในที่สุดฉันก็พบว่า WeChat JS SDK เพียงแค่แคชเนื้อหาที่กำหนดเองของเราชั่วคราว เมื่อเราต้องการแบ่งปันเรายังต้องดำเนินการผ่านปุ่มที่มุมบนขวาของ WeChat ตกลงฉันจะไม่พูดเรื่องไร้สาระอีกต่อไป มาป้อนหัวข้อของวันนี้กันเถอะ ต่อไปฉันจะเสร็จสิ้นการแบ่งปันของ Sina, QQ, QQ Space และ Tencent Weibo ผ่านไฮเปอร์ลิงก์จากนั้นให้คุณมีตรรกะลายเซ็นของ WeChat JS SDK แบ่งปันส่วนประกอบตามแพลตฟอร์ม C# และในที่สุดก็นำคุณไปสู่การแบ่งปันเว็บมือถือ

ป้อนจุดแรก: การแบ่งปันให้เสร็จสมบูรณ์ผ่านไฮเปอร์ลิงก์

สำหรับแพลตฟอร์มโซเชียลที่ใช้กันทั่วไปเราสามารถแบ่งปันเนื้อหาผ่านไฮเปอร์ลิงก์ยกเว้น WeChat ซึ่งไม่สนับสนุนวิธีการแบ่งปันนี้ วิธีการแบ่งปันนี้สามารถช่วยให้เราสามารถปรับแต่งการแบ่งปันและใช้งานได้ง่ายมาก

 ฟังก์ชั่น Sharesina () {// แบ่งปันไปยัง Sina Weibo var sharesInastring = 'http://service.weibo.com/share/share.php?title=' + $ ("#title"). val () + '& url =' + $ ("#url") {url: location.href, showcount: '0',/*ไม่ว่าจำนวนการแชร์ทั้งหมดจะปรากฏขึ้นแสดง: '1', ไม่แสดง: '0'*/desc: '',/*เหตุผลการแชร์เริ่มต้น (ไม่บังคับ)*/สรุป: '' (ไม่บังคับ)*/pics: '',/*เส้นทางเพื่อแชร์รูปภาพ (ไม่บังคับ)*/สไตล์: '203', ความกว้าง: 98, ความสูง: 22}; // แบ่งปันไปยัง QQ Space var SharesInastring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare '& url =' + $ ("#url"). val () + '& site = "manyi.com"'; window.location.href = sharesinastring;} ฟังก์ชั่น shareqq () {var p = {url: location.href, /*รับ URL ของหลายภาษาการแชร์ (โดยใช้ | การแยก)*/title: '',/*แชร์ชื่อ (ไม่บังคับ)*/สรุป: '',/*แชร์สรุป (ไม่บังคับ)*/pics: '',/*แชร์รูปภาพ 32}; // แบ่งปันไปยัง QQVAR SharesInastring = 'http://connect.qq.com/widget/shareqq/index.html?title=' + $ ("#title"). val () + '& summary =' + $ ("#url"). '& site = "manyi.com"'; window.location.href = SharesInastring;} ฟังก์ชั่น shareqqweibo () {var p = {url: location.href, /*รับ URL และเพิ่มโลโก้ qq ที่ใช้ร่วมกัน* /*แชร์แหล่งที่มา (ไม่บังคับ) ตัวอย่างเช่น: การแบ่งปัน qq*/}; // แบ่งปันไปยัง tencent weibo var sharesinastring = 'http://vtqq.com/share/share.php?title=' + $ ("#title"). val () + '& url =' + $ ( SharesInastring;}

ข้างต้นคือรหัส JS สำหรับการแบ่งปัน Sina Weibo, QQ, QQ Space และ Tencent Weibo เราเพียงแค่ต้องโทรหาพวกเขาในสถานที่ที่ต้องแบ่งปันหน้าเว็บ แน่นอนว่ามีหลายแพลตฟอร์มที่สนับสนุนรูปแบบการแชร์เนื้อหานี้ โปรดสำรวจด้วยตัวคุณเอง เราจะไม่อธิบายรายละเอียดทีละคน

นี่คือหุ้น WeChat บางส่วน:

ในตอนแรกเราบอกว่าเบราว์เซอร์ในตัวของ WeChat มีฟังก์ชั่นการแบ่งปันที่มุมขวาบนซึ่งทำให้เราไม่สามารถแบ่งปันได้โดยตรงบนหน้าเว็บของเราไปยังวงกลมของ WeChat WeChat ให้ JS SDK สำหรับการแบ่งปัน WeChat ที่กำหนดเอง คุณไม่สามารถระงับความหลงใหลของคุณได้หรือไม่? มาดูสั้น ๆ ว่า JS SDK นี้คืออะไร? เอกสารที่จัดทำโดย WeChat นั้นค่อนข้างมีรายละเอียดในเวลานั้น แต่ถ้าคุณต้องการพัฒนา JS SDK ก่อนอื่นเราต้องมีบัญชีอย่างเป็นทางการของ WeChat จากนั้นเราคลิก "สิทธิ์อินเตอร์เฟส" เพื่อดูการอนุญาตที่เรามีดังนี้:

ฉันจะไม่พูดถึงสิ่งพื้นฐานข้างต้น มามุ่งเน้นวิธีการรับ JSAPI_TICKET และวิธีการลงนาม ขั้นตอนที่ได้รับแจ้งจากเอกสารอย่างเป็นทางการจะได้รับ access_token ก่อนจากนั้นรับ jsapi_ticket ผ่าน access_token และในที่สุดก็ลงชื่อผ่าน JSAPI_Ticket มาทำงานให้เสร็จทีละขั้นตอน หมายเหตุ: อย่างเป็นทางการให้โปรแกรมตัวอย่างสำหรับ PHP, Java, Python และ NodeJS ที่นี่ฉันจะใช้ C# เป็นตัวอย่างเพื่อสิ้นสุดการดำเนินการด้านบนสำหรับคุณ

ขั้นตอนที่ 1: รับ access_token

เอกสารอย่างเป็นทางการกล่าวว่าสิ่งนี้: Access_Token เป็นอินเทอร์เฟซที่ไม่ซ้ำกันทั่วโลกรับรองข้อมูลรับรองของบัญชีอย่างเป็นทางการ access_token เป็นสิ่งจำเป็นเมื่อโทรแต่ละอินเทอร์เฟซโดยบัญชีอย่างเป็นทางการ นักพัฒนาจำเป็นต้องประหยัดอย่างถูกต้อง การจัดเก็บ Access_Token จะต้องรักษาพื้นที่อักขระอย่างน้อย 512 ระยะเวลาที่ถูกต้องของ ACCESS_TOKEN ปัจจุบัน 2 ชั่วโมงและจำเป็นต้องได้รับการรีเฟรชเป็นประจำ การได้มาซ้ำ ๆ จะทำให้ Access_token คุณได้รับครั้งสุดท้ายที่จะไม่ถูกต้อง

ขั้นตอนที่ 2 เพื่อรับ jsapi_ticket

เอกสารอย่างเป็นทางการกล่าวว่าสิ่งนี้: JSAPI_TICKET เป็นตั๋วชั่วคราวที่ใช้โดยบัญชีอย่างเป็นทางการเพื่อโทรหาอินเตอร์เฟส WeChat JS ภายใต้สถานการณ์ปกติระยะเวลาความถูกต้องของ JSAPI_TICKET คือ 7200 วินาทีซึ่งได้มาจาก ACCESS_TOKEN เนื่องจากจำนวนการโทร API เพื่อให้ได้ JSAPI_Ticket มี จำกัด มากการรีเฟรชของ JSAPI_Ticket จะทำให้การโทร API มี จำกัด และส่งผลกระทบต่อธุรกิจของตนเอง นักพัฒนาต้องแคช JSAPI_TICKET ทั่วโลกในบริการของพวกเขา

1. อ้างอิงเอกสารต่อไปนี้เพื่อรับ access_token (ใช้ได้กับ 7200 วินาทีนักพัฒนาต้องแคช Access_Token ทั่วโลกในบริการของพวกเขา): ../15/54CE45D8D30B6BF6758F68D2E95BC627.HTML

2. ใช้ access_token ที่ได้รับในขั้นตอนแรกเพื่อขอ jsapi_ticket (ถูกต้องเป็นเวลา 7200 วินาทีนักพัฒนาจะต้องแคช jsapi_ticket ทั่วโลกในการบริการของเขา): https://api.weixin.qq.com/cgi-bin/ticket/ticket/Ticket

หลังจากได้รับ JSAPI_Ticket คุณสามารถสร้างลายเซ็นสำหรับการตรวจสอบการอนุญาต JS-SDK

ขั้นตอนที่สามคือการสร้างลายเซ็นสำหรับการตรวจสอบการอนุญาต JS-SDK

กฎการสร้างลายเซ็นมีดังนี้: ฟิลด์ที่เข้าร่วมในลายเซ็นประกอบด้วย noncestr (สตริงสุ่ม), JSAPI_Ticket ที่ถูกต้อง, การประทับเวลา (การประทับเวลา), URL (URL ของเว็บเพจปัจจุบันไม่รวม # และส่วนที่ตามมา) หลังจากการเรียงลำดับพารามิเตอร์ทั้งหมดที่จะลงนามจากขนาดเล็กถึงขนาดใหญ่ (คำสั่งพจนานุกรม) ตามรหัส ASCII ของชื่อฟิลด์รูปแบบของคู่คีย์ค่า URL (นั่นคือ Key1 = value1 & key2 = value2 …) ใช้เพื่อแยกเป็นสตริงสตริง 1 ควรสังเกตที่นี่ว่าชื่อพารามิเตอร์ทั้งหมดเป็นอักขระตัวพิมพ์เล็ก String1 ถูกเข้ารหัสและชื่อฟิลด์และค่าฟิลด์เป็นทั้งค่าดั้งเดิมและไม่มีการหลบหนี URL

สิ่งที่ควรทราบ

1. noncestr และ timestamp ที่ใช้สำหรับลายเซ็นจะต้องเหมือนกับ noncestr และ timestamp ใน wx.config;

2. URL ที่ใช้สำหรับลายเซ็นจะต้องเป็น URL ที่สมบูรณ์ของหน้าเว็บที่เรียกอินเตอร์เฟส JS;

3. ด้วยเหตุผลด้านความปลอดภัยนักพัฒนาจะต้องใช้ตรรกะลายเซ็นทางฝั่งเซิร์ฟเวอร์

ด้านบนเป็นส่วนตรรกะของลายเซ็นของ WeChat JS SDK และต่อไปนี้คือการใช้รหัสเฉพาะ:

 การใช้ System; การใช้ System.net; การใช้ System.web.mvc; การใช้ System.io; การใช้ System.Text; การใช้ System.web.script.serialization; การใช้ manyiabywap.models; /// <summary> //// get jsapi_ticket //////summary สตริงคงที่ appid = "appid จัดทำโดย weChat"; สตริงคงที่ส่วนตัว secrect = "ความลับที่จัดทำโดย weChat"; WXINFO สาธารณะ accessToken = null; // วัตถุทั่วโลกอัพเดททุก 7200 วินาที WeChat มีการร้องขอและการ จำกัด เวลา {ถ้า (AccessToken! = null) {timespan span = convert.TodateTime (การทำงานล่วงเวลา). subtract (convert.todatetime (datetime.now)); ถ้า (span.totalhours> 2) {accessToken = getWinxIntoken (); datetime.now;} // สร้าง timesmampan timespan timespan ts = datetime.utcnow - Datetime ใหม่ (1970, 1, 1, 0, 0, 0, 0, 0); AccessToken.timestamp = Convert.toint64 (ts.totalseconds) "JSAPI_TICKET ="+ AccessToken .Ticket+ "& nonCestr ="+ AccessToken.NonCestr+ "× tamp ="+ AccessToken.timestamp+ "& url ="+ url; accessToken.Signature = sha1 (str) jsonRequestBehavior.allowget);} // สร้างสตริงแบบสุ่มสตริงส่วนตัว createnonCestr (ความยาว int = 16) {string str = "abcdefghijklmnopqrstuvwxyzabcdefhijklmnopqrstuvwxyz0123456789" อักขระสุ่มยาว 8 บิต ความยาวเฉพาะสามารถเปลี่ยนแปลงได้ด้วยตัวเอง (int i = 0; i <length; i ++) {int m = r.next (0, 62); // ที่นี่ขอบเขตล่างคือ 0, หมายเลขสุ่มสามารถรับได้และขอบเขตบนควรเป็น 62 เพราะหมายเลขสุ่มไม่ได้ ผลลัพธ์;} // อัลกอริทึมแฮชสตริงคงที่ส่วนตัว sha1 (ข้อความสตริง) {byte [] cleanbytes = encoding.default.getBytes (ข้อความ); byte [] hashedbytes = system.security.cryptography.sha1.create () bitconverter.toString (hashedbytes) .replace ("-", "");} // รับ tokenprivate wxinfo getwinxintoken () {// get access_tokenhttpwebresponse = createGetHttPresponse ("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "& secret =" + secrect, 5000); ((line = reader.readline ())! = null) {sb.append (line.toString ());} javascripterializer js = ใหม่ JavaScripterializer (); wxinfo AccessToken = js.deserialize <wxinfo> (sb.tostring (); CreateGetHttpResponse ("https://api.weixin.qq.com/cgi-bin/ticket/getTicket?access_token=" + accesstoken.access_token + "& type = jsapi", 5000); reader = new StreamReader reader.readline ())! = null) {sb.append (line.toString ());} accessToken = js.deserialize <wxInfo> (sb.toString ()); returntoken;} ///// /// <param name = "หมดเวลา"> การหมดเวลาที่ร้องขอ </param> /// <param name = "useragent"> ข้อมูลเบราว์เซอร์ไคลเอ็นต์ที่ร้องขอสามารถว่างเปล่า </param> /// <param name = "คุกกี้"> ข้อมูลคุกกี้ที่ส่งมาพร้อมกับ HTTP หมดเวลา, สตริง useragent = null, cookiecollection คุกกี้ = null) {ถ้า (string.isnullorempty (url)) {โยนอาร์กิวเมนต์ใหม่ nullexception ("url");} httpwebrequest คำขอ = webrequest.create (url) เป็น httpwebrequest; (! string.isnullorEmpty (useragent)) {request.useragent = useragent;} ถ้า (timeout.hasvalue) {request.timeout = timeout.value;} ถ้า (คุกกี้! = null) {request.cookiecontainer = ใหม่ httpwebresponse;}}}}

WXINFO.CS วัตถุระดับโลกที่ใช้ในการจัดเก็บข้อมูลโทเค็น

 Namespace manyiabywap.models {/// <summary> /// weChat เพื่อรับโทเค็นพารามิเตอร์ส่งคืนคลาส /// </summary> คลาสสาธารณะ wxInfo {สตริงสาธารณะ appid {get; ชุด; } สตริงสาธารณะ access_token {get; ชุด; } // access_tokenpublic string expires_in {get; ชุด; } // เวลาหมดอายุโทเค็นใช้ได้ภายใน 7200 วินาทีตั๋วสตริงสาธารณะ {รับ; ชุด; } // jsapi_ticketpublic String errmsg {get; ชุด; } public int errcode {get; ชุด; } สตริงสาธารณะ noncestr {get; ชุด; } // สร้างสตริงแบบสุ่มของ String Public String Timestamp {get; ชุด; } // สร้างการประทับเวลาของลายเซ็นสตริงสาธารณะลายเซ็น {get; ชุด; } // ค่าส่งคืนลายเซ็น}}

รหัส JS สำหรับการเริ่มต้นบนหน้าเว็บ:

 // weChat JS SDK คำขอสถานะ var requestStatus = 0; function sharewx () {ถ้า (requeststatus! = 1) {requeststatus = 1; // การร้องขอ var ajaxpara = "url =" + encodeuricomponent (window.location.href.split (#' '/wxMessage/getToken', ประเภทข้อมูล: 'JSON', ข้อมูล: ajaxpara, ความสำเร็จ: ฟังก์ชั่น (json) {ถ้า (ไม่ได้กำหนด! = json && json! == "") {var jsonobjs = eval (json); wx.config พารามิเตอร์คุณสามารถเปิดได้ในด้านพีซี jsonobjs.signature, // จำเป็น, ดูภาคผนวก 1jsapilist: ['checkjsapi', 'onmenusharetimeline', 'onmenushareappmessage', 'onmenushareqq', 'onmenushareweibo', onmenushareqzone ' 2}); wx.ready (function () {// Alert ("การตรวจสอบ WeChat สำเร็จ"); // หลังจากการตรวจสอบข้อมูลการกำหนดค่าวิธีการพร้อมจะถูกดำเนินการการเรียกใช้อินเตอร์เฟสทั้งหมดจะต้องได้รับหลังจากอินเตอร์เฟสการกำหนดค่าจะต้องใช้อินเตอร์เฟส ที่เรียกว่าเมื่อผู้ใช้ทริกเกอร์พวกเขาสามารถเรียกได้โดยตรงและไม่จำเป็นต้องวางไว้ในฟังก์ชั่นพร้อม ของอินเทอร์เฟซ JS ที่ต้องตรวจพบ {"checkResult": {"เลือก ime": true}, "errmsg": "checkjsapi: ok"}}}); wx.onmenushareweibo ({title: 'manyi.com แบ่งปันการทดสอบ', // แบ่งปันชื่อเรื่อง: imgurl: 'http://www.manyiaby.com/img/logo_2.jpg', // แบ่งปันความสำเร็จของไอคอน: ฟังก์ชั่น () {// ฟังก์ชั่นการโทรกลับ ("แชร์สำเร็จ");}, cancel: function () {// ฟังก์ชั่นการโทรกลับ {// การแจ้งเตือน ("การตรวจสอบ WeChat ล้มเหลว RES:"+res); // หลังจากการตรวจสอบข้อมูลการกำหนดค่าจะต้องได้รับการดำเนินการ ทริกเกอร์พวกเขาสามารถเรียกได้โดยตรงและไม่จำเป็นต้องวางในฟังก์ชั่นพร้อม

ที่นี่ฉันจะแนะนำการใช้ WeChat Sharing JS SDK คุณสามารถอ้างอิงได้ตามความต้องการของคุณเอง ฉันได้แนะนำให้คุณทราบตั้งแต่เริ่มต้นว่าการแบ่งปัน JS SDK จัดทำโดย WeChat เป็นเพียงการประมวลผลแคชสำหรับเบราว์เซอร์ภายในของ WeChat การแบ่งปันจริงยังคงต้องการให้เราคลิกปุ่มแชร์ที่มุมบนขวา

ข้างต้นไม่ใช่โซลูชันการแชร์เว็บมือถือที่สมบูรณ์แบบ ในที่สุดฉันจะแนะนำองค์ประกอบการแบ่งปันโซเชียลของ SOSH ให้คุณ เมื่อฉันเห็นองค์ประกอบนี้ฉันรู้ว่านี่คือสิ่งที่ฉันต้องการอินเทอร์เฟซง่าย ๆ และมันสามารถทำให้เว็บไซต์ของเราดูสง่างามและสะดวกสบาย ตกลงโดยไม่ต้องกังวลใจเพิ่มเติมให้ป้อนหัวข้อ:

ข้างต้นคือบทนำของบรรณาธิการเกี่ยวกับวิธีการแบ่งปันฟังก์ชั่นหลายแพลตฟอร์มบนแอพมือถือเว็บ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!