كيفية مشاركة وظائف متعددة المنصات على تطبيق الويب المحمول

بالمناسبة ، عادة ما يكون للتطبيقات مداخل للمشاركة على المنصات الاجتماعية ، وهناك أيضًا إطار جيد لمشاركة صفحات الويب. ومع ذلك ، مع التطوير المستمر لـ HTML5 ، أصبحت صفحات الويب المحمولة أكثر شهرة في حياتنا. إذن كيف تكمل المشاركة على هواتفنا المحمولة؟ عند الحديث عن ذلك ، تحتوي منصات المشاركة الرئيسية على SDKs لنظام Android و iOS. كمطورين ، نحتاج فقط إلى دمج SDK في مشروعنا. من خلال الواجهة الخارجية المتوفرة ، يمكننا بسهولة إكمال وظيفة المشاركة ؛ أما بالنسبة لصفحات الويب ، فهناك العديد من أطر عمل المشاركة الممتازة على الإنترنت ، مثل: مشاركة BSHARE ومشاركة Jiathis ؛ يمكننا بسهولة الاندماج في مشروعنا ؛ لكننا نحتاج إلى بذل بعض الجهد في تنفيذ مشاركة صفحات الويب المحمولة. أعتقد أنه في هذا الوقت ، يمكننا المشاركة عن طريق الاتصال بالعميل المثبت من قبل المستخدم. ما يجب ذكره هنا هو مشاركة WeChat. عندما نشارك في صفحة الويب ، عادة ما يظهر رمز الاستجابة السريعة المشاركة. نستخدم تطبيق WeChat لمسح ومشاركة. لا يمكننا العمل على الهاتف المحمول. نحتاج إلى فتح التطبيق مباشرة للمشاركة عندما يختار المستخدم مشاركة WeChat. هنا سوف نشكو من مشاركة WeChat JS SDK. عندما كنت على اتصال مع هذا الشيء لأول مرة ، اعتقدت أنه طالما أكملت العملية ، يمكنني أن أدرك مشاركة مخصصة. مع جميع أنواع المزالق ، وجدت أخيرًا أن WeChat JS SDK فقط يختبئ مؤقتًا محتوىنا المخصص. عندما نحتاج إلى المشاركة ، ما زلنا بحاجة إلى إكمال العملية من خلال الزر في الزاوية اليمنى العليا من WeChat. حسنًا ، لم أعد أتحدث مع الهراء. دعنا ندخل موضوع اليوم. بعد ذلك ، سأكمل مشاركة Sina و QQ و QQ Space و Tencent Weibo من خلال الارتباطات التشعبية ، ثم أتوفر لك منطق توقيع مكون مشاركة WeChat JS SDK استنادًا إلى منصة C# ، وأقودك أخيرًا إلى إكمال مشاركة الويب المحمول.

أدخل النقطة الأولى: استكمال المشاركة من خلال الارتباط التشعبي

بالنسبة للمنصات الاجتماعية الشائعة الاستخدام ، يمكننا مشاركة المحتوى بشكل أساسي من خلال الارتباطات التشعبية ، باستثناء WeChat ، والتي لا تدعم طريقة المشاركة هذه. يمكن أن تسهلنا طريقة المشاركة هذه إلى تخصيص المشاركة وهي مريحة للغاية للاستخدام.

 الدالة saresina () {// share to sina weibo var sarkesinastring = 'http://service.weibo.com/share/share.php؟title=' + $ ("#title"). val () + '&' + $ ("#url"). {url: location.href ، showcount: '0' ،/*ما إذا كان يتم عرض العدد الإجمالي للأسهم ، عرض: '1' ، لا يعرض: '0'*/desc: '' ،/*default المشاركة الافتراضية سبب (اختياري)*/summary: '' ، (اختياري)*/pics: '' ،/*مسار لمشاركة الصور (اختياري)*/النمط: '203' ، العرض: 98 ، الارتفاع: 22} ؛ '& url =' + $ ("#url"). val () + '& site = "mironi.com" ؛ window.location.href = sarkesInastring ؛} function shareqq () {var p = {url: location.href ، /*get url ، يمكنك إضافة من المشاركة إلى QQ logo for quq for stalists* من لغات المشاركة المتعددة (باستخدام | الفصل)*/العنوان: '' ،/*عنوان المشاركة (اختياري)*/ملخص: '' ،/*مشاركة ملخص (اختياري)*/pics: '' ،/*مشاركة الصورة (اختياري)) على سبيل المثال: QQ:/styp: ' 32} ؛ // share to qqvar sarkesinastring = 'http://connect.qq.com/widget/shareq/index.html؟title=' + $ ( '& site = "mironi.com"' ؛ window.location.href = saresinastring ؛} الوظيفة shareqqweibo () {var p = {url: location.href ، /*احصل على عنوان url ، وأضف شعار QQ المشترك من qq لتسهيل الإحصائيات* /العنوان: /* /*مشاركة مصدر (اختياري) على سبيل المثال: QQ مشاركة*/} ؛ // مشاركة إلى tencent weibo var sarkesinastring = 'http://vtqq.com/share/share.php؟title=' + $ ("#title"). SharesInastring ؛}

ما سبق هو رموز JS لمشاركة Sina Weibo و QQ و QQ Space و Tencent Weibo. نحتاج فقط إلى الاتصال بهم في الموقع الذي تحتاج إلى مشاركة الصفحة. بالطبع ، هناك العديد من المنصات التي تدعم أيضًا هذا الشكل من مشاركة المحتوى. الرجاء استكشافها بنفسك. لن نوضح عليها واحدة تلو الأخرى هنا.

فيما يلي بعض أسهم WeChat:

في البداية ، قلنا أن المتصفح المدمج في WeChat لديه وظيفة مشاركة في الزاوية اليمنى العليا ، مما يجعل من المستحيل بالنسبة لنا المشاركة مباشرة على صفحات الويب الخاصة بنا إلى دائرة WeChat's Dircle. يزودنا 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 حاليًا ساعتين وتحتاج إلى تحديثها بانتظام. سوف يتسبب الاستحواذ المتكرر في الوصول إلى 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 على مستوى العالم في خدمتهم):

2. استخدم Access_Token الذي تم الحصول عليه في الخطوة الأولى لطلب JSAPI_TICKET (صالح لمدة 7200 ثانية ، يجب على المطور تخزين JSAPI_TICKET عالميًا في خدمته): https://api.weixin.qq.com/cgi-bin/ticket/getticket؟

بعد الحصول على JSAPI_TICKET ، يمكنك إنشاء توقيع للتحقق من إذن JS-SDK.

الخطوة الثالثة هي توليد توقيع التحقق من إذن JS-SDK

قواعد توليد التوقيع هي كما يلي: الحقول المشاركة في التوقيع تشمل noncestr (سلسلة عشوائية) ، JSAPI_TICKET صالحة ، الطابع الزمني (الطابع الزمني) ، عنوان URL (عنوان URL لصفحة الويب الحالية ، لا يشمل # وأجزائه اللاحقة). بعد فرز جميع المعلمات المراد توقيعها من صغير إلى كبير (ترتيب القاموس) وفقًا لرمز ASCII لاسم الحقل ، يتم استخدام تنسيق زوج قيمة مفتاح URL (أي ، key1 = value1 & key2 = value2 ...) للوصول إلى سلسلة سلسلة 1. تجدر الإشارة هنا إلى أن جميع أسماء المعلمات هي أحرف صغيرة. يتم تشفير String1 ، ويتم إجراء اسم الحقل وقيمة الحقل على حد سواء ، ولا يتم تنفيذ أي هروب عن عنوان URL.

أشياء يجب ملاحظتها

1. يجب أن يكون Noncestr و Timestamp المستخدمين للتوقيع هو نفسه غير المقياس والطابع الزمني في Wx.Config ؛

2. يجب أن يكون عنوان URL المستخدم للتوقيع هو عنوان URL الكامل للصفحة التي تستدعي واجهة JS ؛

3. لأسباب أمنية ، يجب على المطورين تطبيق منطق التوقيع على جانب الخادم.

ما سبق هو الجزء المنطقي المميز من WeChat JS SDK ، والما يلي هو تطبيق التعليمات البرمجية المحددة:

 باستخدام النظام ؛ باستخدام system.net ؛ باستخدام system.web.mvc ؛ باستخدام system.io ؛ باستخدام system.text ؛ باستخدام system.web.script.serialization ؛ باستخدام manyiabywap.models ؛ /// <summary> /// get jsapi_ticket /// سلسلة ثابتة appid = "appid المقدمة من قبل WeChat" ؛ سلسلة ثابتة خاصة screct = "Secret التي قدمها WeChat" ؛ accittoken الثابتة العامة = NULL ؛ // Global Comple {if (AccessToken! = null) {timepan span = convert.todateTime (الوقت الإضافي) .subtract (convert.todateTime (dateTime.Now)) ؛ if (span.totalhours> 2) {accessToken = getWinxIntoken () ؛ dateTime.now ؛} // إنشاء Timestamp TimeSpan ts = dateTime.UTCNOW - New DateTime (1970 ، 1 ، "jsapi_ticket ="+ accessToken .Ticket+ "& noncestr ="+ accessToken.Noncester+ "× tamp ="+ accessToken.Timestamp+ "& url ="+ url ؛ AccessToken.Signature = sha1 (stol). jsonrequestbehavior.allowget) ؛} // إنشاء سلسلة عشوائية سلسلة خاصة createNoncestr (int length = 16) {string str = "abcdefghijklmnopqrstuvwxyzyzyzabcdefghijklmnopqrstuvwxyz0123456789" شخصية عشوائية طويلة. يمكن تغيير الطول المحدد من تلقاء نفسه لـ (int i = 0 ؛ i <length ؛ i ++) {int m = r.next (0 ، 62) ؛ // هنا الحد الأدنى هو 0 ، يمكن الحصول على الرقم العشوائي ، ويجب أن يكون الحد الأعلى 62 ، لأنه لا يمكن استرداد الرقم العشوائي ، وهذا هو ، وهو الحد الأقصى هو 62 ، وهو في خط السؤال لدينا النتيجة ؛} // خوارزمية التجزئة الخاصة السلسلة الثابتة sha1 (نص سلسلة) {byte [] cleanbytes = encoding.default.getbytes (text) ؛ byte [] hashedbytes = system.security.cryptography.sha1.create (). compuehash (cleanbytes) bitConverter.toString (hashedbytes) .replace ("-" ، "") ؛} // الحصول على tokenprivate static wxinfo getwinxintoken () {// get access_tokenttpwebropsons CreateGethTtpResponse ("https://api.weixin.qq.com/cgi-bin/token؟grant_type=client_credential&appid=" + appid + "& secret =" + secrect ، 5000) ؛ StreamReader reader = new StreamReaderer (response.getResPonseream) ؛ StringBuilder () ؛ بينما ((line = reader.readline ())! = null) {sb.append (line.toString ()) ؛} javascriptserializer JSAPI_TICKETRESPONSE = CreateGetHtTpResponse ("https://api.weixin.qq.com/cgi-bin/ticket/getticket؟access_token=" + AccessToken.Access_Token + "& type = jsapi" ، 5000) StringBuilder () ؛ بينما ((line = reader.readline ())! = null) {sb.append (line.toString ()) ؛} AccessToken = js.deserialize <wxinfo> (sb.toString ()) ؛ إرجاع AccessToken ؛ name = "url"> url المطلوبة </param> /// <param name = "timeout"> timeout timeout </param> /// <param name = "useragent" CreateGethTtpResponse (url url string ، int؟ timeout ، useragent string = null ، cookiecollection cookies = null) {if (string.isnullorempty (url)) {رمي new argumentnullexception ("url") ؛} httpwebrequest. (! string.isnullorEmpty (useragent)) {request.userAgent = userAgent ؛} if (timeout.hasvalue) {request.timeout = timeout.value ؛} if (cookies! = null) {requoKontainainer = new cookiNIner () ؛ httpwebrosponse ؛}}}

wxinfo.cs الكائن العالمي لتخزين معلومات الرمز المميز

 مساحة الاسم manyiabywap.models {/// <summary> /// WeChat للحصول على رمز معلمة إرجاع الرمز المميز /// </summary> الفئة العامة wxinfo {public appid {get ؛ تعيين؛ } السلسلة العامة Access_Token {get ؛ تعيين؛ } // access_tokenpublic string expires_in {get ؛ تعيين؛ } // وقت انتهاء صلاحية الرمز المميز ، ساري المفعول في غضون 7200 ثانية تذكرة السلسلة العامة {get ؛ تعيين؛ } // jsapi_ticketpublic string errmsg {get ؛ تعيين؛ } public int errcode {get ؛ تعيين؛ } السلسلة العامة noncestr {get ؛ تعيين؛ } // إنشاء سلسلة عشوائية من توقيع السلسلة العامة الزمنية {get ؛ تعيين؛ } // إنشاء طابع زمني لتوقيع السلسلة العامة المميزة {get ؛ تعيين؛ } // قيمة الإرجاع التوقيع}}

رمز JS للتهيئة على صفحة الويب:

 // wechat js sdk request status var requestStatus = 0 ؛ function sarkewx () {if (requestStatus! = 1) {requestStatus = 1 ؛ // request var ajaxpara = "url =" + encodeUricomponent (window.location.href.split ('#') [0] "/wxmessage/getToken" ، نوع البيانات: "json" ، البيانات: ajaxpara ، النجاح: الدالة (json) {if (undefined! = json && json! == "") المعلمات ، يمكنك فتحها على جانب الكمبيوتر الشخصي. jsonobjs.signature ، // مطلوب ، راجع التذييل 1 jsapilist: ['checkjsapi' ، 'onMenusharetimeline' ، 'onMenushareAppmessage' ، 'onMenushareqq' ، ' 2}) ؛ wx.ready (function () {// ALERT ("إن التحقق من WeChat ناجح") ؛ // بعد التحقق من معلومات التكوين ، سيتم تنفيذ الطريقة الجاهزة. يجب الحصول على جميع مكالمات الواجهة بعد الحصول على الواجهة ذات الصلة عند تحميلها ، يجب أن تكون التكوين عبارة عن عملية غير متزامنة. الواجهات التي تسمى فقط عند تشغيل المستخدم ، يمكن استدعاؤها مباشرة ، ولا تحتاج إلى وضعها في الوظيفة الجاهزة. // قائمة واجهات JS التي يجب اكتشافها. {"checkResult": {"choiceImage": true} ، "errmsg": "checkjsapi: ok"}}}) ؛ wx.onmenmenushareweibo ({title: 'manyi.com Share test' ، 'http://www.manyiaby.com/img/logo_2.jpg' ، RES: وضعت في الوظيفة الجاهزة.

هنا ، سأقدم استخدام WeChat Sharing JS SDK. يمكنك الرجوع إليها بناءً على احتياجاتك الخاصة. لقد قدمتها لك في البداية أن مشاركة JS SDK التي توفرها WeChat هي مجرد معالجة ذاكرة التخزين المؤقت للمتصفح الداخلي لـ WeChat. لا تزال المشاركة الحقيقية تتطلب منا النقر فوق زر المشاركة في الزاوية اليمنى العليا.

ما سبق ليس حلول مشاركة مواقع الويب للجوال المثالية. أخيرًا ، سأقدم لك بعض مكونات المشاركة الاجتماعية SOSH. عندما أرى هذا المكون ، أعرف أن هذا هو ما أحتاجه ، واجهة بسيطة ، ويمكن أن يجعل موقعنا يبدو أنيقًا ومريحًا. حسنًا ، دون مزيد من اللغط ، أدخل الموضوع:

ما سبق هو مقدمة المحرر حول كيفية مشاركة وظائف المنصات متعددة المنصات على تطبيق الويب المحمول. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!