يتطلب هذا الجزء استخدام JS-SDK من WeChat ، وهي مجموعة أدوات لتطوير الويب تعتمد على WeChat التي توفرها منصة WeChat العامة لمطوري الويب.
باستخدام WeChat JS-SDK ، يمكن لمطوري الويب استخدام WeChat لاستخدام قدرة التقاط الصور ، واختيار الصور ، والموقع ، والمواقع الأخرى ، ويمكنهم استخدام إمكانيات WeChat الفريدة بشكل مباشر مثل مشاركة WeChat ، ومسح كوبونات البطاقات ، والدفع لتزويد مستخدمي WeChat بتجربة أفضل على الويب.
الوثائق الرسمية
1. إدخال JS-SDK
1. قم بتسجيل الدخول إلى منصة WeChat العامة أولاً وأدخل "إعدادات الوظائف" من "إعدادات الحساب العام" وملء "اسم مجال أمان واجهة JS". تمامًا مثل ترخيص صفحة الويب ، إنه مجرد اسم مجال.
2. تقديم أحد ملفات JS التالية على الصفحة التي تحتاج إلى استدعاء واجهة JS
<script src = "http://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script> <script src = "https://res.qq.com/open/js/jweixin-1.2.0.js">/script
2. تحقق من التكوين من خلال واجهة التكوين
wx.config ({debug: true ، // قم بتشغيل وضع التصحيح ، سيتم تنبيه قيم الإرجاع لجميع واجهات برمجة التطبيقات التي تسمى على العميل. لعرض المعلمات التي تم تمريرها ، يمكنك فتحها على جانب الكمبيوتر. سيتم طباعة معلومات المعلمة من خلال الحيل الرسمي ، وسيتم طباعتها فقط على جهاز الكمبيوتر. noncestr: '' ، // المطلوبة ، السلسلة العشوائية التي تم إنشاؤها لتوقيع التوقيع: '' ، // مطلوب ، jsapilist التوقيع: [] // مطلوب ، قائمة واجهات JS التي يجب استخدامها}) ؛أولاً ، قبل إنشاء هذا التوقيع ، تحتاج إلى الحصول على تذكرة مؤقتة JSAPI_TICKET. JSAPI_TICKET هي تذكرة مؤقتة يستخدمها الحساب الرسمي للاتصال بواجهة WeChat JS. في ظل الظروف العادية ، تبلغ فترة صحة JSAPI_Ticket 7200 ثانية ، والتي يتم الحصول عليها من خلال Access_Token. نظرًا لأن عدد مكالمات API للحصول على JSAPI_TICKET محدود للغاية ، فإن التحديث المتكرر لـ JSAPI_TICKET سيؤدي إلى محدودة مكالمات API ، مما يؤثر على أعماله الخاصة ، ويحتاج أيضًا إلى التحكم في تحديث خادم التحكم المركزي.
1. الحصول على ملاحظات مؤقتة
إرجاع التغليف نتيجة
حزمة com.phil.wechatauth.model.resp ؛ استيراد com.phil.common.result.ResultState ؛ / *** JSAPI_TICKET هي تذكرة مؤقتة تستخدمها الحساب الرسمي للاتصال بواجهة WeChat JS* Author Phil* date 21 أغسطس ، 2017*/ الفئة العامة JSAPITICKET تمتد ResultState {/ ****/ Private Static Final Long Serialversionuid = -357009110782376503L ؛ تذكرة سلسلة خاصة // jsapi_ticket private string expires_in ؛ السلسلة العامة getTicket () {return ticket ؛ } public void setticket (string ticket) {this.ticket = ticket ؛ } السلسلة العامة getExpires_in () {return Expires_in ؛ } public void setexpires_in (string Expires_in) {this.expires_in = Expires_in ؛ }}كيف تحصل عليه
/ *** احصل على التذكرة المؤقتة للاتصال بواجهة WeChat JS بواسطة JSAPI_TICKET* RETURN*/ public string getTicket (String AccessToken) {JSAPITICKET JSAPITICKET = NULL ؛ خريطة <string ، string> params = new treemap <string ، string> () ؛ params.put ("Access_Token" ، AccessToken) ؛ params.put ("type" ، "jsapi") ؛ سلسلة السلسلة = httprequtil.httpdefaultexecute (httprequtil.get_method ، wechatconfig.get_ticket_url ، params ، "") ؛ if (stringUtils.isnotBlank (result)) {jSapiticket = jsonutil.fromjson (النتيجة ، jsapiticket.class) ؛ } if (jsapiticket.geterRcode () == 0) {return jsapiticket.getTicket () ؛ } إرجاع فارغ ؛ }2. إنشاء توقيع وإرجاع معلمات
قواعد توليد التوقيع هي كما يلي: الحقول المشاركة في التوقيع تشمل noncestr (سلسلة عشوائية) ، JSAPI_TICKET صالحة ، الطابع الزمني (الطابع الزمني) ، عنوان URL (عنوان URL لصفحة الويب الحالية ، لا يشمل # وأجزائه اللاحقة). بعد فرز جميع المعلمات المراد توقيعها من صغير إلى كبير (ترتيب القاموس) وفقًا لرمز ASCII لاسم الحقل ، يتم استخدام تنسيق زوج قيمة مفتاح URL (أي ، key1 = value1 & key2 = value2 ...) للوصول إلى سلسلة سلسلة 1. تجدر الإشارة هنا إلى أن جميع أسماء المعلمات هي أحرف صغيرة. يتم تشفير String1 ، ويتم إجراء اسم الحقل وقيمة الحقل على حد سواء ، ولا يتم تنفيذ أي هروب عن عنوان URL.
مثال String1 كما يلي
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSLYY3-SL-HHTDFL2FZFY1A Ochkp7qg & noncestr = wm3wzytpz0wzccnw × tamp = 1414587457 & url = http: //mp.weixin.qq.com؟ params = value
هناك حفرة هنا. الصفحة غير مستقيمة ، لكن الحقل الموقّع غير مُستمر. انتبه إلى التغليف البسيط لمعلومات تكوين JS-SDK.
حزمة com.phil.wechatauth.model.resp ؛ / *** معلومات تكوين صفحة JS-SDK* Author Phil* date 22 أغسطس 2017**/ الفئة العامة jswechatconfig {private string appid ؛ الطابع الطابع الطويل الخاص ؛ سلسلة خاصة noncestr. توقيع السلسلة الخاصة ؛ السلسلة العامة getAppId () {return appid ؛ } public void setAppId (string appid) {this.appid = appid ؛ } public getTimestamp () {return timestamp ؛ } public void setTimestamp (timestamp) {this.timestamp = timestamp ؛ } السلسلة العامة getNoncestr () {return noncestr ؛ } public void setnoncestr (سلسلة noncestr) {this.noncestr = noncestr ؛ } السلسلة العامة getSignature () {return signature ؛ } public void setSignature (سلسلة توقيع) {this.signature = signature ؛ }}إضافة معلومات التكوين إلى الصفحة
/ ** * */ package com.phil.wechatauth.controller ؛ استيراد java.util.sortedMap ؛ استيراد java.util.treemap ؛ استيراد javax.servlet.http.httpservletrequest ؛ استيراد org.springframework.beans.factory.annotation.autowired ؛ استيراد org.springframework.stereotype.controller ؛ استيراد org.springframework.web.bind.annotation.requestmapping ؛ استيراد com.phil.common.config.systemConfig ؛ استيراد com.phil.common.config.wechatconfig ؛ استيراد com.phil.common.Util.DateTimeUtil ؛ استيراد com.phil.common.util.payutil ؛ استيراد com.phil.common.Util.SignatureUtil ؛ استيراد com.phil.wechatauth.model.resp.jswseChatConfig ؛ استيراد com.phil.wechatauth.service.wechatauthService ؛ /** * JS-SDK * Author Phil * date 21 أغسطس ، 2017 * */controllerRequestMapping ("/auth") الطبقة العامة WeChatauthController {autowired WechatauthService WeChatauthService ؛ /** * احصل على الموقع الجغرافي * @param طلب * regurn * throws استثناء */ @requestmapping ("/getLocation") السلسلة العامة getLocation (httpservletrequest request) رمي استثناء {jSweChatConfig jswseChatConfig = new jswechatconfig () ؛ jswechatconfig.setappid (wechatconfig.app_id) ؛ jswechatconfig.settimestamp (dateTimeUtil.CurrentTime ()) ؛ jswechatconfig.setnoncester (payutil.createnoncester ()) ؛ sortedMap <object ، object> map = new treemap <object ، object> () ؛ map.put ("jsapi_ticket" ، weChatauthService.getTicket (WeChatauthService.FindLastEsteoken ())) ؛ map.put ("noncester" ، jswechatconfig.getnoncester ()) ؛ map.put ("timestamp" ، jswechatconfig.getTimestamp ()) ؛ map.put ("url" ، request.getRequesturl (). toString ()) ؛ سلسلة التوقيع = signatureutil.createsha1sign (الخريطة ، null ، systemconfig.character_encoding) ؛ jswechatconfig.setsignature (توقيع) ؛ request.setAttribute ("jswechatconfig" ، jswechatconfig) ؛ العودة "WeChatauth/getLocation" ؛ }}طريقة التوقيع
/ *** شارك في التوقيع من خلال جميع العناصر في الخريطة <sortedMap ، object>*** param مجموعة الخرائط للخرائط المراد توقيعها* params apikey apikey إذا كانت فارغة ، فلن تشارك في التوقيع ، وإذا لم يكن فارغًا ، فسيشارك في string apikey ، notsignparams (الخريطة ، apikey) ؛ messagedigest md = null ؛ حاول {md = messagedigest.getInstance ("sha-1") ؛ byte [] digest = md.digest (result.getBytes ()) ؛ النتيجة = bytetoStr (Digest) ؛ } catch (nosuchalgorithMexception e) {e.printstacktrace () ؛ } نتيجة الإرجاع ؛ }طرق توقيع أخرى
3. التحقق الناجح من خلال معالجة واجهة جاهزة
يتم الانتهاء من التنفيذ أعلاه ويتم إدخال الصفحة الكاملة
<٪@ page language = "java" contentType = "text/html ؛ charset = utf-8" pageencoding = "utf-8" ٪> <! <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8" src = "http://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.5/css src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> </head> <body> <br> <bre> <viv> <sial> label for = "firstname"> العنوان: </label id = "pitic-ide-ide =" text ". almatholder = "الموقع الجغرافي يتم الحصول عليه" tabindex = "1" complete autocomplete = "Off"/> <div id = "i-name"> </div> </viv> </viv> </viv> </body> <script type = "text/javaScript"> wx.config ( المعلمات ، يمكنك فتحها على جانب الكمبيوتر. "$ {jSweChatConfig.noncester} '، // مطلوب ، السلسلة العشوائية التي تم إنشاؤها بواسطة التوقيع هي توقيع:' $ {jswseChatConfig.signature} '، // مطلوب ، يتم عرض التوقيع في الملحق 1 jsapilist: [checkjsapi' ، 'OpenLocation' ، يظهر واجهات JS في التذييل 2}) ؛ wx.checkjsapi ({jsapilist: ['getLocation'] ، // قائمة واجهات js التي يجب اكتشافها. انظر الملحق 2 للحصول على قوائم واجهات JS. النسخة! ') ؛ var latitude ؛ فارغ. سرعة var ؛ دقة var wx.ready (function () {// بعد التحقق من معلومات التكوين ، سيتم تنفيذ الطريقة الجاهزة. يجب الحصول على جميع مكالمات الواجهة بعد أن تحصل واجهة التكوين على النتيجة. التكوين هو تشغيل غير متزامن للعميل. لذلك ، لذلك ، إذا كنت بحاجة إلى استدعاء الواجهة ذات الصلة عندما يتم تحميل الصفحة ذات الصلة ، يجب أن يتم استدعاء الواجهة ذات الصلة في الوظيفة الجاهزة. لا يلزم وضعه في الوظيفة الجاهزة. تنبيه الدقة (دقة) ؛ wx.error (function (res) {// إذا فشلت معلومات التكوين في التحقق ، سيتم تنفيذ وظيفة الخطأ. إذا انتهت صلاحية التوقيع ، فإن التحقق من رسائل خطأ محددة ، يمكنك فتح وضع التصحيح للتكوين ، أو عرضه في المعلمة RESTED. </script> </html>يمكنك تصحيحها من خلال أداة مطور الويب WeChat التي توفرها WeChat رسميًا.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.