نظرًا لاحتياجات الشركة التجارية، يجب أن تكون صفحة الويب التي تنتجها Vue متصلة بشبكة wifi الخاصة بالمنزل الذكي، ومع ذلك، فإن شبكة wifi هذه غير متصلة بالإنترنت وتستخدم فقط لتوصيل الهاتف المحمول بالمنزل. بهذه الطريقة، لا يمكن لصفحة الويب تحميل الصور على الخادم ضمن هذا النوع من شبكة wifi.
وفي هذا الصدد، توصلت إلى 3 حلول لنظام Vue للصفحة الواحدة.
1. قم بتحميل الصورة على الصفحة السابقة أولاً، وقم بتخزينها مؤقتًا، ثم احصل عليها على الصفحات غير المتصلة التالية.
2. أنشئ صفحة تحتوي على حاوية توجيه في الأعلى، ثم ضع الصفحة بعد قطع اتصال الشبكة، وجميع الصور التي يلزم عرضها في الأسفل. بهذه الطريقة، عند تحميل الصفحة، ستظهر جميع الصور، ويمكن للمسارات الفرعية أعلاه الحصول على الصور بشكل طبيعي.
3. قم بتحويل الصورة إلى بيانات base64 واحفظها في localStorage.
يعد الحلان 1 و2 بسيطين نسبيًا ويعملان بشكل جيد على أجهزة الكمبيوتر الشخصية ومنصات Android. ومع ذلك، لا يتم عرضه على نظام التشغيل ios.
(من الواضح أن الصور في الأسفل، لكن الصور أعلاه غير معروضة)
ويمكن الاستدلال من ذلك على أن متصفح نظام iOS يقوم بتحميل الصور واحدة تلو الأخرى. قبل تحميل كل صورة، سيتم أولاً التعرف على ما إذا كانت موجودة على الخادم، وإذا كانت موجودة ولم تتغير، فسيتم عرضها في ذاكرة التخزين المؤقت. وإذا لم يتم العثور عليها، فسيتم تقديم 404 مباشرة. ولذلك، فإن استراتيجيات التخزين المؤقت المستندة إلى المستعرض ليست مثالية عند قطع اتصال الشبكة. ، يجب استخدام الخيار الثالث. الصق الكود أولا:
/* احصل على كود base64 للصورة* @param {obj}img image dom object* */ function getBase64Image(img) { Let Canvas = document.createElement(canvas); img height; Let ctx = Canvas.getContext(2d); img.width, img.height); // ارسم نفس الصورة return Canvas.toDataURL(image/png);يمكن أن يؤدي استخدام اللوحة القماشية إلى تحويل الصور بسهولة إلى تنسيق base64. ثم فقط احفظه في sessionStorage. عند إعادة عرض الصورة لاحقًا، ما عليك سوى تعيين سمة src الخاصة بـ img على بيانات base64. ما أفعله في مشروع vue هو إنشاء مكون لتحويل وحفظ base64، وتحويل جميع الصور الموجودة في الفتحة إلى base64، وإنشاء سمة اسم لعلامة img واستخدامها كمفتاح لـ sessionStorage، ثم إنشاء مكون كـ مكون العرض (يحتوي على علامة img واحدة فقط)، قم بتعيين سمة الاسم الخاصة به لتكون نفس الصورة المقابلة لها، واستخدمها كمفتاح لاسترداد بيانات base64 الخاصة بـ sessionStorage.
تحويل وحفظ المكونات:
<!--الصور التي تحتاج إلى تحميل مسبق-> <save-img-base64> <img src=../../assets/img/connect/bind_xiaofang.png name=bind_xiaofang/> <img src=.. / ../assets/img/connect/bind_alonePro.png name=bind_allonePro/> <img src=../../assets/img/connect/bind_S20.png name=bind_S20/> <img src=../../assets/img/connect/bind_S30.png name=bind_S30/> <img src= ../../assets/img/connect/connectStart_xiaofang.png name=connectStart_xiaofang/> <img src=../../assets/img/connect/connectStart_alonePro.png name=connectStart_allonePro/> <img src=../../assets/img/connect/connectStart_S20.png name= ConnectStart_S20/> <img src=../../assets/img/connect/connectStart_S30.png name=connectStart_S30/> <img src=../../assets/img/connect/reset_xiaofang.png name=reset_xiaofang/> <img src= ../../assets/img/connect/reset_allonePro.png name=reset_allonePro/> <img src=../../assets/img/connect/reset_S20.png name=reset_S20/> <img src=../../assets/img/connect/reset_S30.png name= Reset_S30/> <img src=../../assets/img/connect/network_set.png name=network_set/> <img src=../../assets/img/connect/phone_wifi.png name=phone_wifi/> <img src=../../assets/img/connect/tmall.png name= tmall/> </save-img-base64>
مكونات العرض:
<img-base64 name=network_set></img-base64>
حالة تخزين جلسة المتصفح:
كما يتبين من جدول هل يمكنني الاستخدام، فإن متصفحات الهاتف المحمول الحديثة متوافقة بشكل أساسي مع اللوحة القماشية، ويمكن للجميع استخدامها بثقة.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.